Forum Moderators: not2easy

Message Too Old, No Replies

list-style-type: decimal not showing in IE

Can't get <li> bullets to show in IE nor problem in FF

         

cowcents

8:33 pm on Nov 10, 2008 (gmt 0)

10+ Year Member



The code posted below works great in FF, but won't work in IE.....The <li> # won't show (no bullets either). I have wasted a good many hours on this. I am kind of new to the CSS and getting pretty aggravated with the display issues between IE and FF....Anyway all suggestions are appreciated

Code:
<ol>
<li>Mare is administered hCG at 1 pm Friday the 1st of May after ultrasonography reveals a 38 mm diameter preovulatory follicle with good associated uterine edema and a relaxed cervix</li>
<li>Mare is artificially inseminated with good quality fresh or cooled semen 24 hours post hCG administration on Saturday the 2nd of May</li>
<li>Mare is ultrasounded on Sunday the 3rd of May and ovulation is detected. Human chorionic gonadotropin should induce a mare to ovulate 36 to 42 hours post-injection or 1.5 days after administration</li>
<li>Mare is flushed on Saturday the 9th of May at 1 pm to retrieve a late morula or early blastocyst to be vitrified</li>
</ol>

CSS:

ol li{
font-size:13px;
width:85%;
padding-bottom:2%;
padding-right:5%;
list-style:inside;
list-style-type:decimal;
}

Thanks!

mercedes

11:01 pm on Nov 10, 2008 (gmt 0)

10+ Year Member



Use ul instead of ol. that may solve ;)

swa66

1:56 am on Nov 11, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Different browsers implement bullets differently. In order to leave space they need to indent the paragraph a bit. Some do it with margins, others do it with padding. And some don't draw the bullets when they are outside the visible area.

Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
ol {
background-color:green;
}
ol li {
background-color:red;
}
</style>
</head>
<body>
<ol>
<li>one</li>
<li>two</li>
</ol>
</body>
</html>

See how IE7 doesn't show any green?

Now you can take control of this yourself:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ol {
background-color:green;
}
ol li {
background-color:red;
margin-left: 2em;
}
</style>
</head>
<body>
<ol>
<li>one</li>
<li>two</li>
</ol>
</body>
</html>

Now, adding

list-style: inline
is using a shorthand notation and as with all of them, not specifying some things tends to reset those values to their default. As such it's easier to set just
list-style-position:inside;

See also:
[w3.org...]

Once you set it to inline, the extra space on the left to allow for the bullets to be positioned isn't needed anymore either.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ol {
background-color:green;
list-style-position:inside;
}
ol li {
background-color:red;
}
</style>
</head>
<body>
<ol>
<li>one</li>
<li>two</li>
</ol>
</body>
</html>

Works the same in FF3, safari, opera and IE6 and IE7 ...