Making CSS work with Firefox and Internet Explorer

I have just finished up on updating my Javamidlet.com web site. It’s been almost a year since I’ve made any changes to the site’s wordpress theme. The theme I use on Javamidlet was one of my early themes when I was still learning how to make them in WordPress.

I’ve learned quite a few from the exercise and one of them was — it’s really quite a challenge to have a web site theme that works on majority of the web browsers — Firefox, IE7 and IE6. Working with Firefox (both for Linux and Windows) and MSIE 7 was easy but you’ve got to give credit to IE6 for being such a creation! It’s a good thing that less and less people are using IE6.

Majority of the problems I encountered had to do with box sizes and positioning. It’s a good thing that Microsoft introduced the <!–[if IE version ]> … <![endif]–> html tags making my life easier. I just placed additional stylesheets to override and change the ones that IE don’t like. So for instance you have:

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />

<!–[if IE 7]>
<style type=”text/css” media=”screen”>
@import url( ie7.css );
</style>
<![endif]–>

<!–[if IE 6]>
<style type=”text/css” media=”screen”>
@import url( ie6.css );
</style>
<![endif]–>

That would allow you to put IE7 and IE6 specific styles into the ie7.css and ie6.css stylesheet files. The additional MS tags will look like normal “remark” tags to Firefox while IE6 and IE7 web browsers will load the respective additional stylesheets where you can override the normal settings.