IE 6 Double Margin Fix
June 29, 2009
I hear a lot of talk on Twitter and the bloggosphere about rendering issues in IE6 * and in my experience the most common one is the double margin problem.
Let’s say, for example, you have a container div with a width of 900 pixels:
#container {
width: 900px;
}
Then you have two inner divs which go side by side, like so:
#lnav {
width: 126px;
padding-right: 12px;
padding-left: 12px;
float: left;
}
#maincontent {
width: 670px;
padding-right: 45px;
margin-left: 35px;
float: left;
}
This will display fine in most browsers but for IE 6 you need to add ‘display:inline‘ :
#maincontent {
width: 670px;
padding-right: 45px;
margin-left: 35px;
float: left;
display: inline:
}
Simple! I don’t know why or how this works, but it does. If you have more nested divs, try adding the ‘display: inline’ to these as well and keep checking in IE6 until it looks right.
Once you have your general layout displaying correctly, your battle with IE6, in my opinion, is mostly over. When it comes to dropdown menus and AJAX * scripts, these are more difficult to get right across all browsers, especially if you are using browser shots to see how your page is rendering and not actually testing in all browsers.
As a general rule, it is safe to assume that your scripts will not work in all browsers, so as well as using scripts that degrade well in older browsers, it is good practise to provide an alternative text-only version.
Filed under: How to, Web Design | Comments (0)
