Cross Browser Compatibility

• Home
• Articles
• Cross Browser Compatibility

If you have taken the plunge and decided your website needs to be overhauled, scrapping tables for cleaner more semantic code and opening up your website to a much wider audience, you more than likely have run into a few headaches.

One of the biggest challenges that many people face is figuring out how to get their website to look the same throughout different browsers. This possibly is the most frustrating, and most time consuming part of web design. However please don't let this put you off, having a standards based website that renders correctly, is not only very rewarding, but very achievable. Thanks to the latest generations browsers becoming more standards aware, and more and more users making use of these browsers; designing websites is becoming a whole lot easier.

First of all, you need to lay a solid foundation when creating your websites. If you haven't already done so, download Firefox 3. Firefox is one of your biggest guns in your arsenal. Thanks to Firefox's ability to extend its functionality with extensions, there are many tools to help you out.

Essential extensions for Firefox:
These extensions should without fail be installed with every web designers installation of Firefox. You can't live without them:

• Firebug - Allows you to easily view the CSS of certain elements of website and gives you the ability to change it on the fly. I'll go into more detail about Firebug in another article.
• HTML Validator – This extension allows you to check your code for any errors; easily allowing you to make sure your code conforms to the strict standards.
• Web Developer - Very useful tool allowing you to apply many filters to your site such as disabling the CSS, which is very important to see if the content flows.

Put your best foot forward!
I've mentioned this before, and it's worth mentioning again. Design your website in a standards based browser first! If you design your website to look correct in Internet Explorer 6 first, you'll be designing as if each browser had its own set of rules regardless of whether it was standards based or not. Have a look at your progress in Internet Explorer 6, but get it working 100% in Firefox first.

Once you got your website rendering in Firefox perfectly, you may notice that your website is slightly, ok, very broken in Internet Explorer 6. Don't fret. Instead of applying hacks all over the place, your best bet is to use conditional comments, and have a separate style sheet applied over your main one. Microsoft came up with conditional comments for this specific purpose, it gives you the ability to apply styles to Internet Explorer whereas other browsers would treat it as what it is, a comment.

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/ie6.css" />;
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/ie7.css" />
<![endif]-->

Conditional Internet Explorer Selectors
Use these selectors in your conditional comments to specify which Microsoft browser you are targeting:

• lt – Less than
• lte – Less than or equal to
• gt – Greater than
• gte - Greater than or equal to

You can apply all your nasty hacks in your Internet Explorer specific style sheets. CSS purists are very anti-hacks, however I don't see any harm in them being applied in this way, firstly you'll notice because you html code is standard you'll actually need very few hacks to get your website on par, and lastly any time saved working with Internet Explorer will let you hold onto your sanity for that much longer!

Common road-blocks you may encounter
Common problem is not knowing what style is being applied, and this boils down to specificity. Depending on the more specific the style the higher it's priority over other styles. Working out the specificity of a style is very simple. You can base it on 4 numbers, much like an IP address. As you may have figured the number on the left, has priority over the number on the right.

• First number – Represents weather the style is inline, 1 if true.
• Second number – Is the number of ID selectors.
• Third number – Count the number of class selectors.
• Fouth number – Lastly, count the number of element type selectors

Inline styles are applied directly in the html document, not in a separate file. They should be strictly avoided, even for testing purposes, rather use Firebug for this. So in fact, you can leave off the first number.

<div style="font-size: 18px; color: red">This text is red!</div>

ID selectors are similar to class selectors, however they are unique to the html document, meaning they may only be used once. In your CSS, you would define the style with a hash (#) in front of the name.

<a href="/" id="home">Home</a>
#home {
font-weight: bold;
}

Class selectors are what you will be using most of the time, and you would define it with a period (.) in front of the styles name.

<a href="/" class="home">Home</a>
.home {
font-weight: bold;
}

Elements in html, are your links, paragraphs, strong statements etc… You select them in your CSS by placing the element selector in front of your style. This would ensure that the style is only applied to that certain element with that class assigned to it, making it more specific. All elements selectors don't have the preceding period in front.

div.main p.introduction img#thumbnail

There for the specificity of this style would be: 0,1,2,3. The style isn't inline, there is one ID selector, 2 class selectors, and 3 element selectors. If your styles are still not being applied correctly, make sure there are no typos in your classes, and that they link up with your HTML.

You may come across extra added space when viewing your site in Internet Explorer, this is known as the Double Margin bug, and is simply fixed by adding 'display: inline;' to your class. If that doesn't work, you can fix the problem by placing the corrected code in your conditional CSS file.

You are going to be spending the majority of your time testing your website in Internet Explorers browsers. You may know, that you can only install one version of Internet Explorer at a time. However IE Tester comes to the rescue, allowing you to easily test from version 5.5 right up to version 8 which is still in Beta, in a very neat tabbed environment. This tool is invaluable, and I highly recommend everyone use it.

There is no doubt that you are going to run into problems along the way, and if you haven't yet, you can't consider yourself a proper web designer yet! However the more experience you gain under your belt, the easier designing standards based websites will become. The rewards far outweigh any difficulties you may have and you'll soon be doing it in your sleep!