Design for Firefox, Hack for IE
permalinkI’ve decided to tweak my default stylesheet a bit to use some fancy features available in Firefox (and any other highly compliant browser). As usual, I’ve designed the effects for Firefox and just made the site work with IE.
Here’s a rundown of the stuff I did:
- Added position: fixed; to the header above and navigation bar on the right so that they stay on the screen.
- Added real transparency to the logo.
- Added a transparent gradient background to the header, underneath the logo.
These effects are all available in any browser besides IE. I’ve used the conditional comments to set the body class depending on whether the browser is IE or not:
<!-- dirty CSS hack alert! -->
<!--[if IE]>
<body class="ie" onunload="rememberStyle('lastStyle');">
<![endif]-->
<![if !IE]>
<body class="nonie" onunload="rememberStyle('lastStyle');">
<![endif]>
This sets the body class to either “ie” or “nonie”, which can then be tested for in the CSS. I’ve wrapped most of my new effects in these tags to keep them IE-clean.
The only problem is that if IE ends up getting “position: fixed” support in the future it won’t show up unless I modify these conditional comments. I’m not holding my breath, however.
Read full post