Ordered list numbers not showing in IE

[steliodj]

Hi there,

I have an ordered list which looks fine in FF and Safari…but when i check the site using IE (both 6 & 7) the numbers are not showing.

I have already searched Google and as i can see this is a common problem, but didn’t manage to find a solution yet….

…any advice?

Thanks in advanced.
Stelios

[chazzwick]

post your css and html so we can see what you did

[steliodj]

Ok…that was fast :)

Here is my CSS

Code:

html,body {
text-align:center;
background: url(../images/bg.jpg) repeat;
}

* {
border:0;
margin:0;
outline:none;
padding:0;
}

/** divs **/
#top {
background:#191919;
display:none;
text-align:center;
}

#container {
margin:auto;
text-align:left;
width:875px;
}

#header {
margin:40px 0 0;
text-align:center;
}

#content {
padding-top:80px;
background-color: #ffffff;
}

/** switchContent **/
#content_2,#content_3,#content_4 {
display:none;
}

/** lavaLamp **/
.lavalamp {
float:right;
height:29px;
margin-right:4px;
overflow:hidden;
padding:5px;
position:relative;
}

.lavalamp li {
float:left;
list-style:none;
margin-right:40px;
}

.lavalamp li.back {
border-bottom:5px solid #d7006c;
height:30px;
position:absolute;
}

.lavalamp li a {
color:#191919;
float:left;
font-family:”Times New Roman”, Times, serif;
font-size:1.2em;
height:30px;
outline:none;
overflow:hidden;
position:relative;
text-decoration:none;
z-index:10;
}

.lavalamp li a:hover,p.top a:hover {
color:#00a2dd;
}

/** slidePanel **/
.slide {
margin:0;
padding:0;
}

.btn-slide {
/*background:#000000;*/
color:#fff;
display:block;
font-family:”Times New Roman”, Times, serif;
font-size:1em;
height:72px;
line-height:1em;
padding:3px 0;
text-align:center;
text-decoration:none;
background: url(../images/slider_bar_bg.png) repeat-x;
}

/** typography **/
.name {
color:#d7006c;
font-family:”Times New Roman”, Times, serif;
font-size:3.4em;
font-weight:700;
letter-spacing:-0.05em;
}

.slogan {
color:#191919;
font-family:”Times New Roman”, Times, serif;
font-size:3.4em;
font-style:italic;
letter-spacing:-0.05em;
}

h1 {
border-left:10px solid #fde000;
color:#191919;
font-family:”Times New Roman”, Times, serif;
font-size:1.8em;
font-variant:small-caps;
padding-left:10px;
}

p {
color:#191919;
font-family:”Times New Roman”, Times, serif;
font-size:1.2em;
line-height:1.5em;
margin-bottom:20px;
padding-left:40px;
padding-right: 40px;
text-align:justify;
}

ol.top {
color:#fff;
font-family:”Times New Roman”, Times, serif;
font-size:0.9em;
line-height:1.5em;
margin:0 auto;
width:875px;
text-align: left;
}

p.up a {
color:#191919;
float:right;
font-family:”Times New Roman”, Times, serif;
font-size:1.2em;
margin-bottom:20px;
text-decoration:none;
}

/** miscellaneous (hr, etc.) **/
hr {
border-top:1px dotted #191919;
height:1px;
margin:20px 0;
}

and here is the html of the list

Code:

1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus.
3. Vestibulum auctor dapibus neque.
4. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
5. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt.
6. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non.
7. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

[iopet]

Add a ~30px padding-left to ol.top

[steliodj]

Thanks iopet…now everything is fine :)

I was trying this with margin-left :)…thank you very much

[Author]

Posts