5 Comments Testing websites in different browsers - 02/16/09
It’s a pain when your web application needs to look the same in several browsers. And I’m not really talking about pain if you need to support IE7 and Firefox. I’m talking about some serious headaches when you need to support IE6.
I’m refering to CSS hell. Actually, it’s not CSS that’s hell (although you need to get used to it), it’s the damn browsers that don’t render as they should! And on top of that, ASP.NET also does a good job at screwing up your user interface sometimes (with all the hidden (not always so hidden) divs it renders).
I’ve recently had to do some serious CSS-ing on a friend’s website, and I’ve had a rough time.
How I get it to look the same in all browsers
1) Start out with Firefox
If everything looks as it should in Firefox, you’re further than you’d think. Firefox is my default webbrowser, and it definitly should be yours to. Especially for web development.
2) Follow with IE7 and IE8
Probably, you’ll have to fix some issues, but they won’t keep you up during the night.
3) Finish off with IE6 hell
As a developer, you wouldn’t even think of it, but there are a loooooooot of people out there that are still using IE6. And I’m not talking only about people, but also about whole organizations. Depending on the target of your application, you can’t deny IE6.
How I structure my CSS
Generally speaking, I use several CSS files within a web application. I seperate the styles I use on my master page, from the styles I use on my pages, just to keep the CSS focussed.
Apart from that, I have a seperate CSS file that contains IE fixes (mostly for IE6) and I only include it if the client is running IE6:
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”CSS/ie6Fix.css” media=”screen” />
<![endif]–>
Apart from that, I have this rule: Never put style tags in your pages.
Fix everything in your CSS file. Don’t mix them. You’ll avoid weirdo CSS bugs and a clean seperation of your HTML and your CSS 
.
How to test in different browsers?
I use Firefox, and IE7 on my computer. You could install IE6 using VirtualPC, but I prefer another way. I just came accross an interesting tool lately that allows you to test a web application in the most important IE versions. It’s called IETester. It’s freeware and it allows you to test in IE5.5, IE6, IE7 and IE8! It’s still an alpha release, but it sure made my job easier. To be completely sure, I always try to test the web app on a pc running IE6, just to make sure. If the application should contain a bug, that would mean you’ve got a CSS bug, and that one is your responsibility. No excuses.
Debugging tools (Updated 17/02/09)
Prajwal Tuladhar just reminded me in his comment that I didn’t mention the tools I use for CSS debugging.
Here they are:
- FireBug for Firefox
- Web developer toolbar for Firefox
- Internet explorer developer toolbar for IE7 and IE8
I have also used IE Tester and I think one should not really depend on that tool 100%. I found it a bit inconsistent while rendering pages in IE. And while CSSing, I prefer using Firebug (for CSS and JS debugging) and I guess you also use it.
This links might be helful for you hopefully: http://elementiks.com/web_resources.php
Hi Prajwal, thx for making me notice I left out the part where I sum up the tools I use to debug CSS, thx.
About IETester, I already specifically mentioned in my post you shouldn’t only rely on tools like IEtester. But it isn’t always easy to test all the environments you need, so it’s a good start point.
I’ll take a look at the links, thanks!
There are 3 groups of internet browsers depending the CSS rendering:
1: MS Internet Explorers. May be IE<7 can form another group
2: Firefox, Safari, Netscape(dead), Kameleon, Chrome (all Gecko browsers and similar in rendering)
3: Opera
To be honest I think you are new to web development
There is another thing you missed in your post. I am talking about the different OSs http://browsershots.org/. You have to test your website in all possible environments. This includes optimizing the website for notebook users. ALWAYS create the home page and your menu to look nice in 1280×800.
I think you are half done in optimizing your website. Good luck
PS: Nice blog madam!
It was just not a requirement to support all these different environments. I know it’s the ideal thing to do, but this customer had a tight budget and chose to only support IE5, IE7, IE8 and Firefox. By the way, you forgot about mobiles
The browsershots website is cool, I put that one in my favourites already! Thx!
And about my experience, I’ve done some web development already, but UI hasn’t been important (we had a seperate team for that). But once you start doing neat tricks in CSS, pfeeeew! I sure am a CSS-newbie
Thx for the compliment
For testing older versions of IE, I install Multiple IE (http://tredosoft.com/Multiple_IE)