Jukka K. Korpela said:
If I have something like this:
a.myclass { text-decoration: underline; }
<a href="
http://www.example.com" class="myclass"><span>First >
span</span><span>Second span</span></a>
is it possible with css to have first span be underlined but
second span > *not* underlined?
[...]
OK - here's what I'm trying to do: I receive arbitrary html, which I
then want to go through and add anti-phishing tooltips to each <a>. I do
this just using css.
I'm having difficulties in seeing what you are doing. The initial
question looks clear enough technically, though it's difficult to see
what you're really up to. Basically, if an element has text-decoration:
underline and you want an inner element to lack underlining, then need
to absolutely position the inner element. Relatively positioning it
removes the underline on Opera, but this is apparently a bug. The spec
is rather messy:
http://www.w3.org/TR/CSS2/text.html#decoration
But your clarification makes things somewhat blurry. Can you expect
_arbitrary_ html to contain handly class attributes and inner <span>
markup for all <a> elements? If not, are you really doing this just
using css? Maybe with generated content? As usual, a URL...
I think you didn't read what I wrote. The arbitrary html, having
arrived, is stored locally. For later display, it is then massaged by a
PHP script before being handed to a browser. This is not a website,
hence no URL. It's an *application*. So obviously the PHP script has to:
a) add the <span> somewhere before the </a> and the class just before
the end of the <a>. Since there may already be a class attribute in the
<a> the PHP checks for this and either extends it with my class or adds
a whole class= attribute.
b) add the class definition in the <head>. Indeed, there may be no
<head> or anything before the actual html code starts - in which case
the script just prepends the said:
So you are not doing this just in CSS, are you?
I meant I'm not using JavaScript. Not being that adept with CSS, JS was
my first port of call. But I googled a bit more and found out how to do
it without needing that.
No, text-decoration is never inherited (except if you explicitly set it
to the value inherit, of course). But text-decoration on an enclosing
element may affect rendering in a manner that looks like inheritance.
Yes, and that is what I'm trying to prevent.
This could be a browser version difference, but I doubt that. Rather,
your real page contains something that affects the situation. Please
post the URL.
I have no "real page" or URL, as I've pointed out.
And while waiting for reactions to that, you could test
what happens on your browser when you test with a document containing
just the snippets you posted and whatever minimal markup needs to be
added to make the document valid.
Obviously before modifying my app to provide this new feature, I created
a small test, to see how it might work and adjusted the CSS until it
looked good to me. There are also going to be some more cases to
consider e.g. there may already be a <span> in the <a>, but I'll worry
about such things later. For now, I'm concentrating on the
text-decoration.
Here is my test, which illustrates the problem. You can copy/paste it to
a file on your desktop and then double-click it. Your browser should
then open it and you can hover over the link to see the tip. Here, both
the link and the tip are underlined in blue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Pure CSS Tooltips</title>
<style type="text/css">
a.phishtip
{
position: relative;
}
a.phishtip span
{
display: none;
}
a.phishtip:hover span
{
font-family: verdana;
font-size: 11px;
display: block;
position: absolute;
top: 2em;
left: 0.5em;
white-space: nowrap;
padding: 0.5em 1em 0.5em 1em;
background-color: black;
-webkit-border-radius: 7px;
border: 2px solid black;
color: white;
z-index: 1000;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<p>Here we have some stuff.</p>
<p>What is a tooltip? <a class="phishtip"
href="javascript:alert('Boo!');"><span style="text-decoration: none;">An
aiding text that appears just when you roll over with the
mouse</span>Boo-it</a>.</p>
<p>Here is more stuff and more and more and more and more<br>yet more
crap<br> new lines and so on.</p>
<p>Here is more stuff and more and more and more and more<br>yet more
crap<br> new lines and so on.</p>
</div>
</body>
</html>
