Removing indents from lists in CSS is a common problem encountered by a lot of web developers particularly when starting out. Removing the list style from a list often leaves us with an indent that can be rather annoying to remove and when removed in one browser it may not necessarily remove it from another. This is because some browsers use a default value margin or padding to indent list items and this is not removed by the list style none property. Some browsers use padding some use margins to produce this indent which is where most people run into problems.
The following solution works for both unordered lists <UL> and ordered lists <OL> in all browsers.
Simple Solution to Removing Indents from Lists in CSS
The simple solution to the problem is to set both the padding and the margin to 0 for the UL tag. This will garantee all browser will display it correctly. so our UL tag would look like this:
#verticalmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
This unfortunately will mean that our list will sit hard against the edge of our menu div. This causes unwanted tension on our menu so the counter it we need to add some padding to the div containing it (in this case the #verticalmenu div).
Why not just apply it to the UL tag? Simply put if we want a sub list to still indent from our upper level lists we start to lose some control over our positioning. If we were to apply it in the above code what ever margin we gave the UL tag doubles when it makes it to the nested list.
How do we fix it? We add any indent we want to our nested lists in its respective UL tag.
#verticalmenu ul li ul {
padding-right: 10px;
padding-left: 15px;
}By adding our padding in here only the listed item is effected.
By using only the code for the top level UL tags and controlling any indents you do want through the controlling DIV we remove all indents from our lists and keep our control over its styling. By using both sections of CSS we can control the indents of nested lists.
Hope this helps you all in fixing a rather frustrating problem. A solution that works for all browsers.
For more information check out my article on Reseting CSS
