How to set width of anchor tag text 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 covers 100% of the available width (due to display: block ). As below

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

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

What hack do I need to make it work (as in FF) in IE?

I tried to place the anchor tag itself (and not just the text), but it will not work.

Thanks.

Answer 1

Binding style and range removal.

(The problem is how some browsers handle display: block elements inside display: inline elements. You can get around this by creating both a binding and an interval, but in this example the range seems redundant)

Answer 2

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

Answer 3

Definitely, you need to remove the span and apply this 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 gap and put this header class in the link itself. Then add the width: 100%; to css.

Smaller markup is often better, so you must remove the extra spacing.

Answer 5

you can also use margin or padding

Answer 6

Give the binding style display:block and max-width:30px !important; maximum size can be any

 li a { display: block; height: 30px; max-width: 30px !important; }