Ok, i’ve encountered this problem before, but never really had to do anything about it… mostly because the bug itself was pertaining to an unordered list, which I was able to remedy by removing any list-style and using a background image for my bullets.
ANYWAYS.
My problem today is with an ordered list,
Why does IE see fit to not increment the number values with each list item?
and why does it drop the list-number down to the bottom line of each list item?
I’ve done a lot of googling on this subject, and all of the answers I’ve come across tell me to remove any width declaration, and this would fix the problem.
However, I do not have any width definitions set up for my ordered list, and the bug persists.
Perhaps its because I have a nested unordered list within my ordered list?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="meat">
<ol type="1">
<li>First item.</li>
<li>Second item.</li>
<li>Third item.</li>
<li>Fourth item.</li>
<li>Fifth item.
<ul>
<li>This is a nested unordered list item.</li>
<li>This is a nested unordered list item. </li>
</ul>
</li>
</ol>
</div>
</div>
</body>
</html>
Here is my CSS:
.container .meat ol
{
margin: 0;
padding: 10px 0 0 20px;
}
.container .meat ol li
{
padding: 5px 0 3px 0;
}
.container .meat ol li ul
{
padding: 0;
margin: 0;
list-style: none;
}
.container .meat ol li ul li
{
padding-left: 10px;
background: url(/help/blue_bullet.gif) no-repeat left center;
}
[COLOR=Red]**Attached is a screen shot of IE and its stupidity
**[/COLOR]
Can anyone offer up any suggestions to remedy this?
I’m at work on a mac so I can’t check in IE7 right now, however just looking at your code I noticed something.
If I’m not mistaken, type=“1” is deprecated. And I’m assuming that the type attribute was used to determine the way the list is numbered. So, what you might want to try instead is getting rid of the type attribute and trying something like this…
Dunno man it should work. I don’t see anything wrong w/ it. I copied and pasted exactly what you had w/ the exception of not using type = 1 (did it w/ css) and it worked fine
That is quite an interesting bug. I’ve been reading a bit about it since I last posted to you. And from what I have gathered, a lot of people are saying that the width: xx; is what primarily breaks it. However, I found multiple sites that do suggest that display: list-item; will solve the problem. So hopefully it works!
The only problem I can see now is, I wonder if with it being display: list-item;, if you will be able to declare a width and height, or if it will just act like display: inline;
Ok, half way there, now the only problem that remains is the fact that all the numbers are being aligned to the bottom.
New CSS thus far (in blue):
[COLOR=RoyalBlue].container .meat ol
{
margin: 0;
padding: 10px 0 0 20px;
list-style-type: decimal;
}
* html .container .meat ol /* resetting these makes the first item (#1) appear again, but completely zero-ing them out doesnt fix the bottom alignment */
{
margin: 0;
padding: 0 0 0 20px;
}
.container .meat ol li
{
padding: 5px 0 3px 0;
display: list-item;
}
[/COLOR]
.container .meat ol li span
{
font-weight: bold;
padding-right: 5px;
}
.container .meat ol li ul
{
padding: 0 0 0 20px;
margin: 0;
list-style: none;
}
.container .meat ol li ul li
{
padding-left: 10px;
background: url(/help/blue_bullet.gif) no-repeat left center;
border: none;
}
Threads like this make me just that more impatient for IE8. I downloaded the beta and on the site I tested it loaded just as fast as firefox and all the CSS was just fine.
[quote=redelite;2325191]
The only problem I can see now is, I wonder if with it being display: list-item;, if you will be able to declare a width and height, or if it will just act like display: inline;[/quote]
I’ve tried it out, and it seems to be similar to display:block; in that, height and width are accepted, but the numbers are still overweight and lazy, and won’t align to the top of the list-item.
defining a height for the list item or the list is sub-optimal, as this ordered list will be used on more than one page, for more than one purpose
