Monday, June 18, 2007
Logo Replacement for IE6
I’m in the midst of working out the little bugs on my other website, BunnyOne Design, and one of the things that I was having trouble with was IE6’s support for PNGs with a transparent background. I formatted my logo as a transparent background PNG inserted directly within the page, with a PNG reflection of the logo shown using CSS. (This way I could have the logo be “clickable”.) IE7 has support for PNGs with transparent backgrounds, but IE6 and below botches them horribly.
So, instead of looking like this:
it was looking like this:
Unfortunately there’s still a significant amount of people using IE6, so I needed to find out a way of making the logo blend in for this beast of a browser. I wanted a smooth look to my logo so using a GIF was out of the question.
My solution was to use conditional comments and a different style sheet for IE6. Conditional comments only work when directly referenced within the web page, which is why a separate IE6 style sheet is necessary. I copied over what I had for my IE7 style sheet, renamed it to screen_ie6.css, and referenced it in my header using conditional comments:
<!--[if lte IE 6]><link href="../CSS/screen_ie6.css" rel="stylesheet" type="text/css" media="screen" /><![endif]-->
This overrides the default style sheet for people using IE6. (The “lte” part of the conditional comment means “lower than or equal to”.)
I have the logo inserted as an image within the page, which is positioned absolutely and styled using CSS.
<a href="../index.html" name="top"><img src="../images/logo.png" width="152" height="144" alt="BunnyOne Design logo” id="logo" /></a>
I went into Fireworks, which I used to create my design mock-up, and exported the logo this time as a non-transparent PNG, with the blue gradient/silver bar visible as the background. (I did the same for the reflected image.) I went into my code and right below the normal logo image inserted the IE6 logo into the page, using conditional comments to ensure it showed up only in IE6:
<!--[if lte IE 6]><a href="../index.html" name="top"><img src="../images/logo_ie6.png" width="152" height="144" align="BunnyOne Design logo” id="logoie6" /></a><![endif]-->
In my IE6 style sheet I changed the CSS for the normal logo styling from:
#logo {
padding-left:1px;
position:absolute;
border:none;
}
to:
#logo {
padding-left:1px;
position:absolute;
border:none;
visibility:hidden;
}
This hides the original logo. Next, I created some formatting for the “logoie6” div. It required a few tries before I got the background to line up correctly:
#logoie6 {
padding-left:1px;
top:6px;
position:absolute;
border:none;
}
For the reflection CSS I switched the background image to the IE6 version I exported from Fireworks. So this meant I didn’t have to change the reflection div reference within the page, only the properties within the IE6 style sheet. Again, it took a few tries before I got the background to line up correctly.
Next was making sure the new image didn’t show up if the page was printed. I like having a very simple print version for websites, so my print style sheet is very content-intensive, with one of the few images being the plain logo at the top. Cancelling out the IE6 logo was simple, and just required the following code in the printer style sheet:
#logoie6 {
visibility:hidden;
position:relative;
width:1px;
height:1px;
}
I’m sure there’s more elegant ways of going about it, but this solution worked. The website logo no longer looks broken in IE6, and the page can be printed without the IE6 logo showing.
On a side note: I tested in IE5.5 and the logo background shows. I wonder if it is because IE 5.5 doesn’t understand the conditional comment? Since IE7 has been out for over six months and there is such a tiny market share for IE5.5 and below now, I’ve decided to not worry about it too much.
