Forum Moderators: not2easy

Message Too Old, No Replies

IE OL/UL Width bug?

         

umbrella

3:30 am on May 22, 2008 (gmt 0)

10+ Year Member



I've run into some trouble when applying a width to both ordered and unordered lists. For example when I specify a width on an ordered list the number of each item disappears in IE(in my case version 7.0.5730.13) . It works as expected in Firefox 2.0.0.14, however.

Here's some sample, valid 4.01 strict, code that illustrates the problem. By adding and removing the class attribute "sixhundred" on the list it should become apparent.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OL/UL Width Bug</title>
<style type="text/css">
.sixhundred
{
width: 600px;
}
</style>
</head>
<body>
<!--
in IE if the class attribute is removed the list becomes numbered again as it should be
-->
<ol class="sixhundred">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<li>Item 4</li>
</ol>
</body>
</html>

Any thoughts/tips on this would be appreciated. Thanks!

D_Blackwell

8:05 pm on May 26, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A little jiggering with where you bring in the width ought to do the trick. In this case, I have moved the
class "sixhundred" into a wrapper <div> and added a background-color: just to help keep an eye on things. The numbering now looks good in FF, Opera, and IE. Numbers are visible and contained within the expected display block.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OL/UL Width Bug</title>
<style type="text/css">
.sixhundred {
width: 600px; background-color: #faebd7;
}
</style>
</head>
<body>
<!--
in IE if the class attribute is removed the list becomes numbered again as it should be
-->
<div class="sixhundred">
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</li>
<li>Item 4</li>
</ol>
</div>
</body>
</html>

Dave75

6:31 am on May 28, 2008 (gmt 0)

10+ Year Member



You need to to define margin, padding and text-indent so that the list displays the same across browsers. IE; different browsers use different defaults for these list and list-item properties.