INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Browser

How can I target specific IE (windows) browsers using just HTML? by BabyJeffy
Posted: 18 Apr 07 (Edited 20 Apr 07)


Many people were introduced to conditional comments with the introduction of IE7 and their grass-roots call to action to stop using "CSS Hacks" to target specific IE browser versions.

Conditional comments are totally valid markup (for HTML as well as XHTML doctypes) that cause IE browsers running in Windows (the old Mac versions of IE ignored them completely) to parse the contents of the commented markup.

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>
Because of the start HTML comment code (<!--), everything until the close HTML comment code (-->) is treated as a comment for non matching IE Windows browsers. The code that is actually rendered by the browser is different when viewed in IE Windows browsers older than IE7 and any other browser:

CODE --> rendered pre-IE7 browsers

<html>
<head>
   <link href="default.css" type="text/css" rel="stylesheet" />
   <link href="iexplore.css" type="text/css" rel="stylesheet" />
</head>
<body>
   <h1>Testing</h1>
   <div>I'm an old IE running in Windows</div>
</body>
</html>

CODE --> rendered all other browsers

<html>
<head>
   <link href="default.css" type="text/css" rel="stylesheet" />
</head>
<body>
   <h1>Testing</h1>
</body>
</html>
You might choose to use this to set some variables on the page for javascript to use - without having to worry about user agent detection issues and spoofing browsers (remember that this will not work for the old IE Mac browsers - only Windows):

CODE

<script type="text/javascript">
   var isIE=isIE5=isIE6=isIE7=false;
</script>
<!--[if IE>
   <script type="text/javascript">
      isIE=true;
   </script>
<![endif]-->
<!--[if IE 7>
   <script type="text/javascript">
      isIE7=true;
   </script>
<![endif]-->
<!--[if IE 6>
   <script type="text/javascript">
      isIE6=true;
   </script>
<![endif]-->
<!--[if IE 5>
   <script type="text/javascript">
      isIE5=true;
   </script>
<![endif]-->
Be sure to check out the difference between down-level hidden (which is what I have used all the examples in this FAQ) and down-level revealed at the MSDN conditional comments page.

smile

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close