CSS - A Link text image alignment off in IE and FF

[duckxtales]

Hi,

I'm having problems aligning a small icon 15x15 next to some text. It's basically a close button with an icon of an X next to it.

The code is basically:

[a href="#"] Close [img src="images/icon.gif"] [/a]

The icon is not aligning correctly. In ie it is above the text line and FF is below the text line.

What should the css be? I did a margin-top: -3px for the icon image and it works in FF, but not in IE. What solution do you guys have?

-thanks

[swa66]

Quirks mode vs. standards mode might throw you off. The old style (quirks mode rendering of web pages was to align images inline with the text line, standards mode doesn't do that anymore and aligns bottoms.)

Try adding some borders or outlines and you should see more clearly what's going on.

I'm sure some will point to the doctype, so you might post it as well.

[Marshall]

This may seem like a pain in the butt, but you could enclose it in a <div>, set the <div>'s height to 15px, assuming your text height fits within that height, and make white-space: nowrap;

<div>[a href="#"] Close [img src="images/icon.gif"] [/a] </div>

Marshall