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.
Technorati tags:
web design,
css,
compatibility,
internet explorer,
firefox,
opera,
css hack,
transparency,
png,
IE6,
IE7
