How to target specific IE (windows) browsers using just HTML

BabyJeffy · Apr 18, 2007

I was recently asked how you could include different CSS on a page for different browsers without resorting to javascript. Whilst conditional comments are no use outside of Windows IE browser, this is usually the browser that most people need to target (due to required CSS work-arounds).

I have put together a quick reference for the use of conditional comments here:
faq215-6625

The following code shows how a conditional comment can be used to match "all versions of IE less than version 7" and include an extra css file and an extra div in the content of the page:

Code:

<html>
<head>
   <link href="default.css" type="text/css" rel="stylesheet" />
   <!--[if lt IE 7]>
      <link href="iexplore.css" type="text/css" rel="stylesheet" />
   <![endif]-->
</head>
<body>
   <h1>Testing</h1>
   <!--[if lt IE 7]>
      <div>I'm an old IE running in Windows</div> 
   <![endif]-->
</body>
</html>

This is described in more detail, along with an example that shows javascript variables being set using conditional comments, on the FAQ.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

ESquared · Apr 20, 2007

Just to mix things up, one technique I read about recently was, instead of making a different css file for IE, instead, insert a different container element in the HTML structure for just IE using the same conditional comments.

Something like



--- main content goes here



Then in your css, you can do everything as usual, and if you need to target IE with something, just put the #ltIE7 element in there, sort of like the * html hack, only more reliable. It might look like:

.leftbox {float:left; width:200px;}
.middlebox {margin-left: 205px;}
#ltIE7 .leftbox {margin-right: -3px;}
#ltIE7 .middlebox {height: 1%;}

And that is very cool.

BabyJeffy · Apr 21, 2007

Indeed... a nifty trick! And all without a hack in sight! [smile]

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to target specific IE (windows) browsers using just HTML

BabyJeffy

Programmer

ESquared

Programmer

BabyJeffy

Programmer

Similar threads

Part and Inventory Search

Sponsor