Why are my ul and ol lists not displaying properly in IE7?

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

Answer 1

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.

Answer 2

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...

Answer 3

This is because the ul/li elements have inherited the zero-margin property.

Answer 4

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.

Answer 5

joshua your code worked with some slight modifications, thanks