YASB – Yet Another Symfony Blog

January 24, 2007

Fixing the column problem in IE6

Filed under: General, HTML, IE, Tips and tricks — Krof Drakula @ 1:31 pm

I’ve just stumbled upon a bug in IE6 that doesn’t manifest itself in IE7, and it has to do with floated elements.

I’ve used 4 floated columns to display 4 independent DIVs and floated them all left within a container DIV element. During development, I’ve been changing widths of the columns to get them aligned just right with the background images. All modern browsers (including Opera, Firefox and IE7) displayed all the columns fine. Except for IE6.

There seems to be a bug regarding floated elements and containing DIVs in IE6, coupled with the fact that it computes widths of elements wrongly. Of course, I couldn’t really pinpoint the problem, since the numbers seemed to add up correctly, even shortening the width of the last element didn’t seem to work, since I had some images that were sticking out from the right border due to the decreased width of the column.

The result? IE6 took the widest child element and considered it the width of the parent, while all the others simply took the width of the parent as the de-facto width of the floated div element.

I only identified the problem 2 hours later when I found this article. It suggested using style="overflow: auto" to float-containing DIVs to make the container actually encompass the elements.

In my case, this opened up a way for me to identify the problem – when you have fixed widths on container elements, setting this to auto will bring up scrollbars on the container, which is a sure fire way of identifying whether or not the container is actually the correct width to contain all of the floats within. The solution to my problem was just to increase the width, which apparently solved all of the positioning problems. As far as I know.

Sorry, don’t have a sketch or example code, but will update to illustrate the point.

UPDATE: I’ve decided to add links to this post to make references easier to find:

2 Comments

  1. this is a known bug with the IE box model i think youll find if you apply a -3px margin to the float direction (if float: left; then margin-left: -3 px) youll find youve solved it. Also watch comments in your html around floats… it can cause issues as well. Most of this is well documented at positioniseverything.net and quirksmode.org.

    Comment by pixelslut — January 24, 2007 @ 2:40 pm

  2. I have read your post and you have find right bug

    Comment by Best Web Redesign Company — July 27, 2009 @ 12:31 pm

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress