how to set anchor tag text width using css?

Question

Hi

I have html and css as below -

    .title {
        display: block; background-color: red;
    }

<a href="#">
    <span class="title">Text</span>
</a>

I could see that the SPAN spans to the 100% of the available width (coz of dispaly: block). Like below

|----------------------------------------------------|
| Text                                               |
|----------------------------------------------------|

In Firefox, I can click anywhere in the above box, and it takes me to the linked page. However, In IE (IE 7) I get the cursor as hand only when I hover over "Text" text only.

What hack I'll have to do to make it work (same as it does in FF) in IE as well?

I tried placing the anchor tag itself (not just the text) in span but it won't work.

Thanks.

Answer 1

Style the anchor and remove the span.

(The problem is due to how some browsers handle elements that are display: block inside elements that are display: inline. You can work around it by styling both the anchor and the span, but the span appears redundant in this example)

Answer 2

for your <a> tag, make the style "display: block; width:100%;"

Answer 3

Definitely, you need to remove the span and apply that class to the anchor tag. I don't think you need to set the width to 100% explicitly, but I could be wrong.

Answer 4

Remove the extra span and place that title class on the link itself. Then add width:100%; to the css.

Less markup is most often better, thats why you should remove the extra span.

Answer 5

you can also using margin or padding