Make your site cross browser compatible in 5 steps
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.
![]()
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.
in different browsers there are few
websites which offer this service. On these websites you can check the
compatibility of your website in all desired browsers. You can find these
websites at http://www.bestpsdtohtml.com/7-awesome-resources-to-test-cross-browser-compatibility-of-your-website/