CSS: Padding issue. Need help please

Question

I'm experiencing a strange CSS spacing issue in Chrome (but not in Firefox and/or IE)

My site is here.

The vertical spacing in Firefox between the "Real Estate Search" (H2 tag) and the form input field for "San Francisco, CA" (#city-field input tag) is perfect, but in Chrome, Chrome is applying more/extra vertical spacing than desired.

To help, I've attached a screenshot. The redline represent the extra spacing that Chrome is adding that Firefox/IE are not.

Any ideas why Chrome is apply more spacing than Firefox & IE.

And how to fix this issue.

Thanks in advance

UPDATE

I'm also using a "reset stylesheet" to standardize across all browsers the H2 spacing, etc. It can be found in my linked HTML document above yet still am experiencing this issue.

Answer 1

I'm thinking that the line-height is the culprit. Try setting the line height of the h2 to somewhere around 13 to 15 pixels. By default it is set to normal. According to W3C, line-height: normal "Tells user agents to set the used value to a "reasonable" value based on the font of the element." Firefox and Chrome could be setting different "reasonable" values since they are built on entirely different rendering engines.

Answer 2

According to Web Inspector, in Chrome, your input tag has a 2px top and bottom margin. However, Firebug shows no margin for this same input, in Firefox. Use the following in your CSS:

#city-field {margin:0}

Edit: The extra spacing is being caused because the input is set to display:inline-block. If you change it to display:block, you will notice the space disappears. Try using floats and display:block to get the content inline instead.

Answer 3

Use a reset stylesheet.

Different browsers interpret CSS rules for tags like H1, H2, UL, LI, etc. in different ways. These include padding and default font size. A reset stylesheet takes all those and removes the defaults so that you may substitute your own values when you so desire.