You are not logged in. Please login or register.
Rails Forum - Ruby on Rails Help and Discussion Forum » XHTML/CSS/JavaScript » 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:
Firefox:
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?
Welcome to the browser wars. All of the browsers render text differently.
Wow Safari 5?? How is the future 
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!
@cherring: wops, I meant 4 (beta) 
@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.
They have big buck, and maybe a stylesheet for each browser with adjusments to make things look 99.9% the same.
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
Hosting provided by aTech Media
