Accessibility
[an error occurred while processing this directive]

Community Publishing

Created:
2009-07-24
User Level:
Beginner
Products:
Dreamweaver all
RoboHelp all


List indents in Firefox

Ordered and unordered lists have a different indentation in Firefox compared with IE. After some Googling I have now found not only a solution but also the cause.

In this thread http://bytes.com/groups/html/433256-ul-bigger-indent-firefox I learned that Firefox has a default left padding of 40px for lists. The solution given was to add the following line at the beginning of the CSS to get consistent results across browsers and then add margins to each selector as required.

* {margin: 0; padding: 0;}

That works but it means  that each selector in the CSS then has to have any required margin or padding added specifically. Instead I amended the OL and UL definitions as below and that did the job.

padding: 0px;

It seems that as Firefox has a default padding of 40px in its own CSS. If your CSS does not have a padding definition to override that but does have a margin setting, the two get added together giving the wider indent you see in Firefox. Negate FF's padding in your own CSS and all is well with the world again.

It's that simple. 

________________________________________

Peter Grainge

www.grainge.org

 

 

 

 

 

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License