Arman's stuff
IE vs Just About Everyone Else

(Wed Oct 7 09:33:49 2009)

There are a few things in IE that are just... wrong. Firefox, Opera, even Safari work well, but IE?

Not a chance.

Here's a prime example. Say you have a div. Your div has padding around it, and a border around that, and margin around that:
<div style="margin:15px;border:10px solid #000000;padding:5px;">stuff</div>
Margin = 15px on each side.
Border = 2px on each side.
Padding = 5px on each side.
Div = 100px wide, 50px high.

Looking at this box in anything-but-IE, the total width of everything box-related is 144 pixels.
Looking at this box in IE, the total width of everything box-related is... 130 pixels.
That's a difference of 14 pixels! Suddenly, things are overlapping, text is overflowing, and everything is just plain wrong. WHY? Oh, for the love of AJAX, WHY!?!

The answer? Simple. Everyone but IE draws the margin, the border, the padding, and then the div. The widths are not related; increasing the border will make the space taken up by the div bigger, instead of making the div smaller.
IE, however, draws a big box with nothing but margin outside, and then sticks the padding and borders inside.
At first glance, this might make sense, but think about it this way. Say you have an image that is 100x50 pixels. You stick that image in a div, and give the div a width of 100, and a height of 50. Easy! But suddenly, you want to add borders and padding to this image-containing div. So, you do. Now your div has an image inside, and borders and padding outside. Still easy!... unless you use IE, in which case the box is now too small, because your borders and padding are INSIDE the box. Now, you need a box that is 100+border thickness+padding width.
which is easier? "100+border thickness+padding width", or "100"?

This is why I don't like IE. Little things like this can make the most awesome website in the world look terrible.

<< More mobile stuffBoxes >>

This blag is tagged: Browsers, Css, Firefox, Ie, Opera, Standards, All