Monday, February 23, 2009

HTML and CSS hacks for IE

I’m going to share the better way of box model hack if you want to use style definitions specifically for specific MSIE (Microsoft Internet Explorer) versions. A way that may make the IE Factor smaller.

Conditional Comments

MSIE for Windows has for a long time had a feature named Conditional Comments that allows content to be visible only for MSIE. Use of conditional comments instead of other css hacks is simple:

» Create a stylesheet common for all browser, without using any hacks to work around rendering problems in MSIE.
» Create a stylesheet common for all versions of MSIE
» Create a separate stylesheet for each of the MSIE versions you want to target.
» Include the stylesheets from 2 and 3 by using a conditional comment

Conditional comment syntax

The conditional comment is just a specially formatted HTML comment that is picked up only by various flavors of Internet Explorer for Windows.

The following conditional comment is being picked up by IE5, IE5.5 and IE6:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />

If you don’t want your IE-specific styles to be overridden by your regular stylesheet, source order is significant; you’d want to specify the common stylesheet first, with the IE-specific versions following:

<link rel="stylesheet" type="text/css" href="common.css" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" />

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />

<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />

Conditional comment in CSS

{/* any IE */float: expression('none');/* IE 5.x */}
{/* any Moz */float: expression('none');/* Moz 2.x */}

Related Posts :


shikkaba said...

You say this is a better way to box model hack, and yet it only says how to make it so stuff will only be read by IE, and that's it.
I think you might want to be a little more specific when you write an article as it is not the actual hack, just a way to implement them.

Anonymous said...

this is like.. SO old by now :(

Joost said...

Conditional comments are a pretty useful way to deal with ie browser inconsistencies, but are not necessary to deal with the ie boxmodel.

The ie box model only occurs in quirks mode.

So just add a correct doctype to trigger standards mode and the boxmodel will follow w3c specs.

Post a Comment


Copyright © 2009 -