Peoii’s Place

If there is anything that’s more annoying in the CSS universe, I don’t know what it is. CSS is a very simple tool for the most part that can be used to create some very complex results. However, when it comes to the way that Internet Explorer (IE) handles stylesheets versus every other browser on the planet, there is nothing more annoying.

Lets start off by explaining exactly what causes the biggest of the issues. It has to do with what is refered to as the “box model”. What exactly is a box model? Glad you asked, here’s a brief description that will hopefully make sense to you.

From The Box Model Problem:
A table structure consists of rectangular cells within a rectangle. A CSS “box” can be thought of as a table with only one cell. Such a box can be given borders, transparent margins outside the borders (keeps other boxes away), and transparent padding inside the borders (keeps the content away from the edges of the box). These can be applied to each side of the box separately. Inside the padding is the “content area”, which, you guessed it, holds the content of the box.

If the box has no given dimensions, it is called “fluid” or “liquid.” This means that it horizontally fills the container box surrounding it, and expands vertically to enclose whatever content is within it. For the most part, such fluid boxes are quite reliable.

But let’s say you want to give horizontal and vertical dimensions to the box. Naturally these properties are called “width” and “height.” But what exactly is “width?” After all, there’s the content area, then the padding, the border, and finally the margin on the outside. As it happens, the W3C decided that the width dimension goes from the inside edge of the left padding to the inner edge of the right padding. If there is no padding, the width is measured from the inside edge of the left border to the inner edge of the right border.

So ok, that’s a lot to take in, but what all does it mean? Here’s the simple version: Everything in CSS when it comes down to it is a box. Wheather that box be an image, div, or paragraph it’s still a box. And as a part of every box there are 4 components that make up said box, the margin, padding, border, and content itself. Where IE differs from the standard is that the IE sums up all of those bits to get the full width (or height, but for the sake of example, I’m going to stick with width as the primary measurement) of a box, where the standard says that it should be the content alone that determines the standard. But what are those individual pieces? Good question, so here’s the low down:

Margin:

The amount of space added to pad the box away from all other elements on the page.

Border:

The outter most visable portion of the box.

Padding:

The amount of space added between the border and the content.

Each of those parts wraps entirely around the content, and allows it to be styled to fit within the page. They can either be uniform around the
content, or each side can differ in thickness on any or all of the portions. Ok, now that thats out of the way, on to the CSS that will make up our
box:
.box {
  width: 500px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #000;
}

Ok, so first lets look at the way it’s supposed to be done according to the W3C standardization:

true width = 500 + (20 * 2) + (10 * 2) + (1 * 2) = 562 pixels

Sounds simple enough, 500 pixels for the defined width, twice the margin (left and right), twice the padding (again, left and right), and twice the
border (left and right yet again). This makes it very easy for developers to say “hey, my image is 460 pixels, so I need to set my width field in my
CSS to 460px.” It saves everyone a lot of headaches, but alas, IE thinks differently, lets look how they define it:

true width = 438 + (20 * 2) + (10 * 2) + (1 * 2) = 500 pixels

Whoa! 438? “Where am I getting that?” is probably running thru your mind right now. Well, see, the other parts of the box equal out to 62 pixels, so subtract that from your width value of 500 pixels and you’re left with a content area size of 438. If you’re confused right now as to why they would do that, don’t worry, you’re most certainly not alone. So now you have to add everything up in IE to make sure you have the right width, and it becomes a big annoyance when you’re trying to design something. Why did they do this in the first place? Well, from one view point, it could be more simple, that being that if you go on the width to base everything, you don’t have to remember to take into account the various other bits. However, the standards organization decided that the other method was better, and IE should be made to conform.

So now the question begs to be answered, what can I as a CSS developer do to make IE play nicely with my site? Glad you asked. There are a bunch of solutions that have been given around the internet, but allow me to give my own personal touch on this, and then I’ll link to some of the other methods people have discussed.

The way I do it is based entirely on IE’s lack of support for full CSS standards, so we’ll take that flaw and turn it into our advantage. How? Well it all comes down to a wonderful directive in CSS called “!important”. Any CSS declaration can have a !important on it, and that definition is supposed to take priority over any other declaration in the same class, for instance lets look at the following CSS class:
.box {
  width: 500px !important;
  width: 562px;
  margin: 20px;
  padding: 10px;
  border: 1px solid #000;
}

We’ve declared the width twice, but this really isn’t a problem because any CSS standardized browser will see the !important on the first width and ignore any other width declaration in that class. This comes to our advantage now because IE doesn’t understand the !important directive, so it will simply take the last declaration of width and use that. So in this case, we’d have 2 boxes that show up exactly the same in any browser. IE will read the 562px and use that with it’s funky box model, and the rest of the standardized world will use the 500px rule that is declared as important.

So armed with that idea, you can now actually design IE specific modifications right within your CSS code on any part of any element where you need to tweak things specifically for IE. That’s a pretty powerful idea, and it works really well actually, not to mention it’s a lot more straight forward in my book than some of the other ways of getting around this IE flaw. Below are some links to various resources I have found helpful. By all means read them and they might help you better understand the problem and give you another way to deal with it. Though I think you’ll find that this !important trick is not only very simple, but very expandable to dealing with all of your IE CSS problems.

Resources:

• The Box Model Problem
• Box Model Hack
• Modified SBMH (Simplified Box Model Hack)

Enjoy.