Cross Browser Issues: CSS Hacks Explained, Tips, Tricks and Fixes - Workarounds for Internet Explorer
(Page 4 of 5 )
I use the term CSS hacks and workarounds interchangeably, because the word “hack” almost brings a negative connotation to mind. But in essence, many of these hacks are simply patches, which is why I use the term this way. Keep in mind, however, that some of the more laborious hacks may not allow your CSS files to validate, especially the ones that utilize some JavaScript. Below will be some common problems experienced in Internet Explorer and their hacks. This, of course, is not an all-inclusive guide, and will probably miss a few you like, so please forgive this ahead of time.
Centering: The Auto-Width Margin Hack (IE 5 for Windows)
A box can be horizontally centered with CSS by setting its right and left margin widths to "auto." This is the preferred way to accomplish horizontal centering with CSS, and works very well in most browsers with CSS2 support; IE 5 for Windows has problems with this. NOTE: This IE bug is fixed in IE 7.
IE 5 incorrectly applies the CSS "text-align" attribute to block-level elements. Using "text-align:center" for the containing block-level element, sometimes the BODY element, horizontally centers the box in IE5/Win. But there is a side effect of this workaround: the CSS "text-align" attribute is inherited, centering all inline content. It is often necessary to then set the "text-align" attribute for the centered box, counteracting the effects of the workaround. Here's an example:
Before the hack:
After the hack:
The CSS fix (this CSS will validate.):
<style> body { margin:50px 0px; padding:0px; text-align:center; } #Content { width:500px; margin:0px auto; text-align:left; padding:15px; border:1px dashed #FF0000; background-color:#eee; } </style> |
Double Float Margin Hack (all versions of IE)
You want to put a left float into a container box, and use a left margin on the float to push it away from the left side of the container. In IE, the left float margin is doubled.
.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; } |
So how do you fix it? You could just not use floats in a container, or you can use a workaround for IE.
.floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; display: inline; } |
Floats automatically become "block" elements, no matter what they were before becoming floats. By using the “display: inline;” directive, it somehow triggers IE to stop doubling the float's margin. (This also works on the weird text indent bug.) Because the standards for display on a float say this should be ignored, all browsers show no changes in the float when this is done, including IE. Further, the CSS will validate. NOTE: This IE bug is said to be fixed in IE 7.
Next: More Workarounds for Internet Explorer >>
More Style Sheets Articles
More By Jennifer Sullivan Cassidy
/ 17 
