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” />
<![endif]–>

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” />
<![endif]–>

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

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

Conditional comment in CSS

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: