CODEWITHSUNDEEP
firefoxgoogle-chromesafari
Giljed Jowes
Giljed Jowes

Reputation: 729

Why do buttons look larger in Safari as compared to FireFox, IE8, and Chrome?

I have a website whose header looks misaligned when viewed in Safari as compared to FireFox or IE8. I found out that this is caused by buttons looking larger in Safari than other browsers. What CSS could fix this problem in Safari?

Here is a screenshot comparing Safari and Firefox:

http://webypedia.com/wp-content/uploads/2010/08/Safari-buttons-are-larger-than-Firefox-e1282788166774.gif

Here is the home page where the misalign occurs:

http://webypedia.com

Upvotes: 2

Views: 801

Answers (2)

Matt Ball
Matt Ball

Reputation: 359826

To smooth out the vendor-specific default CSS, it's common practice to use a "CSS reset." Personally, I like the one in YUI. From the site:

The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to built upon. With CSS Reset loaded, write explicit CSS your project needs.

Assuming your reset stylesheet is "good," then the vast majority of cross-browser differences, like your button size issue, will be eliminated.

Upvotes: 1

Marko
Marko

Reputation: 72222

You should set the line-height of the button to 11px as well.

button height is calculated using line-height + padding + any borders.. Safari seems to have a default line-height different than the one of the other browsers.

Upvotes: 1

Related Questions