Important notice

Please note that this blog is discontinued here. All the posts are also coppied to my new blog at http://boris.gomiunik.net.
Important: Due to large amount of comment spam further commenting has been disabled here. If you wish to send me a comment, plase look up the same post on my new blog and leave comment there. Thanks!

1/13/2007

CSS compatibility IE6, IE7, Firefox and others

How cool! The new Internet Explorer 7 now supports semi-transparent PNGs. So web design got a bit easier. Or did it? According to w3schools web statistics there is still a BIG amount of users of IE6. So how to adapt that web site will use advanced features on browsers that support them?

You can use some CSS hacks. Here's what you can do:

If you want to distinguish CSS for Internet Explorer (IE) and other browsers (so CSS display problems occur in IE), create a separate CSS file (many web designers call it iehacks.css). Next in the website after linking your original CSS for all the browsers add the following code:

<!--[if IE]>

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

<![endif]-->

And enter all the corrections for Internet Explorer in the iehacks.css file.

If you want to make specific css only for older versions of IE, then you have to use <!--[if lt IE7]--> instead of <!--[if IE]>.

Below is an example if you want to use semi-transparent .png as background in IE7, Firefox, Opera and others, but .jpg as background in IE6 and older. You can also use !important to seperate CSS for other browsers and IE.

HTML page:

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iehacks.css">
<![endif]-->
<body>
  <div class="watermark">....</div>...

styles.css

/* styles for all browsers excluding IE7. Things not for IE7 will be left out with !important */
body {
    background-color: black;
    background-image: url('images/gradient.jpg');

    background-position: left top;
    background-repeat: repeat-x;
}   /* black background with gradient on top. */

div.watermark {
    background-image: url('images/watermark.png'); /* transparent */
    background-position: left top !important; /* for all but IE */
    background-position: right top; /* for IE */
    background-repeat: no-repeat;
}

iehacks.css

/* for IE6 and older */
div.watermark {
    background-image: url('images/watermark.gif'); /* here is a transparent that will be displayed better in IE6 and older */
}

Ofcourse above is just an example using semi-transparent png for all browsers but IE6 and older. Like that you'll be able to make your website more compatible. 

8 comments:

Jose Antonio said...

Is the same method valid for making the pages aware of different browsers for modifying their design?
In that case that is what could be used to detect mobile browsers, shwo special messages in the case of safari, opera, etc.
Super interesting!

Unknown said...

the important trick is not working for me on IE 7

mrHan said...

hi Onno are sure its not working for u? Share your code then we will review together. suspect u do hack css first b4 instead default css first....

mrHan said...

sori for wrong typing :P

hi Onno are u sure its not working for u? Share your code then we will review together. suspect u do hack css first b4 instead default css

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Ruchi said...

Hey,
Nice and very informational blog.
Thank's and regards
:)

Jack said...

Wow,
Nice post I am going to look around your site seems you have some great stuff.
Thanks n Regarding
:)