CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
TigerTiger
TigerTiger

Reputation: 10806

how to set anchor tag text width using css?

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.

Upvotes: 7

Views: 36993

Answers (6)

Himani
Himani

Reputation: 173

Give a style to anchor of display:block and max-width:30px !important; max-width size can be any

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

Upvotes: 0

dipen
dipen

Reputation: 1

you can also using margin or padding

Upvotes: 0

corymathews
corymathews

Reputation: 12619

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943470

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)

Upvotes: 17

Alex Morales
Alex Morales

Reputation: 1191

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.

Upvotes: 0

Rik Heywood
Rik Heywood

Reputation: 13972

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

Upvotes: 8

Related Questions