Topic: Why different result in Safari/Firefox

Im following Agile Web Development With Rails 3rd Edition and Im trying to figure out why the page looks slightly different in Safari 5 and Firefox 3. Here is an example

Safari:
http://img197.imageshack.us/img197/702/safari.png
Firefox:
http://img190.imageshack.us/img190/4962/firefoxsia.png

The spacing between chars is bigger in Firefox (e.g. notice the 'e' in the word "image" - its much closer to the previous char in Safari), the dotted line is different, the square bullets and the red lines is different too. How can I fix  all this?

I use this CSS

Re: Why different result in Safari/Firefox

Welcome to the browser wars. All of the browsers render text differently.

Re: Why different result in Safari/Firefox

Wow Safari 5?? How is the future wink

Re: Why different result in Safari/Firefox

All this fuss for such little differences!? Man, wait 'til you make your boxes float and start adding margins, then you'll see how things blow up in your face!

Re: Why different result in Safari/Firefox

@cherring: wops, I meant 4 (beta) smile

@all: I know its not much but I just thought if this simple page looks 'so' different, then how much will a finished site differ. So I thought I might as well learn how to do it as right as I can now.

There must be something I can change that makes it look more the same in different browsers. E.g. if I open up cnn.com in Safari and Firefox the difference is very small. So what should I stay away from using? I noticed using % for font-sizes generates very different results for example.

Re: Why different result in Safari/Firefox

They have big buck, and maybe a stylesheet for each browser with adjusments to make things look 99.9% the same.

7

Re: Why different result in Safari/Firefox

When you have trivial differences among browsers, one thing to look at is CSS Resets.  They let you clear out all browser specific (pre-defined in the browser) styles:

Try this:

http://developer.yahoo.com/yui/reset/

Also look at the YUI Base CSS, which will give you some consistent formatting across browsers.  I think resets are a good thing to do when using CSS in general on your site.

-- Ben Carpenter
http://bencarpenter.org