The context: You’re designing a multi-column layout with CSS using float. The frustration: There is a mysterious, tiny gap between columns or content when viewed in Internet Expolorer for Windows, versions 5 and 6. You try everything. Nothing works.
Upon further investigation, you find that the mysterious number of pixels added is exactly “3″. There is hope.
If you hadn’t already found it, Holly Bergevin and Big John not only document this bug (thank you, thank you), but also offer a workaround. (One that I’ve had mixed results with. Sometimes works like a charm–other times, when more complex styles are added, the gap still remains an issue. But just knowing of the problem can at least offer some solace.)
Over the past year or so, I’ve run into this problem numerous times, luckily stumbling onto the aforementioned writeup at just the right time. For those first trying to discover what’s causing it–it can be nightmarish and impossible to try and solve. So, spreading the word on this bug can only be beneficial.
If you’re struggling with tiny gaps or seemingly inconsistent width and spacing issues in IE/Win only–be sure to read about this one. Even if the problem turns out to be something else, the 3px gap could easily be the culprit in the future.
3 Pixels of Frustration
Dribbble What are you working on? 
Instapaper Icon design 
Sass For Web Designers Paperback + eBook A Book Apart
CSS3 For Web Designers Paperback + eBook A Book Apart
Bulletproof Web Design Third Edition New Riders 
Handcrafted CSS Book and DVD New Riders 
Web Standards Solutions Special Edition Friends of Ed
23 Comments
Dan, I already had experienced this problem! I hate how IE works!
I usually run into this problem when I have a list that “straddles” the bottom of the floated box. The top half of the list is 3 pixels farther to the right than the bottom half.
It only seems to affect floats without a height applied to them.
Just setting a height on the floated div to 1% usually fixes it for me.
Jeremy – That’s exactly the situation I first discovered this as well–a list that was indented by 3 pixels until it “cleared” the floated box that sat on its left. The P.I.E. fix worked perfectly for this, as it hides the
height: 1%;from IE/Mac.I seem to have this problem with the input elements on my home page, I’ll have to take a look at this. Thanks for pointing this out.
Ah yes, the crappiest bug in the world. Here is what I’ve done to get around it:
1. The easiest way: If you’re just trying to do a multicolumn layout with two floats that are touching, float both the divs left or right instead of just floating one and the problem goes away. The only downside to this is that you obviously have to give widths to both divs, but you’re probably going to do that anyway.
2. Whether using the above method or not, I highly recommend using the easy-clearing hack to clear your container element without any of those pesky clearing-divs. I’m working on a 3-deep nested float site redesign right now and once you get that deep, even clearing-divs won’t clear your stuff in Mozilla/Firefox. This hack conquers all, however.
3. I’ll again throw my vote towards using absolute positioning for multi-column layouts. I am still at the point where I’m using one or the other depending on the project, but as methods like Shaun’s get better and better, I find myself more and more likely to relegate floats to only what they were meant to do: shove inline elements off of the side. Shaun’s solution requires JS or course, but it degrades nicely without it. If your audience is 98% javascript-enabled, it could be the solution for you.
The 3 pixel jog was one of the reasons I embraced absolute positioning so passionately when I first got into CSS in a big way, but nowadays I am comfortable with floats too.
I do so hate using hacks, however, so I prefer to do things to get around them. I prefer to see more markup than hacks, actually.
Mike – Excellent tips. The float right and left trick worked great for me recently as well. Like you said, as long as you’re specifying widths, this is an easy way around it.
I too, would love to use positioning exclusively. We’re getting closer with methods such as Shaun’s.
Know what’s funny, I have never had this problem occur for me. I use floated layouts all the time, my own layout is using floats. Thanks for the tip if it ever comes in need.
*bookmarks*
Hmm… I usually stick in an XML prolog to throw IE 6 into the buggy IE 5 rendering mode, then proceed to correct these pixel inaccuracies in a style sheet that gets served only to IE. This is done at the very end once the design is finalized in more correct browsers first. I usually end up readjusting everything by 3 pixels. I also try to avoid layouts that require pixel perfect alignment so that IE doesn’t cause quite as many headaches.
I’ve run into this nasty little bug many a time. It wasn’t till I looked at Doug’s CSS that I leaned of the 3pixel hack.
This hack would have saved me afew days work! to late now tho :(
Gosh, thanks so much for mentioning this bug. Just about every time I do a tight layout with floats, I observe this bug when it causes one column to display underneath another column. I’ve just been slightly narrowing my center column to allow for some room in my layout as a workaround, basically just giving in to the bug, but these resources are helpful.
Thanks to everyone that found this. This used to be a huge problem and although now it’s not a full proof fix persay, it’s an exelent approach.
Wow, and here I thought that I was the first guy to find this because I couldn’t find it documented anywhere. I was finishing up my blog just so that my first post would be documenting this bug.
I always knew something was fishy on IE when my margin widths had to be extended a few pixels for it to work, but I never had to worry about such tight tolerances until a recent design I had to code. I brought it down to the 2 divs, one floated to the left, the other with the proper margin. I eventually found that floating both to the left worked the best for me.
But here’s my quandry – almost everything I have done in my CSS has been a float. So much so that I wonder if there’s something that says, “This is too much. Can’t you find a better way?” Don’t know if anyone else has had this feeling… Anyway, thanks for bringing this up, Dan!
Heh, yes, the most notorious bug in IE to stop people using floats. Luckily, I found the Holly & John hack on my first layout with CSS + XHTML, so I was lucky.
And the question remains (as with every tiny bit of Internet Explorer): why?!
IE makes me want to commit violent crimes on a daily basis. sometimes, i think it would be easier to just wipe out everyone who doesn’t use a proper browser.
Phil: I’m with you on that one. I sat here all day yesterday working trying to get my sidebar to toggle on and off just with a stylesheet switcher. IE would not display the absolute positioned div with the buttons and I forgot my solution to it. I think for about half a second, I actually made a plot to destroy the Microsoft Corporation.
On topic: I have the 3px problem. But my div has no backgrounds or borders, so it isn’t noticable unless you use a Bookmarklet.
I do pretty much everything with floats, so I’ve run into this, oh about a million times.
Not just with the infamous 3-pixel gap, but in just about every situation IE stalls production, and you’re not in the mood for endless bug tracking, that IE Win only hack is godsend.
Spread the word on the * html hack. God knows the world would be a safer place to use floats in if everyone knew it.
Thank you, really. I noticed this bug a couple of weeks ago! Now I’ll try a workaround sure that I don’t allucinate…
I recently found that the 3px jog became 4px in Win 2000 with the OS font size set to 140%. At 200%, it becomes a 5px jog. Anyone else see this?
I came accross this bug in my first ever css layout about a year ago. After taking a screen shot in WinIE I measured the 3px on the left and right of floated block level elements and came up with my own hack.
/* Hide form MacIE \*/
* html div#mydiv {
margin: 0 -3px;
}/* End hiding */
I searched google for ages looking for an answer and found nothing. At last someone has brought to light the 3px bug.
I tried assigning heights of 1% to everything on the page and still it wouldn’t do it. It wasn’t until I found the comment above to float the left object to the left that I found a fix that worked. I just used the underscore hack: #leftFloat {_float: left;}
and made sure to clear my floats with clear divs at the end. I tried the :after, etc. method of clearing and had trouble with it, so it’s back to div style=”clear:both;” for now.
Muchas gracias for the double float technique! Works a treat.