My Website Design Doesn't Look The Same In All Browsers!

“I created a website but now when I look at it in different browsers there are display glitches! What can I do?”

This is a common issue that developers face. Web browsers have a long history of having their own interpretations of standards compliance and they also have different defaults such as font sizes and margins. If you find that your website is not looking the same in all of the major browsers then this guide will help you figure which steps you need to take to fix it.

Valid Doctype

Before you start you need to make sure that your HTML template has a valid doctype. The doctype tells the browser which set of rules it should be following internally. It’s really easy to set up a doctype:

• http://www.alistapart.com/articles/doctype/

W3C Validation

The W3C are the standards body that make the official guidelines for web page technologies such as HTML and CSS. To have a fighting chance at getting your site to look the same in all browsers you should make sure that your pages have valid HTML and CSS. Run them through these two validators and fix any errors that come up:

• http://validator.w3.org/
• http://jigsaw.w3.org/css-validator/

CSS Reset

Now that we have a technically valid design it’s time to level the playing field between each of the browsers defaults. Even a normal page will have different defaults for margins, font sizes, link borders and such. A CSS reset stylesheet explicitly sets rules for all of the tags rather than relying on the defaults set in the browser. You can use any CSS reset stylesheet; there are several out there in the wild, but if you don’t have a preference I would suggest using Yahoo CSS Reset 3. This is because it’s made by a large corporation, has quality and is up to date with modern browser inconsistencies:

• http://developer.yahoo.com/yui/3/cssreset/

When you first apply the CSS reset stylesheet you might find that your design breaks slightly in the browsers that were looking ok before. This is because you built the rules based on their defaults and now that they have been reset you are finding that your rules aren’t quite right. Don’t give up on the CSS reset stylesheet though, it is worth the time to fix these issues and then go back to working on fixing your original problems.

Don’t Use Hacks

There are a lot of tricks that you can use to achieve different effects in different browsers. I’m not talking about rounded corners or other css3 techniques that aren’t supported yet in a standards compliant way, I’m talking about using intentionally invalid mark-up to confuse certain browsers into applying different rules than others.

If you’re working on a commercial website then this is an irresponsible way to develop a site and will almost guarantee problems for your client in the future. You can’t be sure that these tricks will work in future browsers and there is always a better solution to solve your problems without relying on these hacks. Using hacks will result in unhappy clients and extra work down the line.

Conditional Comments

Let’s face it, if you're reading this article then in all likelihood you have a website that looks very similar in most browsers such as Firefox, Safari, Opera, etc. and wrong in Internet Explorer. If you built the site for Internet Explorer then you might have the site looking great in IE and poor in all the others. Either way there are times when you actually do need to treat Internet Explorer as a special case. Conditional comments allow you to target various versions of Internet Explorer with their own CSS rules and the idea is implemented in a way that doesn’t affect other standards compliant browsers.

• http://www.google.co.uk/search?q=conditional+comments

DOM Inspection Addons

If you’ve made it this far down the document then you are getting down to the nitty gritty technical details of browser inconsistencies. An indispensible tool to have in your arsenal at this point is a DOM inspection toolbar. For Firefox it has to be the industry standard Firebug. Microsoft have released their own tool called Web Developers Toolbar and this is actually bundled with the recently release IE9. Safari and Chrome both include a DOM inspector out of the box called Web Inspector and Chrome Inspector respectively.

• http://getfirebug.com/
• http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535&displaylang=en

These tools all have the same purpose. You can fire them up and then click on any element of your design to inspect the underlying HTML mark-up and CSS rules being applied to that mark-up. The majority of these tools let you prototype possible design fixes by letting you change any CSS rule or add new ones on the fly. Trying to figure out how wide that div can be before it pops your delicate floats and ruins the design? Test out if a well-placed clear: both; will fix your design? Change font sizes and colours to perfect the design? This is all made easy with a valuable tool such as this.

Testing Older Versions

Hopefully by this point you will have tuned your website up using the techniques above and your site is looking great in all of the modern browsers. Unfortunately we don’t live in a world where all of our users are running the latest versions of their web browser of choice. Unfortunately we don’t even live in a world where a developer can have more than one version of a browser installed side by side.

The most common issue is testing your site in IE6. You cannot have both installed officially. There is a way to hack the browser and force it to install two versions of IE but this has its own issues and if you aren’t testing against a genuine install it is largely pointless.

Microsoft acknowledge this issue and they release Virtual PC images every few months. They have copies of Windows XP & IE6, amongst other configurations, pre-installed on them. The latest version at the time of writing is available for download below. Unfortunately they don’t seem to have a standard hub page so you might have to search for the latest version if you are reading this article sometime in the future.

• http://www.microsoft.com/downloads/en/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en

Cross Browser Testing Tools

There are two services out there by the big players Microsoft and Adobe which will let you generate screenshots of browsers and test against them:

• http://expression.microsoft.com/en-us/cc136529.aspx
• https://browserlab.adobe.com/en-us/

There are also some other services which offer these kinds of features. Smashing Magazine has a good round up of them here:

• http://www.smashingmagazine.com/2010/06/04/cross-browser-testing-a-detailed-review-of-tools-and-services/

Check Your Analytics

This one is a bit of a cop out but it’s worth mentioning. If you are having problems with a fringe browser then you should check your analytics to see if your visitors actually use this browser.

It doesn’t make commercial sense to work on a problem for hours on end if its only occurring in IE5.5 and it accounts for 5 visitors a month.

Similarly depending on your audience you might find that you have a particularly tech savvy user base. Readers of this blog for example are obviously technical people and have made sensible choices with their primary browsers…. Right?

Ask In Forums

If you have put in the work and really tried to solve the problem yourself then it’s now reasonable to post your problem on a website and ask the world to help you out.

A few popular forums for this kind of thing are below but if you dig a little you will find many communities that are willing to review your site.

• http://doctype.com/
• http://stackoverflow.com/
• http://forums.asp.net/

When posting on sites like this you should remember to tackle one specific issue at a time. Explain that you have already made a valiant effort of your own to solve the problem. Mention what you have already tried, perhaps even link to this article and say you have tried these techniques.

Conclusion

Creating a design can take additional work to get things looking the way that you want them in all browsers. This may mean taking extra consideration with your design next time to only include features that are available in all browsers.

Create web designs that suit the medium. This isn't desktop publishing and we don't have you have full per-pixel positioning. The web is more of a flow design tool. Trying to design sites that work against the intentions of HTML and CSS will leave your designs brittle and inconsistent.

The best technique that I have found is to develop in Firefox, using clean coding techniques, testing semi-regularly in your installed copy of Internet Explorer and then at major milestones check your design is working in Internet Explorer 6.

Following the tips and techniques in this guide should help reduce your problems with future website development.