Forums

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


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


<div id=\"top\">

	<ol class=\"top\"><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Vestibulum auctor dapibus neque.</li>
	   <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
	   <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt.</li>
	   <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non.</li>
	   <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li></ol>
    
</div>

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

treehouse : what would you like to learn today?

Forums

Ordered list numbers not showing in IE