A simple solution to override the double margin issues when developing for Firefox and Internet Explorer (tested in 7.0).
First, I do not stake claim to this discover, I did a lot of research online and tried many different “fixes” that were posted on the web. This is the only one that worked for my situation.
This applies to a 3 column, fixed-width, template in wordpress. The custom design called for a zero margin left sidebar 200px wide, a center column 500 px wide and a zero margin right column 200px wide.
Here is the code, and below is the explanation:
#content{
float: left;
width: 490px;
min-height: 300px;
margin-left: -10px;
margin-right: -10px;
padding: 0;
display: inline;
text-align: left;
}
html>body #content{
float: left;
width: 490px;
min-height: 300px;
margin-left: 5px;
margin-right: 5px;
padding: 0;
display: inline;
text-align: left;
}
Using the html>body to duplicate the CSS entry, I was able to create two different CSS results. IE ignores the html>body CSS entry and goes to the top entry. FF reads the bottom entry first. Note that in the bottom entry, I called for exact margin spacing since FF doesn’t double margins used with the “float” option. In the top entry, I used negative left and right margins to overcome the doubling that IE creates using the “float” option.
The site is not live at the moment, but when it is, I’ll add the link so you can review this code in action.
