SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast morgion's Avatar
    Join Date
    Jun 2002
    Location
    Fargo, ND
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nesting and link pseudo classes

    I have the following HTML:
    PHP Code:
    <div id="leftnav"><ul id="bread">
    <
    li class="first"><a href="http://creativekitchenonline.com/"><span class="dot"></span>Home</a></li><li><span class="dot"></span>Another</a></li>... 
    I want to set the link pseudo classes (a:link, a:hover, etc.) to apply underlines to the text (i.e. "Home") but NOT to the

    However, I'm having an impossible time trying to do this. The following CSS will make the yellow, but it won't remove the underline.

    Code:
    ul#bread a:link span.dot {
    	text-decoration: none;
    	color: yellow;
    }
    Is what I'm trying to do even possible?
    Last edited by morgion; May 24, 2003 at 10:14.
    Lord Morgion
    Paranoia is just reality on a finer scale. - Strange Days
    [ MacOS X | Mozilla | 1280 x 854 (15" PowerBook G4) | Millions ]
    [ www.ambientshadow.com | www.gerbilmechs.com | www.gogeek.org ]

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not move the outside the <a> ?

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fwiw, you haven't 'opened' your second <a> tag
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Mozilla1.2+, Netscape6.2+ and Opera6+ won't let you override the underline link definitions in the anchor tag by using a span. However IE6 will let you do it (as long as you put in the opening <a> tag that Bill mentioned).

    Jofa's solution would be the sensible way to do it.

    Code:
    <ul> 
    <li><a href="#">Home</a></li>
    <li><a href="#">Another1</a></li>
    <li><a href="#">Another2</a></li>
    <li><a href="#">Another3</a></li>
    </ul>
    Hope this helps.

    Paul

  5. #5
    SitePoint Enthusiast morgion's Avatar
    Join Date
    Jun 2002
    Location
    Fargo, ND
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill: Oops. The <a> is there in the real page; it just got left out in the posting.

    jofa: I want the in the link for a few reasons.
    1) I'd like the to change color on :hover, :visited, and :active and have the text be underlined on :hover, etc.
    2) From a usability standpoint, I wanted the whole line of text act as a link for user intereaction (i.e., :hover) and increase the target area that can be clicked.
    3) Beyond the previous rationalization reasons, I've found something I want to do but can't, and I'm being petulant.

    Paul: Good to know that IE is in the minority. I guess I'll just cave in and move the outside the link. *sigh* I have been defeated. I think I'll to whine in a corner now.

    Thanks!
    Lord Morgion
    Paranoia is just reality on a finer scale. - Strange Days
    [ MacOS X | Mozilla | 1280 x 854 (15" PowerBook G4) | Millions ]
    [ www.ambientshadow.com | www.gerbilmechs.com | www.gogeek.org ]

  6. #6
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Can't you use script to change color for the <li> onmouseover etc instead?
    2) Usability... if the whole line of text should act like a link, shouldn't the whole line be a link then, and v.v.
    I mean, if you really want to confuse users, you can make normal text underlined & blue & change cursor etc (looks like a link, but isn't)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,526
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Not exactly the effect you wanted but couldn't you use two links.

    e.g.
    Code:
    <li><a href="#" style="text-decoration:none"></a><a href="#">Home</a></li>
    Paul

  8. #8
    SitePoint Enthusiast morgion's Avatar
    Join Date
    Jun 2002
    Location
    Fargo, ND
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jofa:
    1) I could use a script, but that would be nasty. *blech* My whole reason for going full CSS is to make the site clean and sleek; a script to do something relatively minor like that seems just wrong.
    2) Well, ya got me there; I guess it should all look like a link, except that it doesn't look very good that way. At least it doesn't look that good to me. Home

    Paul:
    The problem with two links is that if they mouse over the , it won't activate the styles on the text.
    Lord Morgion
    Paranoia is just reality on a finer scale. - Strange Days
    [ MacOS X | Mozilla | 1280 x 854 (15" PowerBook G4) | Millions ]
    [ www.ambientshadow.com | www.gerbilmechs.com | www.gogeek.org ]

  9. #9
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had a play around and there doesn't seem to be any clean css1/css2 method that will do what you are after.
    It could probably be done with a bit of trickery, but fwiw, I think the effect is so minor that I wouldn't bother to keep trying.
    I'd simply either leave the out of the link or have it all in together (and all effected by the pseudo-class declarations).

    There's alot to be said for keeping things simple.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  10. #10
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Bill Posters
    I've had a play around and there doesn't seem to be any clean css1/css2 method that will do what you are after.
    how's about simply doing
    Code:
    #bread li:before {
        content: "";
        color: yellow;
    }
    
    
    <ul id="bread">
    <li><a href="#">Home</a></li>
    <li><a href="#">Another</a></li>
    </ul>
    (ok, will probably not work in IE, but any other CSS2 compliant browser should be able to do it...)
    redux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  11. #11
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    (ok, will probably not work in IE, but any other CSS2 compliant browser should be able to do it...)
    No it doesn't

    And how big was the market share of those bloody browsers again ?

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  12. #12
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't think of it in terms of browser market share, but more in terms of the browser 'ideology' share.

    W3C is the single most influential body in the web today.
    Browser developers recognise that and have gradually (with varying speed) been getting their act together.
    Every browser available is moving *towards* better W3C standards compliance.
    The one point where all major browsers meet (or will meet) is in their ability to handle compliant code correctly.

    So, imho, it's better to use a standards compliant method now* and wait for those dragging their heels (i.e. IEWin) to catch up (which they will).
    (* unless you've made the fundamental mistake of making 'mission-critical' features browser-specific towards a single browser.)


    ...all imho, of course.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  13. #13
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well it all depends who one is coding for I guess.

    Don't get me wrong, the fact that IE browsers are lagging behind in standard compliancy is rather dissapointing (putting it mildly ) but if one is coding for the real world one cannot disregard them.

    So one is left coding to standards, the standards that are supported widely. Wanting it to be different (and I wish it was) doesn't change a thing. All we can do is wait for the day IE catches up.

    What I try to do, and I'm still learning here, is to keep my xhtml as neat as possible and put the (standard compliant) hacks in the stylesheet. Then when that beautifull day comes I only have to change the one stylesheet.

    And eh... ideology!? Doesn't have a place in a technical discussion imho.

    Obviously... imho

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  14. #14
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    And eh... ideology!? Doesn't have a place in a technical discussion imho.

    Obviously... imho

    Rik
    I'm think that the W3C and a great many others would disagree with you on that point.

    Whether it's a pure business model or altruistic accessibility doctrines- Ideology is the master; technology the servant.

    ...but now we're getting away from the point.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  15. #15
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works in IE 6/XP and Mozilla 1.4b:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
    <html xmlns=http://www.w3.org/1999/xhtml xml:lang="en" >
    <head>
    <style type="text/css">
    #bread {
    list-style:none;
    display:inline;
    }
    #bread li {
    display:inline;
    }
    #bread li a {
    text-decoration:none;
    }
    #bread li a span {
    text-decoration:underline;
    }
    </style>
    </head>
    <body id="Body">
    <ul id="bread">
    <li><a href="http://www.example.com">&gt;&gt;&nbsp;<span>Link One</span></a></li>
    <li><a href="http://www.example.com/two">&gt;&gt;&nbsp;<span>Link Two</span></a></li>
    </ul>
    </body>
    </html>

  16. #16
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KillAllDash9
    Works in IE 6/XP and Mozilla 1.4b
    Nice one!
    Quote Originally Posted by Bill Posters
    I'm think that the W3C and a great many others would disagree with you on that point.

    Whether it's a pure business model or altruistic accessibility doctrines- Ideology is the master; technology the servant.

    ...but now we're getting away from the point.
    We are a bit, yes. But still I can't resist to go even further... .

    Maybe it's because the word 'ideology' creeps me out somewhat or because of my technical background (amongst others, industrial automation)...

    I would hope to think that technologies would be based on idea's rather then on ideologie. The distinction between the two, as I see it, is that an idea can be (partially or completely) wrong, an ideology never is, not according to its proponents anyhow.

    'Ideologie' does not equate 'good'. After all, fascism (to name but one) is an ideology...

    I think I'll stop rambling now.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •