| This is how to create vertical spacing between lists | | | | - list item 1 |
| using the HTMLtag and CSS. I've kept in mind to | | | | - list item 2 |
| keep the code in compliance to XHTML Strict | | | | - item 2 sub-list 1 |
| validation with W3C standards. I validate to the Strict | | | | - item 2 sub-list 2 |
| standards strictly to Search Engine Optimize the | | | | List item 3 |
| page. Here is a sample of an unordered list code in | | | | The only bug I encounterd was with Internet |
| plain HTML: | | | | Explorer 7.x and greater is the second UL tag didn't |
| - list item 1 | | | | properly have the vertical spacing. So to resolve this |
| - list item 2 | | | | bug in IE simply add margin-top to the second UL tag |
| - item 2 sub-list 1 | | | | as so: |
| - item 2 sub-list 2 | | | | - list item 1 |
| List item 3 | | | | - list item 2 |
| The above HTML code is rendered in Mozilla browser | | | | - item 2 sub-list 1 |
| (i.e. Firefox 3.x and greater), IE 7.x and greater and | | | | - item 2 sub-list 2 |
| Safari 3.2 and greater on my Vista Home Premium as | | | | List item 3 |
| follows;however, please note thehtml tags that are | | | | Oddly enough, there was no extra spacing with |
| surrounding the innertags. This is required for W3C | | | | Firefox 3.x and greater and Safari 3.2 and greater |
| strict validation;otherwise, you'll receive errors. Now | | | | with this last bit of code. In other words, |
| to create vertical spacing between the HTML li tags | | | | margin-top:10px didn't have any effect with Firefox |
| all you need is some CSS styling using margin-bottom | | | | and Safari. |
| like so: | | | | |