Click here to Skip to main content
Click here to Skip to main content

IE CSS Hacks

, 14 Jun 2011
Rate this:
Please Sign up or sign in to vote.
CSS Tips to allow coding for a specific IE version

Internet Explorer...

  • It doesn't matter if it's IE 6, IE 7 or IE 8, they all suck.
  • Even though IE 8 has made some progress concerning CSS issue, IE 7 and obviously IE 6 are the worst browsers.

With CSS compatibility issues from here to Bill's office it takes too much work to make one CSS file fit all. That's why I thought of a small hack that I make in every HTML / XSLT / ASPX document I'm working with.

At the body tag of each page, I insert a small HTML if:

<!--<span class="code-comment">[if IE 6]>
<body class="ie6">
<![endif]--></span>

<!--<span class="code-comment">[if IE 7]>
<body class="ie7">
<![endif]--></span>

<!--<span class="code-comment">[if IE 8]>
<body class="ie8">
<![endif]--></span>

After placing that, you can easily create inside your general CSS file an inherited styling such as:

body 
    <span class="code-none">{ margin<span class="code-none">: 0 0 0 0<span class="code-none">; <span class="code-none">}
body.ie6 
    <span class="code-none">{ margin<span class="code-none">: 0 5px 0 0<span class="code-none">; <span class="code-none">}
body.ie7 
    <span class="code-none">{ margin<span class="code-none">: 0 0 5px 0<span class="code-none">; <span class="code-none">}
body.ie8 
    <span class="code-none">{ margin<span class="code-none">: 0 0 0 5px<span class="code-none">; <span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

This is the easiest way for me to work with IE 6 and IE 7 (and sometimes IE 8). There is another way to make style compatible with IE browsers which involves creating a different CSS file for every IE:

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

<!--<span class="code-comment">[if IE 6]>
    <link rel="stylesheet" type="text/css" href="generalIE6.css" />
<![endif]--></span>

<!--<span class="code-comment">[if IE 7]>
    <link rel="stylesheet" type="text/css" href="generalIE7.css" />
<![endif]--></span>

<!--<span class="code-comment">[if IE 8]>
    <link rel="stylesheet" type="text/css" href="generalIE8.css" />
<![endif]--></span>

Good luck, and hopefully we won’t need any CSS hacks for Internet Explorer 9.

Elad,
Lead Developer at Sports Betting Tech

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

DevAffair
Team Leader Sports Betting Tech
Israel Israel
No Biography provided
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 14 Jun 2011
Article Copyright 2011 by DevAffair
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid