Cross browser compliant website

Peter B

I am designing a website for my company and need to make sure it is cross browser compliant.

I have been using W3C to check for errors but it seems the website still appears differently in different browsers. I have been testing with Firefox and IE mostly. I especially have a problem with getting borders to line up in both. When it works in one it is disjointed in the other.

Anyone know of a good way to easily make your website cross browser compatible?

BTW my website does not contain any javascript.

forbairt

Peter B wrote: »

Anyone know of a good way to easily make your website cross browser compatible?

Easy way = don't design too complicated a website. Pixel perfect websites can be a complete nightmare to deal with.

IE 5.5 / 6 / 7 / Safari / Firefox / Opera / Firefox on linx ... and so on

There are conditional statements available as well

<!--[if IE]>
<style type="text/css">@import "IE-override.css";</style>
<![endif]-->

Goodshape

Peter B wrote: »

Anyone know of a good way to easily make your website cross browser compatible?

There's a few pit-falls to be aware of. Forbairt posted a good list of browsers you should be checking if you want 'full compatibility' -- these are the browsers that are in wide use today. Although personally I wouldn't worry too much about IE 5.5.

Unfortunetly, IE6 is still around 60% of the market and it doesn't adhere to W3C standards -- so testing against W3C isn't really enough. IE conditional style sheets might help here.

Biggest problem with IE6 is the way it handles the 'box' model. It's implementation is near totally different to the W3C compliant browsers.



Try a Google search for "css box model" for a better explanation.

Also, check out this software which allows you to install multiple versions of Internet Explorer on the same Windows machine.

forbairt

Definitely recommend the multiple IE install that goodshape recommended its a major time / life saver ... sure you can use browsershots.org ? but the ttime delay on those is annoying unless you're a paid member ...
q

Quick run down on one of my sites (rough figures)

IE - 77%
- 7 - 46%
- 6 - 54%
- 5 - <1%
Firefox - 17%
Safari - 4.55%
Opera - 0.5%

If it was a tech site I'd expect a lot more firefox ....

Also I'd recommend designing for Firefox .. and hacking for IE

Moonstar

Hi Peter,
Would suggest trying to get it looking good in Firefox and IE initially, then worry about the other browsers later. If it's ok in those two, then you'll probably only need to change minor things to get it ok in the rest of them (if anything).

Also try not to fix browser specific issues by adding additional complexity - if you can get away with it, try to work around IE bugs etc. by changing the way you design the CSS, esp. with regards to margins and paddings, instead of having to write IE specific styling (But sometimes, this can be unavoidable).

CuLT

Moonstar wrote: »

Hi Peter,
Would suggest trying to get it looking good in Firefox and IE initially, then worry about the other browsers later. If it's ok in those two, then you'll probably only need to change minor things to get it ok in the rest of them (if anything).

Also try not to fix browser specific issues by adding additional complexity - if you can get away with it, try to work around IE bugs etc. by changing the way you design the CSS, esp. with regards to margins and paddings, instead of having to write IE specific styling (But sometimes, this can be unavoidable).

In keeping with this philosophy I would add that I found this article very informative in dealing with how browsers render text sizes.

EKRIUQ

You should use http://browsershots.org/ if you want to see your website in over 54 browsers and different versions.

This will tell you if your in the right direction, takes a while to load browser shots but worth it.

Bingo