image vertical alignment issue

Question

I have an image that I want vertically aligned with some text. The image has no border, no spacing, and has been properly cropped. However, it aligns differently in IE and Firefox, and I cannot figure out why.

Alignment in IE:

Alignment in FF:

Notice how in FF, the X box is flush with the bottom of the text. The HTML I am using is:

<div id="Header">
    <a href="#" onclick="return false;">Close</a>
    <a href="#" onclick="return false;"><img src="App_Themes/Dark/images/close-button.gif" alt="Close" style="border-width:0px;" /></a>
</div>

And the relevant part of the stylesheet looks like:

#Header img
{
    vertical-align: middle;
    display: inline-block;
}

I've handled this in the past by making the image element a block element, but that only works when the image is the only element in the container. How can I fix this?

Answer 1

Random thoughts:

• Why the inline-block, shouldn't this work as inline?
• Could there be some margin or padding on the x? Can you check with Firebug?
• Isn't "middle" the wrong way to align it? assuming you want to align them along the baseline, shouldn't it be "baseline"?
• What if you merge the two <a> tags into one?

Answer 2

Try

#Header {
  vertical-align: middle;
}

Note I tested this in strict standards mode. It seemed to have no effect on IE6 but moved the image up on IE8 and FF3.

Answer 3

You shouldnt need the inline-block, this is the default display value for an image unless you have reset it higher up in the cascade thats why it seems to have no effect.

Since i cant see a demo page to Firebug, im going to guess your font-sizing and thus line-height is different. Try specifiying a line-height that for the container elements or the a tags. If the line-heights differ in browsers (which they very well may) then the "middle" and top youre aligning to are going to be different while "baseline" should in theory produce the same results cross browser/font-size/line-height.