Making your site cross browser compatible is not easy, but with this tutorial you can make your site cross browser compatible in 5 simple steps.
Step 1: Validate
Lots of bugs are caused by invalid (X)HTML or CSS. If you have your site validated, it will be a lot easier to make it cross browser compatible. Validate your (X)HTML code with the W3C validator and your CSS file with the W3C CSS validator.
Step 2: Check your Website
Now you have to check your website in all browsers. I always check my site in the browsers, I’ve installed on my computer (Opera, Safari, Internet Explorer and Firefox). Do it and make a note of the bugs.
Of course, checking your website in the browsers installed on your computer is not enough. You have to check the website in different browser versions on different operating systems. The solution is Browsershots.org. With this website you can take full-length screen shots of your website in a lot of browsers. Just type in your url, bookmark the page and come back 20 minutes later to view the screen shots.
Analyse the screen shots and look for bugs. Be sure to write them down.
Step 3: Is it worth my time?
If you notice bugs in very old or uncommon used browsers, ask yourself if it’s worth your time to fix the problems. Look at the browser statistics of w3schools.com, but don’t forget to look to your own stats (I recommend AWstats). If you have one or two visitors every month still browsing with IE5.5, you should really ask yourself if it’s necessary to make the changes.
Step 4: Search the cause
Now you know about the bugs, you’ll have to look for the CSS attribute or HTML code that is causing this problem. This is often obvious. A good reference can be found on westciv.com. There is a complete list of css attributes with their support in different browsers. Too bad Firefox isn’t in the tables.
If you still cannot find the cause of the issue, search for topics on webmaster forums or post a topic yourself, with a screen shot and (a part of) your CSS and HTML code. A forum I visit often is Ozzu.
Step 5: Fix the issues
Now we’re at the essential part of making your website cross browser compatible: fixing the issues. If you know the code that is causing the trouble, find a way to rewrite the code for the specific browser. There are loads of CSS hacks to do that, but I recommend the use of conditional comments. There is an article on 456 Berea St. explaining why you should use conditional comments instead of CSS hacks.
Conditional Comments.
With conditional comments you can link to separate style sheets for all versions of Internet Explorer. A complete reference can be found on quirksmode. For example:
<!--[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie6style.css” />
<![endif]–>
CSS hacks In-CSS
If you don’t want to edit your HTML file with conditional comments, see my article about CSS hacks inside your CSS file.
Transparency of Images in IE6 and lower
Internet Explorer 6 and lower will not display your transparent PNG’s correctly, there is however a simple solution using Java script. It can be found here.
And of course there are loads of other CSS hacks. There is a complete list on centricle.com, also viewing the browsers that will apply the rules.
Conclusion
Making your site cross browser compatible will cost you some time, but it’s not impossible. The is very good documentation on the web, which can help you in this process. If you use other ways to make your site cross browser compatible, please leave a comment and share it. If you liked this article don’t forget to digg or float it.
- CSS coding for cross browser compatibility | Onyx Design Weblog
- » Browser Compatibility Tools - Mega List of Browser Checkers to Check Your Web Sites for Browser SupportWeb Design Resources Blog & Graphics Blog with Lists of Web Site Design Tools
1
I think that it’s possible to do it without conditional stylesheets … seeing that that requires you to edit a bunch of stylesheets each time you want to make a change … maybe rather just stress out that each browser renders padding and width differently … this post on ozzu.com explains it well … http://www.ozzu.com/website-design-forum/width-width-width-right-t21298.html …
2
@Righteous_Tresspasser,
Thanks for your comment and the link
I’ve never heard of box model tweaking and it looks very interesting to me.
I also found this article on Quirksmode about it:
http://www.quirksmode.org/css/box.html
But I wonder, is CSS code like this valid:
div.test {-moz-box-sizing: border-box;
}
Edit: I tried it via direct input on the CSS validator and it’s not valid. So you’ll loose you’re validated css that way…
3
Yeah you will lose the validation, but that’s not exactly what I’m talking about … you know now that IE and FF render padding differently and that could cause a lot of issues so I have the following suggestion to newbies:
Let’s say you have the following:
this text should not touh the sides of this div and should be a little bit indented
so instead of using this CSS:
div#test{padding:5px;}use this:
div#test{padding:0px;margin:0px;}
div#test p{padding:5px}
that way it’ll still work in IE and FF and look exactly the same …
//Do you have code tags in these comments??
4
@Righteous_Tresspasser
Without changing the witdth in different browsers by changing margin: and padding:, you still indent the text. Thanks!
That’s a good one
For code just use this:
< code > …
< strong >, < em >, < blockquote > etc. are also supported.
5
A very good read and good information - very well put!
6
@Ulrich
Thanks
7
Thanks for listing the five steps for making a site browser compatible.The link provided in Step 2 was something new to me. Thanks for this Really Useful post
8
@Paintworkz Web Design,
I’m glad you like this article.
You’re welcome
9
Thanks for information.