Question

On a fiddle the css is working correct. On my website the ‘roman’ doesn’t load.
If i check the css it’s present, i also deleted my cache but that doesn’t help either.

I hope this info will cover all to solve the problem.

Here some html:

<li data-item="Content">Content
<ul class="roman">
<li data-target="inleiding.html"><span></span><span>Inleiding</span></li>
<li data-target="c1.html"><span>I</span><span>Het tijdperk der goden</span></li>
<li data-target="c2.html"><span>II</span><span>Helden en Krijgslieden</span></li>
<li data-target="c3.html"><span>III</span><span>De Bamboesnijder en het maanmeisje</span></li>
<li data-target="c4.html"><span>IV</span><span>Legenden omtrent Buddha</span></li>
<li data-target="c5.html"><span>V</span><span>Legenden omtrent vossen</span></li>
<li data-target="c6.html"><span>VI</span><span>Jizō, de god van Kinderen</span></li>
<li data-target="c7.html"><span>VII</span><span>De Legende in de Japansche Kunst</span></li></ul>
</li>

This is my css

ul {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: Verdana;
    font-size: 20px;
    overflow-x: hidden;
}

#container {
    height: auto;
}

/* normal */
.column_n {
    width: 480px;
    padding: 20px;
    float: left;
    background: red;
    border-left: 1px dashed pink; 
}

/* small */
.column_s {
    width: 400px;
    padding: 20px;
    float: left;
    background: red;
    border-left: 1px dashed pink; 
}

/* menu (small) */
#menu {
    width: 400px;
    padding: 20px;
    float: left;
    color: white;
    background-color: #004249;
}


#m_console {
    position: fixed;
    background: yellow;
    left: 5px;
    top: 25px;
}

#book {
    width: 1402px;
}

.b_footnote {
    background: yellow;
    /* position: absolute; */
    width: 450px; 
    /* width: auto; */

    /* left: 540px; */
    /* z-index: 99; */
}

.b_image {
    width: 410px;
}​

.roman {
    display: table;
    width: 100%;
    text-transform: normal;
    color: black;
    background-color: white;
}

.roman li {
    display: table-row;
}

.roman span {
    display: table-cell;
    padding: 1px 4px;
}

Here a fiddle where it does work.
http://jsfiddle.net/nCs99/6/

Answer 1

Firebug can help you to extensively debug your CSS files. Just press F12 after installing it and head to HTML or CSS tab. According to your code, nothing is wrong but we don’t know what is interfering with the classes or tags in the end.