Stylesheets layout issues with Internet Explorer         Stylesheets are

Stylesheets layout issues with Internet Explorer         Stylesheets are a wonder but can be nerve breaking at ti
Generic placeholder image

Mukesh R

Stylesheets layout issues with Internet Explorer

        Stylesheets are a wonder but can be nerve breaking at times (most of the time). Different browsers and versions make web designing a nasty business.

The ultimate solution is to have different stylesheets for different browsers and versions. Have IE-readable conditional comment link to the appropriate stylesheet.

Example:

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

To deliver code to different versions of Internet Explorer, you can use the browser version and either gte, gt, lte or lt or none of these :

<!–[if IE 5]>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<![endif]–>
<!–[if IE 5.0]>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<![endif]–>
<!–[if IE 5.5]>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<![endif]–>
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”style.css”><![endif]–>

To deliver code to version of Internet Explorer 5 for Windows and higher :

<!–[if gte IE 5]>
<link rel=”stylesheet” type=”text/css” href=”style.css”><![endif]–>

To deliver code to version of Internet Explorer 5.5 for Windows and lower :

<!–[if lte IE 5.5]>
<link rel=”stylesheet” type=”text/css” href=”style.css”><![endif]–>

To deliver code to version of Internet Explorer for Windows below Internet Explorer 6, use this code:

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

Just replace the paragraph element with a style element, and put that in the head of page.tpl.php :

For example, to link in a stylesheet that will only be applied in Internet Explorer 6 :

<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
<![endif]–>At the end type the default stylesheet which will be used by mozilla ++

 

<link rel=”stylesheet” type=”text/css” href=”style.css”>