Aligning a background image to the top of text in a header element

Question

I'm having a problem aligning an image to the top the text in an <h2> element because the space between the top of the text and the top of the elements box is different across browsers (so far it's been different between IE7, Safari 4, and FF3 - haven't tested anything else). Particularly noticeable because I'm using a large font (48px). Is there any way to reset this so they're all the same? It isn't margin/padding.

This seems like it'd be an easy fix if I just take the text out of the header element and put it in a div, but it is in fact a header element and I'd like to still use it if at all possible.

Answer 1

Have a look into reset stylesheets, which are designed to reduce inconsistencies across different browsers thus saving a lot of work in the long term. Also see:

• Reset Reloaded
• YUI Reset CSS
• Blueprint CSS

Answer 2

A reset stylesheet would be the obvious first step (see, for example, Eric Meyer's 'Reset Reloaded': http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ ).

This essentially overrides browser rendering defaults back to 0, so all margins and padding is at 0px, all fonts are at 1em, line-heights at 1em etc.

If you want to omit the use of a reset-stylesheet, you can just use the following:

h1,h2 /* etc... */
{padding: 0;
margin: 0;
}

Answer 3

No, that's not possible.

You can specify the margin, padding and line-height to get them as close as possible, but beyond that there is nothing you can do. Text will always be rendered differently in different browsers and on different systems.

How text is rendered depends on a lot of factors besides just how the browser positions it, like the fonts installed on the system, the font size the user selected and font smoothing settings. You can never expect text to be rendered at the same pixel position on all systems.