CSS Cross-browser Compatibility issues with inline elements

Suppose we want to create a button or menu that looks like …

Initial Code

Consider the following code where I have an anchor link wrapping around an image…

We gave this anchor link the class buttonlink so that we can apply a 3px padding and an all-around border.

In Internet Explorer 6 and 7.0 it turns out to be missing the top border…

And in Firefox 1.0 and 2.0 and Opera 9.0, the image is siting too high…

That is because an <a> tag is an inline element and different browsers are having different interpretations as to how to apply padding to an inline element.

Float The Element

If we float the <a> tag, as in …

then it behaves somewhat like a block element.

Here is how it looks in Internet Explorer 6 and 7 and Firefox 1 and Opera 9.