This isn't so much a tutorial as it is a compilation of solutions to get around the box model problem in Internet Explorer 5. The box model for that browser is different than most other browsers, so some special coding needs to occur. Here are some solutions I found -- beware, the level of this information may be more advanced than many of our other tutorials, but hopefully it will help you understand the topic better and make it come into focus.
Later renderings of browsers (Internet Explorer 6, Opera 6 and up, Netscape/Mozilla 7 and up, FireFox/Firebird permit you to define virtual boxes on a page. You create divisions (using the div html tag) and control the size and placement of those boxes using a cascading style sheet (or css as it is commonly called). By aligning those divisions you can get a pretty good page layout controlled free of tables which many used in earlier times. Tables after all, were never meant for page layout. The beauty of a good CSS page is that you have flexibility to overlay a different cascading style sheet at a different time allowing skinable sites, devices that are less visual will render them much cleaner, etc. So the thought of controlling page layout through css sounded good to many.
A significant problem exists for designers who try to use CSS to force a particular page display, however. Internet Explorer 5.x is, as of this writing in November of 2003, still commanding upwards of 10% of the hits to many sites. It uses a funny rendition of the box that makes it different than all other current browsers. Netscape 4.x is the other odd browser out there, but it has dwindled rapidly in use. While I think the appearance of FireFox (formerly Firebird), a bright new star of browsers, is likely to put a dent in browser percentages, I think IE 5 will hang on for another year in significant enough proportions to make it worth crafting around.
The box model works on this theory:
create a box and define properties that may include,
For most browsers, the box model says that if you set the width of the box to 200 pixels, border to 25 pixels (right and left) and margins of 20 pixels (right and left), the resulting box will then occupy a width of 200 + 25 + 25 + 20 + 20 = 290 pixels. I'll call this total space taken the "entire box". I'll call the portion of the box defined by the width the "content box" to distinguish it from the entire box that also includes the border and margin. So for most browsers the borders and margins are additive to the content box, expanding the screen the entire box will occupy.
While most current browsers use an additive box model, Internet Explorer 5, on the other hand, uses subtractive box model theory. This means that with IE5, it takes the borders and margins out of the content box. So in the example used above, IE5 would calculate the box thus: 200 - 25 - 25 - 20 - 20 = 110 pixels for the resulting content box, even though width was set to 200 pixels. Assuming you put content in the box, in cannot be wider than 110 pixels without causing problems. The entire box is 200 pixels wide in IE5.
Internet Explorer 5 (where: - is the box width; m is the margin; b is the border; c is the content box):
---------------- mmbbbccccccbbbmm ----------------
All Other Box Model Browsers (where: - is the box width; m is the margin; b is the border; c is the content box):
----------------
mmbbbccccccccccccccccbbbmm
----------------
On a recent page I made, the margins were so wide that there was no content box left so it rendered each word of the text on a separate line. It looked odd and scrolled down the page forever. Seeing this defect in the IE5 box model is made more difficult because most people have dumped IE5 and now run Internet Explorer 6. You can only run two versions of Internet Explorer if you dual boot two copies of your operating system(s), or use two computers. (** I recently saw that someone had come up with a way to run two versions of internet explorer side-by-side without a dual boot by modifying a few files in Internet Explorer -- but have not tried it myself). I had to use an older computer to test my pages when I was playing with this. In fact, I ran a copy of Netscape 7, Opera 6.0 and 6.5, Firebird and Internet Explorer 5 and 6 between the two machines. Each time I made a change I checked it in all six browsers. Now that I have a better understanding I would probably confine my "as-I-go" testing to IE 5 and 6, plus Firebird.
I found numerous and voluminous writings on this issue, but they were tough to get one's head around at first. Here is my best effort to make this understandable and to pull together some of the various sources.
That wasn't really the primary purpose of CSS anyway, it is meant to control the structure of the web document, not the form of it. Well that is really simple eh? But if you have any desire to actually control layout, and you do, then this isn't your solution.
If you have a content box with a width of 100 pixels and want to have a margin of 25 pixels right and left, then your entire box would be 150 pixels. The content within the box, say a paragraph of text, would fill the content box and there would be 25 empty pixels to the right and left of that. Of course you might choose to fill the empty pixels with color or a background image etc., but they are empty in that they don't contain the content of the box. In IE5, the result using margin would be 100 - 25 - 25 = 50 pixels for the content box and 100 pixels for the entire box. By contrast, in all others the box would be 100 + 25 + 25 = 150 pixels for the entire box and 100 pixels for the content box.
Instead of using the margin on the parent element, the box, use it on the content, the paragraph tag. Set the paragraph with left and right margins of 25 and you get exactly the same result in most instances. This will solve the problem in many cases.
There is more on this thought here: http://www.webmasterworld.com/forum83/204.htm (registration required to view article - or find it using the WebMasterWorlds site search function with the term "forum83/204.htm" and it bypasses registration -- but we of course encourage you to register or donate if you find that site helpful or informative).
There are two reasons why I might elect not to use this method:
In my case, however, I am also using the margins of the box to set the background colors for the adjoining columns, so this solutions won't cover the issue I wish to solve. It is this third problem that causes me to keep looking.
Another workable solution is to add another box with the margin and border properties and within that box place another box (I assumed a long time ago you know what I mean by a box ... as they are simply div tags with CSS defined properties). My main complaint about this solution is that it adds additional coding which will still be present long after IE5 has bit the dust. It does work, and might look something like this:
<div style='padding: 25px;'> <div style='width: 300px;'> Content content content... <div> </div>
There is information on this here: http://www.webmasterworld.com/forum83/652.htm
I might have used this had I found and understood it early on, but probably not because of the code bloat it would cause in my opinion.
You can use a different stylesheet for Internet Explorer only by using some conditional code which is proprietary to Internet Explorer. There is no strong reason I can think of to not use this, other than being too proud to use something designed by MicroSoft to fix a problem created by Microsoft ... but I didn't come accross it early enough to use it in my case. Use our contact form to tell me why I am wrong about this one. The code might look something like this:
<link rel='stylesheet' href='css/basic.css' type='text/css'>
<!--[if IE 5]>
<link rel='stylesheet' href='css/ie5.css' type='text/css'>
<![endif]-->
IE5 will read the code out of the comments and add the IE5 stylesheet. to the page. Chris Najman has been nice enough to write a
contributor tutorial on this method.
You can also find more information about it here: http://www.webmasterworld.com/forum83/652.htm.
Well both because I found it late, and because I am too proud to use it, this was not the solution I used.
Probably the best documented way to get around the poor box model in Internet Explorer 5 is to use something commonly known as the box model hack. This method takes advantage of a "defect" in ie 5 and 6 which allows you to terminate a cascading style sheet. The technique was first explained by Tantek Celik. The hack is explained by Celik in an example that will display differently depending on whether you use IE 5 or 6. His color display bars shows what the width of the box will be when you use additive or subtractive box models, so you can get an understanding no matter which of the browsers you are using.
The primary theory involved here is that IE, both 5 and 6, will prematurely break from a CSS definition when they encounter this string: "\"}\""; Other browsers will continue on to the next line in the style, but not IE. You then serve up a second rule which will be interpreted only by IE browsers and you are off to the races. A funny thing happens however because while both IE's will stop the first style on the parse of "\"}\"";, you need to still define the box model as additive for IE 6 and subtractive for IE5 in your special IE style. It basically looks like this then in pseudocode:
I am sure I could have said all of that much clearer, but the problems I was having were two-fold. First, many of the sites did a poor job, for example by showing the hack -- that is being used to overcome a poor box model -- on something other than a box, say font colors or something. This made it hard for me to visualize it. Second, many of the pages explaining it are overly complicated or assume you understand what they are talking about (including many variations on the theme by Celik himself). The actual box model hack page isn't too tough, but by the time you get to the mid-pass hack (the one that seemed to fit my circumstance best at first), unless you already knew what you were doing, it was tough to follow. My biggest problem with the mid-pass hack explanation was trying to understand why there was an @import both before and after the normal style. The answer was, there didn't need to be. Second, I wanted to use an external style sheet for the main style sheet as well.
Ultimately I decided the mid-pass was overkill and simply used a linked stylesheet that contained the hack in a very simple form. It uses this format:
* html #container {
width: 770px;
w\idth: 760px;
}
This works because IE 5 will use the later width as it ignores the "\" character. It treats is as if the width is set twice, the later instance controlling as it is later in time. Because other browsers recognize the slash, they don't recognize the word "w\idth" as a property that can be set, and they they don't modify the initial width set in the line above.
Well I hope this helped pull together the various ideas for you in one place. All of these answers and ideas are clearly available on the net, but nothing I found listed the options and compared them. Hopefully this saves you some time. If you have comments, feel free to leave them on the blog article for this tutorial.
Note: good article on this topic I found five minutes after completing mine :-)
So if you are ready to learn more ...
Back to the Tutorial Index