Overcoming 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.

View Live Code

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.

View Live Code

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

 

 

More Tutorials

See menu on left for more tutorials.