Hi! I’m running into an issue where Safari is putting text-decoration:underline in an unexpected place on hover. Wondering if anyone has run into this issue before, and if so, knows how to fix without altering the HTML. The page is using the HTML5 DOCTYPE.
Chrome, Firefox, IE8, IE9 (the way I’d like it to behave on hover. “this is some text” gets “text-decoration:underline;”):
Safari 5.1.7 (notice “left” and “right” are getting “text-decoration:underline;” applied on hover)
HTML:
<a href="#">
<p><span>Left</span> This is some text <span>Right</span></p>
</a>
CSS:
a {
display:block;
height:300px;
width:300px;
background:#d4d4d4;
text-decoration:none;
color:black;
}
a p {
position:relative;
}
a span {
position:absolute;
top:200px;
color:#BF6E30;
}
a:hover p {
text-decoration:underline;
}
a:hover p span {
text-decoration:none;
}
I would hazard a guess that Safari is correct because the text-decoration is on the p element and not on the span. Targeting the span should have no effect.
I think you will need additional html to fix this and apply a wrap around the text that needs the underline.
Would someone mind taking another look at the problem posed by the author?
Just looking at the post, it seems to me that Safari has a problem.
Add “text-decoration:underline” into the properties for “a span {}”
In FF(whatever the latest is) and IE8, you will see the underlines “swap” as the mouse hovers over the area of the anchor; so the span in the last command is indeed being targeted.
Isn’t the “p” just an element in the path to the “span”?
What paul was trying to say was that EVEN if it did work, it wasnt the way the SPECIFICATIONS describe how it should function, this would make it a BUG and that specific brows thus not compliant to the standard. When coding your goal should be to comply with the standard.
BTW, I tested it FF 3.5,3.6, 5, 10 on macs same issue; Opera however exhibits the behavior as would have been expected by the OP.
Isn’t the “p” just an element in the path to the “span”?
the simple answer is NO.
P is the containing element, but within the P is the ANONYMOUS inline element ( the words “this is some text”) and although this element cannot be targeted directly and it still must be taken in to account in some situations ( such as the one described in the OP)
In short the inconsistency we are seeing is that some VERSIONS of SOME BROWSERS let the anonymous element inherit all the proeprties in questions , other UAs dont. Alas, this is why wee need standards.
Thank you for the reply and explanation. Guess I’m having a problem visualizing the relationships. Would it be possible for you to show what the code should look like with a standards-compliant browser? (Code that would act like the abnormal behavior presently exhibited by the majority of browsers.) Your explanation seems good; but I don’t know how to translate it into standards-compliant code… so I could compare the good to the no-so-good. OP = Order of Precedence? If not, thanks for the time you’ve given me.
text-decoration was only applied to the p element.
Therefore all text in the p element should have an underline.
text-decoration is not inherited therefore the span has no text-decoration rules applied and therefore cannot be turned off.
Its the same reasoning that people try to turn the text-decoration off on linked images by addressing the image and wonder why it doesn’t work (in most browsers); the reason is the same and it is the anchor that has the text-decoration not the image. The image just sits on top of the underline.
To make it even simpler imagine this code.
p { background:red }
p span { background:transparent }
<p>This is some text <span>(and this is text in a span)</span></p>
Working on the same assumption as the text-decoration rule in the OP’s original code would you expect the span to have no background now! Of course not. The span sits on the background and therefore has a red background but the spans background is already transparent just as the text-decoration for the span should already be none the (default).
You can change the colour of the span to white of course but you cannot “turn off” the red colour and allow the body background to show through the span.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
p { background:red }
span { background:transparent }
</style>
</head>
<body>
<p>This is some text <span>(and this is text in a span)</span></p>
</body>
</html>
The issue has nothing to do with text-decoration as such and the reason for the difference is that the span was absolutely placed and some browsers just lose the text-decoration because absolute elements are removed from the flow and consider them as not part of the flow for the underline.
I can’t thank you enough for being so generous with your time and knowledge, and for expressing yourself so very well.
I was completely unaware of that side-effect of “position:absolute” caused by css standards non-compliance in so many browsers. Would have never thought to consider something like that. That was the key. With that, everything else fell into place.
It is exhilarating to actually gain insight into how this stuff behaves. Wish I had wings! OK, maybe a better memory would be more practical. Nevertheless, exhilaration feels good!
