11/4/09

How to Create Vertical Spacing Between Lists Using HTML LI Tag & CSS

This is how to create vertical spacing between lists using the HTML <li> tag and CSS. I've kept in mind to keep the code in compliance to XHTML Strict validation with W3C standards. I validate to the Strict standards strictly to Search Engine Optimize the page. Here is a sample of an unordered list code in plain HTML:


<ul> <li>list item 1</li> <li>list item 2</li> <li> <ul> <li>item 2 sub-list 1</li> <li>item 2 sub-list 2</li> </ul>
</li>

<li>List item 3</li>
</ul>

The above HTML code is rendered in Mozilla browser (i.e. Firefox 3.x and greater), IE 7.x and greater and Safari 3.2 and greater on my Vista Home Premium as follows;however, please note the <li> html tags that are surrounding the inner <ul> tags. This is required for W3C strict validation;otherwise, you'll receive errors. Now to create vertical spacing between the HTML li tags all you need is some CSS styling using margin-bottom like so: <ul> <li>list item 1</li> <li>list item 2</li> <li> <ul> <li>item 2 sub-list 1</li> <li>item 2 sub-list 2</li> </ul>
</li>
<li>List item 3</li>
</ul>

The only bug I encounterd was with Internet Explorer 7.x and greater is the second UL tag didn't properly have the vertical spacing. So to resolve this bug in IE simply add margin-top to the second UL tag as so:

<ul> <li>list item 1</li> <li>list item 2</li> <li> <ul> <li>item 2 sub-list 1</li> <li>item 2 sub-list 2</li> </ul>
</li>
<li>List item 3</li>
</ul>

Oddly enough, there was no extra spacing with Firefox 3.x and greater and Safari 3.2 and greater with this last bit of code. In other words, margin-top:10px didn't have any effect with Firefox and Safari. To place CSS styling attributes and apply it only to Internet Explorer all you need to do is use the following code in your <head> tags:
Objavio Miho at 2:32 AM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)