Tutorial :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


Solution:1

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.


Solution:2

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


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


Solution:4

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
Previous
Next Post »