[an error occurred while processing this directive]

Community Publishing

User Level:
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 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






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