Crossbrowser Sites Start Off On The Right Path Make your site more compatible.

[unveiled 0]

Did you ever have a problem where all the browsers view your site differently and it is completely necessary that every little detail is shown correctly?

Well here's the most basic but useful trick.

First off, make sure you have a DOCTYPE. A doctype forces browsers (especially IE) to use the Standards Mode and will a lot of things your site might be having. IE is horrible with Quirks Mode, which is when you don't have a doctype on your site and so it doesn't use the standards of xhtml/css.

Once you got the right doctype, you have to reset margins and stuff with css. It is best to set the html and body margins and padding to 0 pixels, here's an example:

<style type="text/css">  html { margin: 0px; padding: 0px; }  body { margin: 0px; padding: 0px; }</style>

That is the most you might ever need, however doesn't reset it on everything, such as headings or divs. You can simply reset them when you give some an id (ex: <div id="example"> ) or just do it right away.

Example:

div { margin: 0px; padding: 0px; }

or alternatively...

div#example { margin: 0px; padding: 0px; .... }

Don't want to deal with all of that? You can easily set all the tags to have zero-margins and padding with the selector, ex:

<style> * { margin: 0px; padding: 0px; } </style>

However, be careful with the universal selector since other problems may occur (some did for me). I think it's the lazy method, you can actually google some "reset browser margins" examples and they might give you a stylesheet with all the tags you might use and resets them to zero.

Also the easiest way to achieve a cross browser site is to check your site often in every major browser and see how it looks instead of designing your site for one browser and then dealing with bugs later. Additionally, you don't need to check your site in every browser actually. The main ones are Firefox and Internet Explorer which you should definitely check, and Chrome and Safari use the same engine so you only need to pick one of them, and then there's Opera which sometimes acts like IE (font sizes).

That's all I got so far, also make sure to keep things standard and be patient. You may not find out the answer for IE's weird behaviors' (or other browsers) at first, but it will come to you don't worry.

[Saint_Michael 3]

Well luckily for us designers, all the problems with cross browser compatibility will be gone the moment Internet Explorer 8 goes into its final release. Once that happens people will be people there websites over as quickly as possible and not have to worry about quirks mode and having to do all these IE only patches and what not and on top of that it won't matter which browser you use to design your website as well. Of course, I don't doubt it will be as smooth and I bet there will be some compatibility problems but I think most of them will disappear once people start switching over to IE8.

[andresf91 0]

I'm not sure about that.I know lots of people who still use IE 7... Public computers in one of the libraries of my university still have IE 6! (The worst of all is that the hard disks of some of them are frozen for security reasons, so I can't install Firefox because the next day it won't be there again )

[Quatrux 4]

It's best to use standards, to make your site look alright on different browsers, the only problem for me for the past years was IE6 and IE7, other minor things between incompatibilities from other browsers are usually fixed that by using a bit different "right" method to do it.Also reseting the margins and etc. fin a css file usually helps a lot to make a page much more cross browser, it's not necessary to reset all the elements, only the ones you're using, so some people use * {..} but I don't think it's a good idea, even though it works, it's just better to write at top: div,table,.. {..}

[deadmad7 4]

I'm not sure about that. I know lots of people who still use IE 7... Public computers in one of the libraries of my university still have IE 6! (The worst of all is that the hard disks of some of them are frozen for security reasons, so I can't install Firefox because the next day it won't be there again wacko.gif )

To solve this easy problem download the USB Version of Firefox and you should be able to easily carry the browser in the USB and use it at your university! You can also take your bookmarks, extensions and saved passwords with you. Download Link of Portable Firefox Sourceforge.net Directdownload (9.0 mb)