Web Design Blog
Popular Posts
- Fonts on the web and a list of web safe fonts
- CSS Hack:Getting Safari to behave
- Top 10 search engine optimization techniques
- Test IE5 or IE6 on your PC with IE7 installed
- Top 10 job boards for freelance web designers
- CSS Trick: Target only IE with an if statement
- Creating a photo gallery in CSS without tables
- Open source Dreamweaver alternatives
- 8 job boards, for freelance web designers, that don't suck
- CSS fix for the double margin float bug in IE6
Categories
CSS fix for the double margin float bug in IE6
Posted on Tuesday, June 17th, 2008 under CSS, XHTML by Dustin Brewer.There are several well known bugs that affect only Internet Explorer 6 that can wreak havoc on your websites. One of the most annoying is the double margin float bug in IE6, simply if you float a block level element to the left it will double the margin you have applied to the element and most of the time break your site entirely in a strange way.
This first image is how you wanted the site to look.
This image is the site broken.
When you typically see something broken like this in IE6 it is the double margin bug that is to blame. One of the easiest ways to fix it is to simply not use margin on the same direction as you are floating the object. This can be a little tricky to get the hang of though. For instance, when you have your two floated columns inside of a container you can add padding to that container in order to avoid using margin.
If you are looking for a quick fix to this problem you can always use the IE6 if statement to target IE6 specifically and half the margin being used in your floated objects.
Just keep in mind that it is not all floated objects that get double margin in IE6. Internet Explorer 6 will only apply double margin when you are using margin on the same side of the object as you are floating it. Either way, it is important to be aware of these bugs in IE, unfortunately there is still a large portion of the population still using IE6. As of April 2008, 24% are using IE7 and 28.9% are using IE6.
Whats Next?
17 Responses to “CSS fix for the double margin float bug in IE6”
Leave a Reply
About Dustin Brewer
Dustin Brewer is a freelance web designer based out of Oklahoma City, OK passionate about web standards, and beautiful web design. Dustin Brewer has been in the web design industry for over 8 years through freelance and professional experience. If you are interested in hiring Dustin Brewer please visit the web design services page to find out more information. You can also checkout the web design portfolio.
There is actually a very easy way of fixing this, just add “display:inline;” to the floating objects and it will fix the problem. No need for IE6 if statements or secondary stylesheets.
Adding display:inline to divs you are floating can have unexpected results, especially when it comes to crossbrowser compatibility.
The other problem with using display: inline is that it is essentially a hack that only applies to IE6. You don’t want to create those in your main stylesheet and if you are going to the trouble of specifying IE6 only you might as well correct the margin to be half.
What I usually do is to replace the margin-right:20px; with position:relative;right:20px;
Vasilis your tip worked for me, thanks!
You can also just set a different margin for IE6 browser:-
/* IE6 Only */
* html #rightcolumn{
margin-left: 20px;
}
By editting the CSS with what bigtime said worked for me.
I had a problem with the margin in IE6. It worked fine in IE7 and firefox:
.xml_blok
{padding:10px 0px;
margin:10px 10px 10px 18px;
text-align:center;
width:220px;
height:300px;
border:none;
background-image: url(../images/borderkantoormachines.gif);
background-repeat:no-repeat;
float:left;}
So I included this:
/* IE6 Only */
* html .xml_blok
{padding:10px 0px;
margin:10px 10px 10px 10px;
text-align:center;
width:220px;
height:300px;
border:none;
background-image: url(../images/borderkantoormachines.gif);
background-repeat:no-repeat;
float:left;}
Thanxs for your help
[...] Visit Article [...]
finally found what I sought! thx for this fix!
regards,
AM
omg finally
bigtime thank you! i’ve been looking for a solution and yours works for me.
I was under the impression that floated elements are treated as display:block regardless of what you specify in your stylesheet. Don’t other browsers simply ignore display:inline and treat the float as a block?
I’ve used this approach for a few years now and haven’t seen any drawbacks. Which browsers produce unexpected results?
Thanks Dustin
Found an issue with a web and IE6, your info rapidily fixed the issue.
Phil
This all ties into a specific internal value in IE6 called hasLayout… which, in the era of lolcats and I Can Has Cheezburger, is absolutely delicious. I personally leave a comment in my IE6 stylesheet that says, “IE6 can hasLayout.”
Can you give any example where “display:inline;” causes problems in different browsers?
@M
Using display:inline is cross-browser friendly. Floated elements are treated as block-level by all browsers and specifying something like:
div
{
display:inline; /* cancel IE double margin bug */
float:left;
margin-left:20px;
}
…should work fine in all browsers.
you can find a good answer to your dilemma here: http://www.webmasterworld.com/forum83/7301.htm
[...] CSS fix for the double margin float bug in IE6 [...]
Instead of using display:inline or if statement there is an easier and safer solution: using this simple js bug fix http://www.programmatorephp.it/jquery/ie6-double-margin-hack.php
Other solutions have some side effects.