Question

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

Answer 1

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.