Problem with ordered list in ie7

HTML & CSS
1

Hey i have an extremly anoying problem with my ordered list.
The problem is ie7 who dosnt seem to render the numbers :frowning:

1 xxxxxx
2 xxxxxx
3 xxxxxx

Like explorer 8. In fact the numbers dosnt show exept if i set list-style-position:inline
But then number 1 is appearing instead of 1,2,3 etc. - aint explorer 7 just greaaaty when it comes to rendering ul og ol.

The css in question can be seen below

div.Popular_Articles ol.mostread_Popular {margin:0 0 0 18px; padding:0;}
div.Popular_Articles li.mostread_Popular {margin:0 0 6px; padding:0; list-style-type:decimal; background:none;}

I cant se what i am doing wrong - i hate explorer

2

Hi,

IE has many bugs with lists I’m afraid :slight_smile:

  1. If the ol is in “haslayout” mode (e.g. has a width or is floated) then all the numbers disappear and can’t be fixed. The only option is not to float it and not to give it layout. You would need to wrap a div around the ol and flfoat that instead.

  2. If the list element (li) has a layout then again the numbers all set to number 1 orr disappear. There is a fix and you can set display:list-item on the list and set the vertical-alignment to top as IE treats the marker as an inline element.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ol {
    margin:0 0 0 38px;
    padding:0;
}
li {
    margin:0 0 6px;
    padding:0;
    list-style-type:decimal;
    background:none;
}
li {
    width:100&#37;;
    display:list-item;
    vertical-align:top;
}
</style>
</head>
<body>
<ol>
    <li>test<br />
        test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ol>
</body>
</html>
  1. Easiest solution is to remove “haslayout” from the ol and the li and then it will work as expected.
3

Thank you very much for your answer.
Much appreciated

Kind regards

4

By the way ended up using the following style for my ordered list in ie7 and it works like a charm :slight_smile:

li {display:list-item; vertical-align:top; list-style-position:inside; margin:0 0 6px -18px;}

5

That negative left margin isn’t needed if you zero out the padding/margins on the <ul> like Pauls code :slight_smile: