What's the best practice about dealing with corners on a fixed-height element ?

Question

Hi,

Here is my problem. I have to round corners on a

<a href=""></a>

but without using CSS3 properties because my code is supposed to be cross-browser compliant (IE6 and earlier, Safari 3 and earlier).

What I managed to do is :

<span>
  <a href="">My link</a>
</span>

Giving my span a background image (5px width) left align and my a a 150px width image, right aligned so that the content could be fluid.

I still have problems with the rendering under IE7 and I would like to know if there is another cleaner way to do this.

Thanks a lot !

Answer 1

The rendering problems you describe probably come from span being an inline element.

Try using a div or giving the span display: block. You should then be able to specify width and height exactly and uniformly across all browsers.