Please note that you may have been redirected (you might like to make a note of the URL in the address bar of your browser and update accordingly) This is a permanent archvie but is no longer actively maintained. Please visit http://joshuaink.com for the latest updates.
3 column floated layouts, the IE5 Edition
Monday March 7, 2005
When writing the 3 Column Layout tutorial I did not support Internet Explorer 5 on the Mac or PC. I am not going to provide examples this time, just a brief look at what the problems were and how I fixed them.
Windows XP IE5
If you downloaded the sample files to follow along at home, you may have been surprised to find that the floated layouts did actually work. What didn't work were the example pages I provided and this was caused by the 1 pixel dashed border showing the #wrap layer. There is no hack needed on this occasion, for a working page, simply remove the border.
If you did want a border of 1 pixel around the #wrap, you may need to increase it's width by two pixels and to achieve this we might use the modified simplified box model hack, adding the following:
- #wrap{
- border:1px dashed #CCC;
- width:770px;
- margin:0 auto;
- text-align:left;
- }
- * html #wrap{
- width: 772px; /* total width (only for IE5.x/Win) */
- w\idth: 770px; /* content width (for other IE) */
- }
Mac OS X IE5.2
None of the tutorials or the follow along demo pages worked on this browser, at all. Doh!
The solution
Through trial and error, more than a deep understanding of bugs in version five, I came to the conclusion that it was suffering from the infamous 3 pixel jog bug, though why this should be the case, I can only hazard a guess that it has something to do with the #wrap div not being floated. Anyway, it can be fixed as follows (the fix shown is for this original example):
- /* IE5 Mac fix */
- * html > #main-content{
- margin-right:-3px;
- }
The above hack is supposed to only target IE5 on a Mac and it is called the ie5macbandpass filter and Tan hack, more information on which can be found here. What I found, on my set up at least, is that it seems to target IE5 PC also, but not IE5.5 PC. Also note that the exact example above will not work for every demo page on the original tutorial but the principal can be applied to fix all of them, you just need to work out what value and to which div the hack should be applied to.
Hacks are just too much fun, Bon Apetit.
Update
You might also like to read this hack free tutorial over at King Cosmonaut.
matthijs
1832 days ago
Anton
1832 days ago
Tom
1832 days ago
Philippe
1811 days ago