My CSS is different in IE, Chrome and Safari.

[webmaster1]

This is ridiculous. I feel like I've woken up into a twilight zone. With all the technology and intellects in the world how come we still don't have a unified rendering of CSS by all browsers.

 

I've tried IE, Chrome and Safari each of which return different results by a few pixels here and a few pixels there. So I know the results are differnet but where do I start in fixing it?

 

Does anybody have general pointers in making cross-browser CSS?

[webmaster1]

I've tried browsershots.org but it fails because its looking for a robot.txt file which I don't have.

[dropfaith]

you dont need a robots.txt file for browsershots i use it all the time without one

[webmaster1]

I know but it keeps on insisting that I have one for some bizarre reason.

 

I've come across a good resource here:

 

http://www.designvitality.com/blog/2007/10/designing-for-every-browser-how-to-make-your-site-fully-cross-browser-compatible/

[haku]

Try and access the robots.txt file directly and see if it pops up.

 

Anyways, there are three steps you should definitely take to unify your site across browsers:

 

1) Always have a doctype. If you don't, IE will go into quirks mode which will cause strange things to happen.

2) Use a CSS reset sheet. This sets the defaults for all elements, rather than relying on the browsers' defaults. As different browsers set defaults differently, this puts you on a level playing field, since it explicitly defines the defaults, overriding any browser defaults.

3) Make sure your code is valid. Browsers each have their own methods of interpreting errors, and because they are errors, there is no standard as to how they should be interpreted. However, for the most part (i.e. with the exception of IE), they interpret code the same way, so if it looks ok in Firefox for example, it will probably be ok in Safari as well. There are some minor exceptions, but for the most part it will be the same.

 

 

If you do these three things, it by no means will guarantee your site will be the same on all browsers, but it gives you a really strong foundation to start from in trying to fix the differences. If you haven't done the above three things, the differences are going to be significantly harder to fix.