text-decoration on part of a link

Discussion in 'HTML' started by Tim Streater, Sep 16, 2011.

  1. Tim Streater

    Tim Streater Guest

    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?

    Thanks,

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Sep 16, 2011
    #1
    1. Advertising

  2. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > 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?
    >



    Easily. But you need to distinguish the confusion coming from
    default underlining of links!

    Here is an example where the link underlining is removed, still a
    link.

    <p>
    <a style="text-decoration: none;" href="http://www.example.com">
    <span style="text-decoration: underline;">
    First
    span
    </span>
    <span>
    Second span
    </span>
    </a>
    </p>

    --
    dorayme
    dorayme, Sep 17, 2011
    #2
    1. Advertising

  3. Tim Streater wrote:
    > 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?
    >



    <!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=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>Spans</title>

    <style type="text/css">
    a { text-decoration: none; }

    /* show full link */
    a:hover { text-decoration: underline; }

    /* show spans */
    span { color: red; }

    /* simple when only one span */
    a.onlyone span { text-decoration: underline; }


    /* a little more advanced when more than one */
    a.gotmore span:first-child { text-decoration: underline; }

    </style>

    </head>
    <body>

    <p>
    <a class="onlyone" href="www.example.com">
    <span>Underlinned</span>
    and not underlined
    </a>
    and now with two spans
    <a class="gotmore" href="www.example.com">
    <span>First Underlinned</span>
    and
    <span>Second not underlined.</span>
    </a>
    </p>
    </body>
    </html>




    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 17, 2011
    #3
  4. Tim Streater

    Tim Streater Guest

    In article
    <1.mi.comcast.net>,
    dorayme <> wrote:

    > In article
    > <>,
    > Tim Streater <> wrote:
    >
    > > 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?


    > Easily. But you need to distinguish the confusion coming from
    > default underlining of links!
    >
    > Here is an example where the link underlining is removed, still a
    > link.
    >
    > <p>
    > <a style="text-decoration: none;" href="http://www.example.com">
    > <span style="text-decoration: underline;">
    > First
    > span
    > </span>
    > <span>
    > Second span
    > </span>
    > </a>
    > </p>


    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. Here's an example, with also the definition of the
    "phishtip" class that I add to the <a>:

    <a
    href="http://tracking.newsletter.jessops.com/r/?id=h3e670e3,7d9b56,7da6fd
    &amp;p1=40fc7dab7ed042a99d" _type="mirrorPage" _label="Mirror page"
    style="color:#f14a92; text-decoration:underline;" target="_blank"
    class="phishtip">Click here<span style="text-decoration: none;">This
    link takes you to: tracking.newsletter.jessops.com</span></a>

    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; }

    Sorry about the layout here, but I thought it important to copy what
    Safari displays using the web inspector.

    So I add a <span> with the tip just before the </a>. The <span> has
    display:none until you hover, when it gets display:block. The class is
    added just before the end of the <a> (or added to an existing class
    attribute if there is one).

    So far so good: I hover the mouse over a link and get told what the real
    host is that the link will go to. But, even with the inline style for
    the <span>, it still inherits whatever text-decoration style the <a> has.

    Tested with Safari, iCab, Firefox, Chrome, Opera: only Opera seems to
    pay attention to the inline style. Is this a bug or am I overlooking
    something?

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Sep 17, 2011
    #4
  5. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > 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. Here's an example, with also the definition of the
    > "phishtip" class that I add to the <a>:
    >
    > <a
    > href="http://tracking.newsletter.jessops.com/r/?id=h3e670e3,7d9b56,7da6fd
    > &amp;p1=40fc7dab7ed042a99d" _type="mirrorPage" _label="Mirror page"
    > style="color:#f14a92; text-decoration:underline;" target="_blank"
    > class="phishtip">Click here<span style="text-decoration: none;">This
    > link takes you to: tracking.newsletter.jessops.com</span></a>
    >
    > 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; }


    There are various bits that could be underlined or not
    underlined. There is the main link and there are two parts of the
    text that appears on hover, one is an intro to a path. Even if my
    guess at what you want is wrong, the following should give you an
    idea how to work it, at least this is one way (following yours
    but simplifying a bit):

    <!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>Lines</title>
    <style type="text/css" media="screen">
    a {text-decoration: none;}
    a.phishtip { position: relative; }
    a.phishtip span.linkTextContainer { display: none; }
    a.phishtip:hover span.linkTextContainer {
    display: block;
    position: absolute;
    top: 2em;
    left: 0.5em;
    white-space: nowrap;
    text-decoration: none;
    }
    ..visibleLinkText {text-decoration: underline;}
    ..hoverLinkText {text-decoration: underline;}
    </style>
    </head>
    <body>
    <div>
    <a class="phishtip" href="some.html"><span
    class="visibleLinkText">Click here</span> <span
    class="linkTextContainer">This link takes you to: <span
    class="hoverLinkText">tracking.newsletter.jessops.com</span></span
    ></a>

    </div>
    </body>
    </html>

    Here is another possible you might want:

    <!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>Lines</title>
    <style type="text/css" media="screen">
    a {text-decoration: none;}
    a.phishtip { position: relative; }
    a.phishtip span.linkTextContainer { display: none; }
    a.phishtip:hover span.linkTextContainer {
    display: block;
    position: absolute;
    top: 2em;
    left: 0.5em;
    white-space: nowrap;
    text-decoration: none;
    }
    ..visibleLinkText {text-decoration: underline;}
    </style>
    </head>
    <body>
    <div>
    <a class="phishtip" href="some.html"><span
    class="visibleLinkText">Click here</span> <span
    class="linkTextContainer">This link takes you to:
    tracking.newsletter.jessops.com</span></a>
    </div>
    </body>
    </html>

    --
    dorayme
    dorayme, Sep 17, 2011
    #5
  6. Tim Streater

    Tim Streater Guest

    In article
    <1.mi.comcast.net>,
    dorayme <> wrote:

    > In article
    > <>,
    > Tim Streater <> wrote:
    >
    > > 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. Here's an example, with also the definition of the
    > > "phishtip" class that I add to the <a>:
    > >
    > > <a
    > > href="http://tracking.newsletter.jessops.com/r/?id=h3e670e3,7d9b56,7da6fd
    > > &amp;p1=40fc7dab7ed042a99d" _type="mirrorPage" _label="Mirror page"
    > > style="color:#f14a92; text-decoration:underline;" target="_blank"
    > > class="phishtip">Click here<span style="text-decoration: none;">This
    > > link takes you to: tracking.newsletter.jessops.com</span></a>
    > >
    > > 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; }

    >
    > There are various bits that could be underlined or not
    > underlined. There is the main link and there are two parts of the
    > text that appears on hover, one is an intro to a path. Even if my
    > guess at what you want is wrong, the following should give you an
    > idea how to work it, at least this is one way (following yours
    > but simplifying a bit):


    [snip examples]

    The html I'm modifying is not mine, it arrives, is stored, and then I
    apply some changes to it with a PHP script each time it's displayed. One
    of the changes is to add the tooltip. [1] I don't want to interfere with
    how the link itself is styled (so - underlined or whatever and in
    whatever colour, for example), I just want to ensure that the tooltip
    text is styled as I want.

    [1] I know I could use the title="xxx" attribute but I can't style that
    at all, and it doesn't appear immediately.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Sep 17, 2011
    #6
  7. 17.9.2011 13:05, Tim Streater wrote:

    >> > 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...

    > Here's an example, with also the definition of the
    > "phishtip" class that I add to the <a>:


    Having copypasted it and added suitable markup around (as no URL was
    provided... hint hint), I tested it and saw that it works essentially
    the same way on Firefox, IE, and Opera. So what's the problem? The CSS
    code absolutely positions an inner <span>, so it is not underlined (even
    if you don't explicitly say text-decoration: none).

    > Sorry about the layout here, but I thought it important to copy what
    > Safari displays using the web inspector.


    It would have been important to post a URL and explain what you are
    really trying to achieve.

    > So I add a <span> with the tip just before the </a>.


    So you are not doing this just in CSS, are you?

    > But, even with the inline style for
    > the <span>, it still inherits whatever text-decoration style the <a> has.


    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.

    > Tested with Safari, iCab, Firefox, Chrome, Opera: only Opera seems to
    > pay attention to the inline style. Is this a bug or am I overlooking
    > something?


    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. 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Sep 17, 2011
    #7
  8. Tim Streater

    BootNic Guest

    On Sat, 17 Sep 2011 15:23:30 +0100
    Tim Streater <> wrote:

    [snip]

    > The html I'm modifying is not mine, it arrives, is stored, and then I
    > apply some changes to it with a PHP script each time it's displayed. One
    > of the changes is to add the tooltip. [1] I don't want to interfere with
    > how the link itself is styled (so - underlined or whatever and in
    > whatever colour, for example), I just want to ensure that the tooltip
    > text is styled as I want.
    >
    > [1] I know I could use the title="xxx" attribute but I can't style that
    > at all, and it doesn't appear immediately.


    http://groups.google.com/group/alt.html/browse_thread/thread/1822b045c6795a61


    --
    BootNic Sat Sep 17, 2011 11:54 am
    "No man's life, liberty, or property is safe while the legislature is in
    session."
    *Judge Gideon J. Tucker, 1866.*

    -----BEGIN PGP SIGNATURE-----
    Version: GnuPG v1.4.11 (GNU/Linux)

    iEYEARECAAYFAk50wqsACgkQOcdbyBqMFBFlxACgz0mHMZ+qSlJ4U/Yp+XFSQ4c8
    ovwAnA7dOKGlpYMC3AB7f2jaoIZ2B1Iq
    =Z8Mj
    -----END PGP SIGNATURE-----
    BootNic, Sep 17, 2011
    #8
  9. Tim Streater

    Tim Streater Guest

    In article <j52b7a$tpg$>,
    "Jukka K. Korpela" <> wrote:

    > 17.9.2011 13:05, Tim Streater wrote:
    >
    > >> > 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 <style ...>...</style>.

    > 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.

    > > But, even with the inline style for
    > > the <span>, it still inherits whatever text-decoration style the <a> has.

    >
    > 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.

    > > Tested with Safari, iCab, Firefox, Chrome, Opera: only Opera seems to
    > > pay attention to the inline style. Is this a bug or am I overlooking
    > > something?

    >
    > 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>

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Sep 17, 2011
    #9
  10. Tim Streater

    Tim Streater Guest

    In article <-september.org>,
    BootNic <> wrote:

    > On Sat, 17 Sep 2011 15:23:30 +0100
    > Tim Streater <> wrote:
    >
    > [snip]
    >
    > > The html I'm modifying is not mine, it arrives, is stored, and then I
    > > apply some changes to it with a PHP script each time it's displayed. One
    > > of the changes is to add the tooltip. [1] I don't want to interfere with
    > > how the link itself is styled (so - underlined or whatever and in
    > > whatever colour, for example), I just want to ensure that the tooltip
    > > text is styled as I want.
    > >
    > > [1] I know I could use the title="xxx" attribute but I can't style that
    > > at all, and it doesn't appear immediately.

    >
    > > http://groups.google.com/group/alt.html/browse_thread/thread/1822b045c6795a61 >


    Oh I like that. I like that a lot. That'll simplify my PHP script as the
    tip-text gets added as an attribute inside the <a> rather than as a
    <span> (which solves worrying about an already existing <span>).

    Thanks - I'll incorporate that.

    But hey pssst! Guess what! The text in my tip is *still* underlined!

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Sep 17, 2011
    #10
  11. 17.9.2011 19:18, Tim Streater wrote:

    > I think you didn't read what I wrote.


    I did. But I didn't read your mind clearly enough (just the general
    picture, not the specifics), and I only commented on what you wrote, not
    what I extracted via ESP.

    > 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.


    So this is far from doing things in CSS only.

    > This is not a website,
    > hence no URL. It's an *application*.


    Too bad. If you want others to help you, you need to give them access to
    the application one way or another.

    > 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>.


    Does it? Why are you doing this? If you are about to do something with
    _all_ <a> elements, like adding some content from its attributes as
    visible somewhere, then natural approach, now in the 2010s, would really
    be a CSS-only approach, using generated content. But you haven't
    disclosed anything about the usage environment, so it's impossible to
    say whether using
    :link:after, :visited:after { content: attr(href) ... }
    - with suitable styling added of course - would be feasible.

    > 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.


    So where did it go wrong?

    > Here is my test, which illustrates the problem. You can copy/paste it to
    > a file on your desktop and then double-click it.


    You didn't bother helping to help you by providing an online URL.

    > Here, both
    > the link and the tip are underlined in blue.


    The link is. The tip is not. Of course it can be somewhat difficult to
    distinguish blue underlining from a black background, but astonishgly, I
    was able to modify the background color suitably.

    (You didn't tell which browsers in which environments you tested.)

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Sep 17, 2011
    #11
  12. Tim Streater

    Tim Streater Guest

    In article <j52m38$3me$>,
    "Jukka K. Korpela" <> wrote:

    > 17.9.2011 19:18, Tim Streater wrote:
    >
    > > I think you didn't read what I wrote.

    >
    > I did. But I didn't read your mind clearly enough (just the general
    > picture, not the specifics), and I only commented on what you wrote, not
    > what I extracted via ESP.
    >
    > > 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.

    >
    > So this is far from doing things in CSS only.
    >
    > > This is not a website,
    > > hence no URL. It's an *application*.

    >
    > Too bad. If you want others to help you, you need to give them access to
    > the application one way or another.


    You running OS X? And are you proposing to wade through all 15k lines of
    javaScript and 10k lines of PHP? Why d'you think I posted a simple
    example?

    > > 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>.

    >
    > Does it? Why are you doing this?


    To add a tooltip.

    > If you are about to do something with
    > _all_ <a> elements, like adding some content from its attributes as
    > visible somewhere, then natural approach, now in the 2010s, would really
    > be a CSS-only approach, using generated content. But you haven't
    > disclosed anything about the usage environment, so it's impossible to
    > say whether using
    > :link:after, :visited:after { content: attr(href) ... }
    > - with suitable styling added of course - would be feasible.
    >
    > > 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.

    >
    > So where did it go wrong?
    >
    > > Here is my test, which illustrates the problem. You can copy/paste it to
    > > a file on your desktop and then double-click it.

    >
    > You didn't bother helping to help you by providing an online URL.
    >
    > > Here, both the link and the tip are underlined in blue.

    >
    > The link is. The tip is not.


    Here it is. And when this method is incorporated in my app, the tip
    always has the same text-decoration as the creator of the html caused
    the link to have.

    > Of course it can be somewhat difficult to
    > distinguish blue underlining from a black background, but astonishgly, I
    > was able to modify the background color suitably.
    >
    > (You didn't tell which browsers in which environments you tested.)


    Yes I did. Two or three posts ago. Now, do you have any useful
    suggestions to make or are you going to nitpick all day?

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Sep 17, 2011
    #12
  13. 17.9.2011 23:26, Tim Streater wrote:

    >> (You didn't tell which browsers in which environments you tested.)

    >
    > Yes I did. Two or three posts ago.


    And you would rather refer that way than list them down - as opposite to
    your pointlessly extensive quotations from my texts. If you had listed
    them down, you might have realized how useless it is to mention just
    names of browsers. No version numbers, no platform info, etc. I could
    have specified what I really tested, but it's you who needs help, yet
    refuses to provide relevant information.

    > Now, do you have any useful
    > suggestions to make or are you going to nitpick all day?


    The most useful suggestion would be to say that the approach is
    pointless and most probably does not solve the unspecified problem you
    have. The second in usefulness was my earlier suggestion to consider a
    CSS-only approach. But apparently you have decided to discard useful advice.

    The only useful thing that this messy discussion may have caused is that
    some people may realize how relevant it is
    1) to describe the problem (not just the assumed solution),
    2) to illustrate the problem and approach to solving with with a URL or
    to, and
    3) to specify the browsers by version, platform, and possibly settings
    as soon as it becomes clear that other people don't see the same thing
    as you do even though they use the "same" browser.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Sep 17, 2011
    #13
  14. Tim Streater

    Tim Streater Guest

    In article <j5330g$nmq$>,
    "Jukka K. Korpela" <> wrote:

    > 17.9.2011 23:26, Tim Streater wrote:
    >
    > >> (You didn't tell which browsers in which environments you tested.)

    > >
    > > Yes I did. Two or three posts ago.

    >
    > And you would rather refer that way than list them down - as opposite to
    > your pointlessly extensive quotations from my texts. If you had listed
    > them down, you might have realized how useless it is to mention just
    > names of browsers. No version numbers, no platform info, etc. I could
    > have specified what I really tested, but it's you who needs help, yet
    > refuses to provide relevant information.


    OK - OS X 10.7.1.

    Safari 5.1
    Firefox 6.0
    iCab 4.7.0
    Chrome 8.0.552.231
    Opera 11.51

    > The most useful suggestion would be to say that the approach is
    > pointless and most probably does not solve the unspecified problem you
    > have. The second in usefulness was my earlier suggestion to consider a
    > CSS-only approach. But apparently you have decided to discard useful advice.


    I am using a CSS-only approach. But given that the html I am given
    contains the neither CSS required, nor the tip I'd like to be there,
    then oddly enough I have to put it there. With PHP, as it happens.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Sep 17, 2011
    #14
  15. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > In article
    > <1.mi.comcast.net>,
    > dorayme <> wrote:
    >
    > > In article
    > > <>,
    > > Tim Streater <> wrote:
    > >

    ....
    > >
    > > There are various bits that could be underlined or not
    > > underlined. There is the main link and there are two parts of the
    > > text that appears on hover, one is an intro to a path. ...

    >
    > The html I'm modifying is not mine, it arrives, is stored,...



    Anyway, I have given you a few examples of what could be useful
    to you all having the same basic idea behind it. Perhaps you did
    not see the idea or dismissed my offering out of hand assuming it
    could not possibly help you. Perhaps because I simplified your
    example and you could not see the connection to it?

    My idea was to remove any underlining on the link itself and to
    style the children, this being the simplest, least confusing way.
    By styling the link children, you give back the underlined
    appearance of the original visible link text and you can vary the
    hovering text as you wish, having it all not underlined or partly
    underlined.

    If you *really really* don't want to override the styling of the
    "link itself" *in any way whatsoever*, then you will not want to
    apply my suggestion. But why would you not want to do this in
    respect at least to its probable text-decoration? You already add
    things via your PHP to the link itself, so it is not quite so
    that you cannot add an inline style or a class to the html of the
    thing.

    --
    dorayme
    dorayme, Sep 17, 2011
    #15
  16. Tim Streater

    Tim Streater Guest

    In article
    <1.mi.comcast.net>,
    dorayme <> wrote:

    > Anyway, I have given you a few examples of what could be useful
    > to you all having the same basic idea behind it. Perhaps you did
    > not see the idea or dismissed my offering out of hand assuming it
    > could not possibly help you. Perhaps because I simplified your
    > example and you could not see the connection to it?


    Thanks for those examples but unfortunately there was no improvement.
    Also, I've adopted the approach BootNic kindly mentioned in the link he
    gave to an earlier thread. So I'm using an html-5 custom attribute
    rather than the <span> now, which has simplified matters. But my tip
    still gets the text-decoration of the link and in one instance the
    line-height of the table cell in which the link sits (but that's easy to
    fix).

    > If you *really really* don't want to override the styling of the
    > "link itself" *in any way whatsoever*, then you will not want to
    > apply my suggestion. But why would you not want to do this in
    > respect at least to its probable text-decoration? You already add
    > things via your PHP to the link itself, so it is not quite so
    > that you cannot add an inline style or a class to the html of the
    > thing.


    Since the html is arbitrary, I'm doing a number of things to sanitise it
    that I didn't expect to need to, when I started this project. I thought
    I could just shove the html in an iframe and let Safari get on with it.
    Amongst others, I add target="_blank" to all links and ensure no href is
    empty. I don't want to alter the style of the links, I want to control
    the style of the tip. Overriding the line-height:0 seems to work in my
    little test file but overriding the text-decoration does not.

    I thought of re-installing Safari for Lion, but that seems not to be as
    easy as I was expecting (the downloadable version is for SL). Anyway -
    below is my latest test example. In Safari for 10.7.1, the tip gets the
    same underline as the link.


    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Pure CSS Tooltips</title>
    <style type="text/css">

    [data-phishtip]:hover
    {
    position: relative;
    }

    [data-phishtip]:hover:before
    {
    font-family: verdana;
    font-size: 11px;
    content: attr(data-phishtip);
    position: absolute;
    border-radius: 0.5em;
    top: 2em;
    left: 0.5em;
    white-space: nowrap;
    padding: 0.5em 1em 0.5em 1em;
    background-color: black;
    border: 2px solid black;
    color: white;
    z-index: 1000;
    text-decoration: none;
    line-height: 1em;
    }

    </style>
    </head>

    <body>
    <div>
    <p>Here we have some stuff.</p>
    <p style="line-height: 0">What is a tooltip? <a
    href="javascript:alert('Boo!');" data-phishtip="An
    aiding text that appears just when you roll over with the
    mouse">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>

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Sep 18, 2011
    #16
  17. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > In article
    > <1.mi.comcast.net>,
    > dorayme <> wrote:
    >
    > > Anyway, I have given you a few examples of what could be useful
    > > to you all having the same basic idea behind it. Perhaps you did
    > > not see the idea or dismissed my offering out of hand assuming it
    > > could not possibly help you. Perhaps because I simplified your
    > > example and you could not see the connection to it?

    >
    > Thanks for those examples but unfortunately there was no improvement.


    Why not? I offered you a way that controls the underlining, are
    you saying it does not work or that you do not want to override
    the underlining style of the given link (for a secret reason) and
    then virtually putting it back?


    > Also, I've adopted the approach BootNic kindly mentioned in the link he
    > gave to an earlier thread. So I'm using an html-5 custom attribute
    > rather than the <span> now, which has simplified matters.


    I am not objecting to it But it does not work to do what you
    particularly wanted? I see many lines of styling and you still
    add something to the link element to hook into it.

    ....

    > > If you *really really* don't want to override the styling of the
    > > "link itself" *in any way whatsoever*, then you will not want to
    > > apply my suggestion. But why would you not want to do this in
    > > respect at least to its probable text-decoration? You already add
    > > things via your PHP to the link itself, so it is not quite so
    > > that you cannot add an inline style or a class to the html of the
    > > thing.


    You seem to avoid a direct answer to this? All you are required
    to do is sanitise the link in respect to one particular style,
    the underlining and then putting it back again as if nothing has
    changed. Honestly, no one will know, it happens very quickly, the
    browser is like a fast poker cheat. Why would you not want this
    if it gives you the looks you want? Is there some relevant
    technical reason?

    >
    > ... I don't want to alter the style of the links, I want to control
    > the style of the tip.


    Why not do both?

    <http://dorayme.netweaver.com.au/toolTipLike.html>

    The source of this is certainly not longer than your suggested
    doc text which I have snipped.

    --
    dorayme
    dorayme, Sep 18, 2011
    #17
  18. Tim Streater

    Tim Streater Guest

    In article
    <1.mi.comcast.net>,
    dorayme <> wrote:

    > In article
    > <>,
    > Tim Streater <> wrote:
    >
    > Why not? I offered you a way that controls the underlining, are
    > you saying it does not work or that you do not want to override
    > the underlining style of the given link (for a secret reason) and
    > then virtually putting it back?


    > > Also, I've adopted the approach BootNic kindly mentioned in the link he
    > > gave to an earlier thread. So I'm using an html-5 custom attribute
    > > rather than the <span> now, which has simplified matters.

    >
    > I am not objecting to it But it does not work to do what you
    > particularly wanted? I see many lines of styling and you still
    > add something to the link element to hook into it.


    But I'm doing considerably less work now than with the first attempt.
    And I'm not adding a <span> to the link text, which avoids having to
    worry about the case where there is already a <span> there. As in this
    (real life) example of link text:

    <a etc etc>Shop <span>Now</span></a>

    > You seem to avoid a direct answer to this? All you are required
    > to do is sanitise the link in respect to one particular style,
    > the underlining and then putting it back again as if nothing has
    > changed. Honestly, no one will know, it happens very quickly, the
    > browser is like a fast poker cheat. Why would you not want this
    > if it gives you the looks you want? Is there some relevant
    > technical reason?


    > > ... I don't want to alter the style of the links, I want to control
    > > the style of the tip.

    >
    > Why not do both?
    >
    > <http://dorayme.netweaver.com.au/toolTipLike.html>
    >
    > The source of this is certainly not longer than your suggested
    > doc text which I have snipped.


    The text-decoration that the link comes with could be one of a number of
    options; I don't want to just remove it, and put it back as underline.
    And in your example, you've added:

    a {text-decoration: none;}

    How does that play with:

    a {text-decoration: line-through;}

    that may for all I know appear elsewhere in the html?

    Did you try the example I posted in my previous post? All the browsers I
    listed fail one way or another. Safari, iCab and Chrome don't respect
    the text-decoration. Firefox does but is confused by the line-height:0
    in the example; when I mouse over, the rest of the rendered text shifts
    down. Chrome works well but the second tip does not disappear when I
    mouse out.

    Why are the webkit-based browsers ignoring the text-decoration:none
    styling?

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Sep 19, 2011
    #18
  19. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > > <http://dorayme.netweaver.com.au/toolTipLike.html>
    > >
    > > The source of this is certainly not longer than your suggested
    > > doc text which I have snipped.

    >
    > The text-decoration that the link comes with could be one of a number of
    > options; I don't want to just remove it, and put it back as underline.
    > And in your example, you've added:
    >
    > a {text-decoration: none;}
    >
    > How does that play with:
    >
    > a {text-decoration: line-through;}
    >
    > that may for all I know appear elsewhere in the html?


    Yes, good point. Your aim is to have a general mechanism. If you
    could know in advance, you could, of course, put

    ..visibleLinkText {text-decoration: line-through;}

    instead. Perhaps, if you are so concerned (not sure why?) with
    allowing links simply to be underlined (how often would they be
    text-dec other than underline?), you might consider js to sus out
    how the link is in this regard and then apply the appropriate
    counter-measure as above.

    Anyway, this css way has the further fault of if the css is off,
    it looks a bit disastrous, some tool tip way is probably superior
    but I would not raise your hopes of being able to style it to
    your heart's content, it being pretty browser dependent.


    >
    > Did you try the example I posted in my previous post? All the browsers I
    > listed fail one way or another. Safari, iCab and Chrome don't respect
    > the text-decoration. Firefox does but is confused by the line-height:0
    > in the example; when I mouse over, the rest of the rendered text shifts
    > down. Chrome works well but the second tip does not disappear when I
    > mouse out.
    >
    > Why are the webkit-based browsers ignoring the text-decoration:none
    > styling?


    You talking the one that goes

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Pure CSS Tooltips</title>
    <style type="text/css">

    [data-phishtip]:hover


    ?

    I have had a brief look. If you put the text dec none style on the

    [data-phishtip]:hover

    instead of (or I s'pose in addition to) on

    [data-phishtip]:hover:before

    You will get Safari to not have underlining on the tooltip text.
    Perhaps that is all you want.

    * Have you seen what happens to the tooltip in Opera? The tooltip
    becomes very thin and tall and the text goes down it in a fairly
    unreadable manner.

    * In Safari and FF and iCab it gets cut off at large text sizes,
    the scrollbar across being useless because to get to it one needs
    to stop hovering! Your 'white-space: nowrap' is not helping in
    this.

    Try the fix I suggest a few inches above if Safari is your thing.

    --
    dorayme
    dorayme, Sep 20, 2011
    #19
  20. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > In article
    > <1.mi.comcast.net>,
    > dorayme <> wrote:
    >
    > > In article
    > > <>,
    > > Tim Streater <> wrote:

    >
    > > > Did you try the example I posted in my previous post? All the browsers I
    > > > listed fail one way or another. Safari, iCab and Chrome don't respect
    > > > the text-decoration. Firefox does but is confused by the line-height:0
    > > > in the example; when I mouse over, the rest of the rendered text shifts
    > > > down. Chrome works well but the second tip does not disappear when I
    > > > mouse out.
    > > >
    > > > Why are the webkit-based browsers ignoring the text-decoration:none
    > > > styling?

    >
    > > I have had a brief look. If you put the text dec none style on the
    > >
    > > [data-phishtip]:hover
    > >
    > > instead of (or I s'pose in addition to) on
    > >
    > > [data-phishtip]:hover:before
    > >
    > > You will get Safari to not have underlining on the tooltip text.
    > > Perhaps that is all you want.

    >
    > It is (as Safari is a *component* of my app). That fixes the example -
    > thanks - and many instances too in the "real-life" html but it looks
    > like that if the link has an inline style for text dec underline then
    > that defeats your fix <sob>.
    >


    Now now, don't cry, Auntie Dora has something more for you on
    this, young man:

    [data-phishtip]:hover {
    ....
    text-decoration: none !important;
    }

    --
    dorayme
    dorayme, Sep 20, 2011
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul Furman

    {text-decoration: none} Broken

    Paul Furman, Feb 14, 2004, in forum: HTML
    Replies:
    11
    Views:
    765
    Mark Parnell
    Feb 15, 2004
  2. Desmond

    Text decoration

    Desmond, Aug 25, 2004, in forum: HTML
    Replies:
    21
    Views:
    952
  3. Klaas
    Replies:
    1
    Views:
    712
    Alessandro Zifiglio
    Aug 6, 2006
  4. Old HTML Slinger

    A text decoration question

    Old HTML Slinger, Aug 22, 2006, in forum: HTML
    Replies:
    24
    Views:
    2,609
    Jonathan N. Little
    Aug 26, 2006
  5. Klaas

    Style="text-decoration: line-through"

    Klaas, Aug 6, 2006, in forum: ASP .Net Web Controls
    Replies:
    1
    Views:
    164
    Alessandro Zifiglio
    Aug 6, 2006
Loading...

Share This Page