Cross Browser Issues: CSS Hacks Explained, Tips, Tricks and Fixes - More Workarounds for Internet Explorer

Min-Width and Max-Width Hacks (all versions of IE)

IE is the only browser that doesn’t support the CSS2 properties min-width and max-width, which have been a standard since 1997. These are useful for controlling larger areas of type, particularly when setting line length limits to aid in readability.

IE treats width as if it were min-width. By exploiting the fact that IE doesn’t support child selectors, we can create some CSS code that doesn’t allow a browser window to shrink below a certain size:

The max-width hack does require using some JavaScript in the CSS, which will cause your CSS not to validate. 

    width:expression(some javascript goes here);

Here’s an example of its use:

border:1px solid red;

width:expression( 

    document.body.clientWidth > (500/12) * 

    parseInt(document.body.currentStyle.fontSize)?

        "30em":

        "auto" );

The key is using Internet Explorer's relatively little known expression() property.  What this does is make IE check whether a value is over a certain threshold. If it is, then it makes IE use 30em as the box width; if not, auto is used, making the box shrink.  Fortunately, Mozilla, Firefox, Opera, Netscape 6 and other compatible browsers just ignore this because, when a browser that isn’t IE comes across something it doesn’t understand, it simply disregards it.

Utilizing the Asterisk HTML Selector Bug (all versions of IE)

The following selectors are all incorrectly interpreted by Internet Explorer as if the first universal selector (asterisk) does not exist:

IE treats the above as if they were, correspondingly:

In valid HTML and XHMTL documents, html is always the root element and body is always a child of the root element, and never a grandchild (or great grandchild). Therefore, the first three CSS selectors above should not match any element. Nonetheless, they are valid selectors.  By using any of the above erroneous selectors we can specify CSS rules that are meant only for IE.

Line-Height and Replaced Element Hack (all versions of IE)

In IE, line-height is incorrectly rendered if the line contains a replaced element. If the default line-height is changed to a larger value, the line spacing above and below any text line that contains a replaced element, such as a small image, will be half of the spacing seen elsewhere in the text.  This bug is triggered just by the simple presence of any replaced element: IMG, INPUT, TEXTAREA, SELECT and OBJECT.

Line-height in IE:

Line-height in Firefox:

By calculating and applying a top and bottom margin to the replaced element, you can force the line-height to be what was intended.  Utilize a hack that gives specific instructions to IE, like the asterisk hack above, and then apply your top and bottom margin fixes.  You will need to know the height of the replaced element, and the height of all the replaced elements of the same type needs to be almost equal if you want to make use of the same CSS classes, otherwise, you'll have to create new classes for each replaced element.

The vertical-align property is needed to position it correctly.  NOTE: This IE bug is supposed to be fixed in IE 7.

Workarounds for Mozilla, Firefox, Netscape and Opera

Generally, you aren’t going to see too many hacks for these types of browsers, unless you are talking about older versions of Netscape and Opera, for the sheer fact that they support CSS very well; why write hacks for all of the browsers instead of the one that’s erring?  But you have a lot of people that use IE, and the school of thought here is to try and look good to the majority of the public when the cross-browser compatibility issues emerge, then go back later and put in the hack to “fix” the other minority browsers.

I don’t really feel I need to go into any fixes for the compliant browsers, just so that your code in IE works in everything else; I believe this is the absolute incorrect approach.  It not only makes things more difficult, but the likelihood of your code breaking in later versions of IE is extremely high.

Writing compliant CSS code is always a good idea; the simpler the better.  Once in a while, you will want to use a workaround to get your design to look right in IE, and hopefully you’ll be able to use these for those times.  There is no excuse for writing sloppy code, but then again, there really is no excuse for IE not to be compliant with the CSS standards.  A great philosopher once said, “You can’t always get want you want; but sometimes you can get what you need.”  Workarounds might not be what you want, but you can sometimes get what you need.

Comments On: Cross Browser Issues: CSS Hacks Explained, Tips, Tricks and Fixes

· I have also seen this usage: @import url("url");It validates in XHTML...   >>> Post your comment now!