CODEWITHSUNDEEP
htmlcssinternet-explorer-6underline
Kalinin
Kalinin

Reputation: 2519

Underline ie6-bug. Inline element in <a> tag

There is a markup: 

<a href="#">
    lorem ipsum<span>15</span>
</a>

There are styles:

a{
    text-decoration: underline;
}

a span{
    background: #fff;  //To clean the bottom underlining under <span>
}

Works in all interesting me browsers. Except IE6. The bottom underlining under <span> remains.

How to solve this problem without changing a markup.

a span{
    text-decoration: none;
}

Does not work.

Upvotes: 1

Views: 912

Answers (4)

Buhake Sindi
Buhake Sindi

Reputation: 89169

why don't you try?

a span{
    background: none;
    text-decoration: none;
}

I believe this works for all browsers?

Try adding background: none; to the existing CSS tag as shown above. I'll try and see if I can't get this to work on IE6.

Upvotes: 1

Marlorn
Marlorn

Reputation: 529

Try changing your CSS to this:

a span {
    background: #fff;
    display: inline-block;
}

Despite what others have posted, text-decoration: none; does NOT work.

Upvotes: 3

Boldewyn
Boldewyn

Reputation: 82734

To add to Elite Gentleman's answer: Use a conditional statement (prefered) or the underscore hack for targeting IE6 only:

a span {
  _text-decoration: none;
}

Upvotes: 0

spender
spender

Reputation: 120450

Might this work?

a{
    text-decoration: underline;
}

a span{
    background: #fff;  //To clean the bottom underlining under <span>
    text-decoration: none;
}

Upvotes: 0

Related Questions