Simple CSS Hacks for Internet Explorer:
Fixing Internet Explorers Width Calculation
It's commonly known among more experienced web developers that Microsoft's Internet Explorer is a pain in the backside when it comes to its CSS implementation, especially of its BOX MODEL. These problems exist because Microsoft refuse to follow the W3C's Guidelines, not only for the implementation of the HTML interpreters, but every other web specification the W3C has ever developed, (so it seems), including CSS.
This page is about the CSS Box Model fault that lies within Internet Explorer.
The problem I am referring to is the way in which Internet Explorer calculates an elements total width. Now, with W3C compliant browsers calculate an elements width by its width property. For example:
#layer { width: 150px; }
Now when you apply padding and margins to this style, a W3C compliant browser will add those padding and margin values onto the width defined in the above style's width property, (150px). Internet Explorer doesn't. Internet Explorer includes these values in the overall width of the element. Take a look below style and then take a look at the following table which shows how a W3C Compliant browser and Internet Explorer calculate the items total width.
#layer { width: 150px; margin: 10px; }
| Calculating CSS Elements Total Width | |
|---|---|
W3C Compliant Browser Width + (margin * 2) 170px including padding and Margin
|
Microsoft Internet Explorer: Width 150px including padding
and margin |
What this basically means is that in Internet Explorer, in order
to get the element to be the same width as it would be in a W3C Compliant
Browser, you must manually add the margin value (multiplied by 2 as
the value is applied to both sides), in order to end up at the same
value.
Well that's the logic sorted, but how do set that up in CSS so that Internet Explorer uses one value, and W3C Compliant Browsers use another? Answer: You can't.
The only way you can do it, (without venturing into the realms of Javascript and Browser Detection), is with an IE CSS Hack.
Because of these problems, Microsoft implemented a work around for this kind of problem by telling the browser to interpret certain HTML style comments as commands. See Code below.
<!--[if IE]> ... Some Code ... < ![endif]-->
Now the above line of code is nothing more than an HTML comment and these are ignored by browsers. However, Microsoft's Internet Explorer has been modified to see the above as a conditional statement, (an IF statement in this case).
Now using this conditional statement, you can add code between the statements that will be executed when viewing on Internet Explorer, and ignored by all other browsers. This is handy because it means we can stick some CSS code in there to over-ride the default style sheet.
<STYLE>
/* total width = width+margin*2 = 170px */
#layer { width: 150px; margin: 10px; }
</STYLE>
<!--[if IE]>
<STYLE>
/* total width = 170px */
#layer { width: 170px; margin: 10px; }
</STYLE>
< ![endif]-->
In the code above, all browsers will see the first style tag and use
it to define the #layer class. This is also true for Internet Explorer.
However when Internet Explorer looks at the above code, it will over-ride
any re-stated style sheet properties that appear in between the comments:
<!--[if IE]> ... < ![endif]-->
It should be noted that you only need to over-ride the width properly in the comment style tags as the rest of the attributes will remain unchanged.
There other ways of applying CSS hacks for Internet Explorer, but this is a simple method that I use. Its not very efficient when you use an External Style Sheet though because you must add the above commented Hacks to every page you use the class on. There are true CSS hacks around that cause internet explorer to trip up when it encounters certain characters in a css file, but I will cover those in another tutorial.
The Future: Internet Explorer 7.0
Microsoft are well aware that they do not implement W3C Specifications into Internet Explorer, and they still have not learnt from their mistakes. Internet Explorer 7 is on the horizon and they have stated, out loud, that they are NOT going to follow the W3C Specifications. I love MS products and I think they are a great company, but this is one area they really need to pull their fingers out on.
Tutorial by Justin Kercher
2005.
This document may not be copied for use on another site.
Copyright© 2005.
Sitemap
