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


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


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


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.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »