PDA

View Full Version : question about unordered list



sudhakararaog
Oct 12th, 2009, 08:18 AM
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
http://sudhakargolakaram.co.in/list.html

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

thanks

effpeetee
Oct 12th, 2009, 11:53 AM
<ol> is an ordered list - <ul> is for an un-ordered list.

Frank

DestinDave
Oct 12th, 2009, 02:28 PM
If your problem is that you have an ordered list that looks fine everywhere except IE which shows up as an unordered list (with bullets) try adding this to your CSS:


ol li {
list-style-position:outside;
list-style-type:lower-alpha;
}

Here's a lot of good info on lists.. www.wickham43.net/lists.php (http://www.wickham43.net/lists.php)

SB65
Oct 12th, 2009, 02:36 PM
A bit of confusion here - although you refer to this as an unordered list it's actually and ordered list - and there are no numbers showing in IE.

The problem here is that you have the padding set to 0 on the <ol> element, and IE uses padding to provide the space for the number or bullet of the element. Everything else uses margin to do this which is why it looks OK in other browsers.

Try adding padding-left:30px to your css for #list ol

sudhakararaog
Oct 12th, 2009, 11:47 PM
i have made changes to the list code in css it works fine when i use
list-style-position: inside; in all browsers however what i need is
list-style-position: outside;

when i add list-style-position: outside; all browsers are displaying the list i wanted except for ie 6 and 7, what i have noticed is when i added
*{
margin: 0;
padding: 0;
}

and i have list-style-position: outside; ie 6 and 7 are not showing the numbered list if i remove the global declaration and use list-style-position: outside; then ie 6 and 7 are displaying correctly.

i need the global declaration to be in the css code and i want to achieve the effect of using list-style-position: outside; in ie 6 and 7. i am using a transitional document, also due to the cms i use i cannot
use an additional css file for ie and also i cannot write conditional comments
so i have to write the code in 1 css file only to achieve the
list-style-position: outside; for all browsers.

please advice.

thanks


following is the 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">
*{
margin: 0;
padding: 0;
}

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

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


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

#list ol li
{
list-style-type: decimal;
list-style-position: outside;
padding: 0 0 10px 5px;
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>

SB65
Oct 13th, 2009, 09:25 AM
Why does adding:


#list ol{padding-left:30px;}

to the above code not give you what you want?