Creating neat external link icons AND being W3C friendly

  • Barrowed from the NuclearMoose (thanks, btw — check’s in the mail), I snatched this piece of CSS for my site.

    —

    /* External links */
    #rightCol a[href^="http:"] {
    background: url(/images/TornPaper/extlink.gif) right center no-repeat;
    padding-right: 10px;
    }
    #rightCol a[href^="https://stephen.yeargin.com"] {
    background: inherit;
    padding-right: 0px;
    }

    —

    [Note: #rightCol is where my posts go, instead of #container. Pretend it’s universaly applied.]

    Not only is it not working on my browser (Firefox), but it’s also failing on the CSS validator. From what I’ve read so far, the selector property hasn’t dried yet from it’s RC state.

    The readout:

    Combinator *= between selectors is not allowed in this profile or version

    So to get to the point of this, I’ve implemented the external icon link as a class (class='extlink')before, but it put an ugly underline all the way under the icon. I want to get rid of this and stay current-standards compliant. Any thoughts?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Stephen Yeargin

    (@yearginsm)

    An update of sorts … I fixed the stylesheet reference so that it properly works in Firefox (a psuedo-CSS3 compliant browser) but will not work in Internet Exploer. I suppose this is simply to be expected in the Redmond Kingdom.

    On the subject of CSS validators, you must manually switch the profile on the W3C validator in order to properly check CSS3. I was using the simple referrer link.

    As for the underline issue, it stemmed from having the a stylesheet to use a bottom border instead of the text-decoration : underline. My goof.

    Yearginsm,
    Actually, I wish I would have know you were going to do this. I would have told you that it won’t work in IE so you wouldn’t have wasted your time trying. :\

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Creating neat external link icons AND being W3C friendly’ is closed to new replies.