Why are my ul and ol lists not displaying properly in IE7?
-
10-07-2019 - |
Question
Something seems to be breaking the display of lists (ul
and ol
) in IE7. They work fine in IE8, FF, Safari etc but not IE7 and IE6.
I just want them to be displayed normally: ul
lists should show bullet points and ol
lists should show numbers.
I've narrowed it down to the first 1000 lines of code in styles_layout.css
... ;)
Actually, I believe it has something to do with the following styles:
* { margin: 0; }
html, body { height: 100%; }
.wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -39px;
}
Have a look here: http://www.olvarwood.com.au/olvarwoodonline/mod/forum/discuss.php?d=2, login as a guest
Solution 3
I solved it myself through trial and error:
* {
margin: 0;
}
This stops Ol's and Ul's from displaying properly in IE7 and IE6. I have no idea why...
OTHER TIPS
IE7 and below style ul elements like this:
ul {
margin-left: 40px
}
Good browsers style ul elements like this:
ul {
padding-left: 40px
}
It's better explained by Eric Meyer here: https://developer.mozilla.org/en/Consistent_List_Indentation and the section "Finding Consistency" will tell you what you do.
This is because the ul/li elements have inherited the zero-margin property.
I won't even pretend to be an expert on css, I get my butt kicked by it all the time, but I just happened to run into this, although my situation was a bit different.
I ended up having to specify a class tied to ul and set the list-type.
.classname ul { list-style disc inside }
Try that and see if it helps.