Wednesday, August 29, 2007

IE rounds everything up it seems

Look at this HTML/CSS

<DIV STYLE="width:100px;height:50px">
<DIV STYLE="float:left;width:50%;height:100%;background:#AACCEE;overflow:hidden">This is the first one of those divs</DIV>
<DIV STYLE="float:left;width:50%;height:100%;background:#EECCAA;overflow:hidden">And then the second one</DIV>
</DIV>


Now, what does this look like in FF?



And in IE?



Well, it looks about right in IE. At least it respects the outside DIV's width but not it's height (instead of being 50px it stretches to 95px). But that's not my point.

Now let's look at the same code, but instead of having a 100 pixels width, we'll have a 101 pixel width:

<DIV STYLE="width:101px;height:50px">
<DIV STYLE="float:left;width:50%;height:100%;background:#AACCEE;overflow:hidden">This is the first one of those divs</DIV>
<DIV STYLE="float:left;width:50%;height:100%;background:#EECCAA;overflow:hidden">And then the second one</DIV>
</DIV>

Now, let's look at FF:



Well, that looks pretty much the same as with 100 pixels, except that it's taking about 1 extra pixel, with the second (right-hand) div taking home the extra pixel.

Now this is where I'm getting at. Look at this behavior of IE:



What the? The outer div has stretched to 51x352 pixels... See here that both inner divs have a width of 51 pixels. My guess? IE renders each one of them individually and round up the pixel value so that they both are 51 pixel wide, which mean that they don't fit in the same row inside 101 pixels, so they have to take 2 rows.

If you want to see it more clearly, you can add in "border:1px solid;" just after the "STYLE=" in the outer div, you'll see even more clearly what I mean.


Have fun!

1 comment:

Bruno M-A said...

Hey, that might be just about right.

My personal note on this is that if you want a cross-browser solution, never use divs. They are evil. VERY evil. They will eat your brain.