Ordered list in explorer 7

Ordered lists in IE 7 seems to be the devils work :frowning:

A solution for IE 7


ol {margin:0 0 0 20px;}
li {list-style-position:inside; list-style-type:decimal; margin:5px 0 6px -18px;}

I can imagine others have had a simuliar problem :slight_smile:

Cheers

Hm, I wouldn’t have thought that was necessary.

Just regular margins and paddings should work ok, as long as you specify them.

If IEtester renders IE7 correctly regarding ordered lists, the only solution that worked for me is the one that i have written above.
I couldn´t get it to work in any other way. I have a little correction to the negative left-margin specified above.

It should of course be the same at the left margin specified for <ol>


ol {margin:0 0 0 20px; list-style-type:decimal;}
li {list-style-position:inside; margin:0 0 6px -20px;}

Remember to use conditional comment for IE7 :slight_smile:


<!-- [if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" />
<![endif]-->

Some browsers use a default left padding and not margin so as Ralph said above you need to control both.:slight_smile:

The positioning of markers varies between browsers anyway so I would just do something simple like this.


<!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 2em;
    padding:0;
}
</style>
</head>
<body>
<ol>
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
    <li>testing</li>
</ol>
</body>
</html>


If you list-style:inside then you turn the list marker into an inline element and when the text wraps it goes underneath the marker and not in line with the text above. That’s ok if that’s what you want but usually you don’t :slight_smile:

You are right Poul.
But why does it have to be em and not px?


ol {
    margin:0 0 0 2em;
    padding:0;
}

Hi,

It doesn’t have to be em but ems scale better. You can use px but it would need to be about 16px approx depending on font. Just tweak to suit :slight_smile: