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:
Here is the home page where the misalign occurs:
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.
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.
