Default List Design using CSS (UL/OL/LI)

Designing List using CSS is not a big thing. Generally I need to use few lines for simple setting of List (<li>). One things that creates problem every time is IE6 and IE7. I always see by surprise why why so much padding/margin IE6 and IE7 getting whereas IE8 and Firefox can render it properly.

My generally used design (these days) for List (<li>) is something like this:

#postlist {<strong> </strong>padding:0;padding-top:5px;}
postlist li {padding:0;list-style-type:none;padding-bottom:10px}

The real default CSS depends on what kind of project you are working. So, your default design for list can totally defer from the above CSS. The above code will produce list like this in Firefox and IE 8:

I have added border in the image, to make the margin and padding clearly visible.

HTML used in above output is this:

<ul id="postlist"> Top Posts In 90 Days
<li><a href="">Eclipse Error - Failed to load the JNI shared library "C:Program Files (x86)Javajre6binclientjvm.dll"</a></li>
<li><a href="">JavaScript: Dynamically Attach Event Handler to any HTML Element</a></li>
<li><a href="">Google Font API: Fonts Viewer - Preview all available Fonts in Google Directory</a></li>
<li><a href="">Wordpress 3.0 Benefits: Custom Fields</a></li>
<li><a href="">Google Font API: Why it exists and How it is useful!</a></li>

The same code in IE6 and IE7 will produce output like this:

So, what I need to do is add an extra margin or margin-left property for <UL>/<OL>. Then the CSS code will look like this:

#postlist {margin:0px;padding:0;padding-top:5px;}
#postlist li {padding:0;list-style-type:none;padding-bottom:10px}

Now, it will looks same in Old Internet Explorer also.

Comments are open for an year period. Please, write here on Facebook page.