Thread: question about unordered list

**sudhakararaog** · 12 Oct 2009 @ 06.16

only in ie browsers i am getting a completely different outcome when using unordered lists it works fine in all other browsers.

following is the code

<div id="list">

<ol>

<li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </li>

<li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </li>

<li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam </li>

</ol>

</div>

#list{
width: 500px;
margin: 50px 0 0 0;
}

#list ol
{
list-style-type: decimal;
list-style-position: outside;
width: 500px;
}

#list ol li
{
padding: 0 0 10px 0;
}

this file is available at
Untitled Document

please advice how to get the same outcome in ie browsers as it appears in firefox, chrome, safari and opera

thanks

**Gaz** · 12 Oct 2009 @ 08.19

Firstly your using ordered lists and not un-ordered.

Secondly i would define everything in the same way, such as something things are defined in pt and some in px. best to be consitant.

you have defined that everything has margin of 0pt and padding of 0pt, so you don't need to put the #list ol li margin as 0pt. as it will be inherited from the top.

Lastly, i can't see anything different between the two. The only thing i did notice was that because my IE window was a different size to my firefox one, and i didn't notice at first that it was centered, this then caused the list to appear closer to the edge, but when making the windows the same size all seamed the same.

**shalom_m** · 12 Oct 2009 @ 10.32

This should do it:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.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 type="text/css">


body{
font: normal 12px Arial, Helvetica, sans-serif;
}

#wrapper{
width: 900px;
margin: 0 auto;
}


#list{
width: 500px;
margin: 50px 0 0 0;
}


#list ol li
{
list-style-type: decimal;
padding: 0 0 10px 0;
margin: 0 0 0 0;
}


</style>
</head><body>
<div id="wrapper">

<div id="list">
<ol>
<li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed
diam Erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing
elitr, sed diam </li>
<li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed
diam Erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing
elitr, sed diam </li>
<li>List item 1 Lorem ipsum dolor sit amet, consetetur sadi pscing sed
diam Erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing
elitr, sed diam </li>
</ol>


</div>
</div>
</body></html>

**sudhakararaog** · 12 Oct 2009 @ 21.33

thanks for replying

the code is working fine, however in my css i have defined at the top as
*{
margin: 0;
padding: 0;
}

when i add this code ie 6 and 7 are not displaying the list unlike other browsers and i need to set
*{
margin: 0;
padding: 0;
}

in my page so how can i get the same effect along with using the global declaration

please advice.