how to set anchor tag text width using css?

Question

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 (because of display: 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.

Solution 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)

Solution 2

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