Webkit weird 1px underline text

Question

At http://www.wsl-ltd.co.uk/ I have a special offer icon that is positioned absolutely with some text floating and relative inside.

For some reason, Webkit browsers apply red underlining to some text - I tried everything, but just can't make my life work.

Does anyone know if this is a weird webkit quirk, or is it my CSS? Greetings.

Answer 1

Error in WebKit.

Define text-decoration:none; in the <a> element itself - should help.

Answer 2

The problem is with the styles in the <a> element. I think you can paste the following into CSS to fix this.

 .ie6wrap a {text-decoration:none} 

(I checked it, you use .ie6wrap for only one element, so it should be safe)

If you want more detailed information, CSS is responsible for it:

 a:link, a:visited, a:focus{ color: #d58d31; text-decoration: underline; } 

You seem to remove the underline of the children of this <a> , but Webkit does not work this way because the underline is under <a> , not the child <div> .

Answer 3

You have all the gaps containing the text enclosed in a single <a> tag, so the text is underlined. You need to redefine the styles to handle this or move the <a> tag somewhere else.

Answer 4

This is because these gaps are under

 <a href="contact-us"> 

which has the following style:

 a:link, a:visited, a:focus { color: #D58D31; text-decoration: underline; }