How Make Your Website Compatible With All Browsers.

Hi

Hope some one can tell me how to make a Website to be compatible with all Browsers, well dont know if compatible is the right word, I would say to make a Website look good in any browser, currently I have a website that looks good in some browsers but in other ones it does not, any sugestions on how to get the website to look good in all browsers ? Thank you guys.

 

What you can do is use Javascript to determin what browser someone is using and then it can select a different CSS Sheet depending, allowing you to have each browser with its own CSS optimised to look correct.

check out
w3schools.com/js/js_browser.asp

 

Write your markup using web standards. Validate your html and css using the validators. Check how it looks in a modern, standards compliant browser (not IE). Chances are everything will work good everywhere. Only problems you will generally have are with IE. Check in IE as you are coding. WHEN it screws things up, you can ask/google for a fix because IEs quirks and many bugs are known as are the hacks to fix it. Never, ever trust IE to do anything right.

 

As above, and always specifiy exact values, for instance:

border: #CCC thin solid;
and
border: #CCC 1px solid;

Are both 1px in Firefox, but IE displays 'thin' as 2px, and can lead to divs not fitting in containers etc and messing up designs

 

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.


Hope this can help

 

Yes, I agree. The first step is to make sure it is valid HTML and CSS. Usually if it is, you will not have too many bugs.

 

Guys thank you very much for all your coments this has really helped my a lot, Efsane 66 Mate great post lots of great information thank you very very much !!

 

You want to pretty much zero out all values of basic tags to wipe away brwoser defaults.

Like is css:
html body table tr td div input select {margin:0px; padding:0px;}

I like to start out my scripts with this, then aplly what i want or dont apply if i want the assinged 0 values, instead of getting 1px padding in ie on an unstyled tag whereas in ff i will get the 0 padding on ubspecified tags, so clearing them all out helps, maybe Ms Billy will get his IE(internet experiment) to fly right one of these days