Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry HREF="#" and dominating A:visited CSS's

    Hello,
    I have a CSS like so:

    A:link { color: #3366CC }
    A:hover { color: #FFCC99 }
    A:active { color: black }
    A:visited { color: #6699FF }

    I then have several lines of html like:

    <a class=main href="#" onClick="MM_openBrWindow('http://www.fncinc.com/','','')">FNC, Inc</a><br>

    All these links are displayed as visited, I am assuming because of the href="#". While this is annoying (anyway around this in the CSS?) what is even more annoying is the A:hover doesn't work on any of my links. So all my links are the same color (#6699FF) and have no hover property.

    I am sure ya'll have run into this before, could ya help out a noob?

    Thanks-Luke

    EDIT
    Got some more info... If I leave out the A:hover line the ugly default browser colours take over only the truely links (those clicked on) and the remainder of the href"#" links respond accordingly to my style sheet. Please help.
    Last edited by lukec; 06-29-2002 at 10:40 PM.

  • #2
    Regular Coder
    Join Date
    May 2002
    Location
    Maine, USA
    Posts
    573
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First some syntax notes:

    You should have your class (main) quoted:

    ...class="main"...

    You should have semi-colons here A:hover { color: #FFCC99;} (not necessary, but a good practice)

    As to the href="#", try using href="javascript:;" in place of the '#' to avoid clicking the link to cause you page's position to change.

    For the visited, they will appear visited after you've clicked them because they've been visited. One thing you can do is set the visited color to the link color(#3366cc).

    For the hover, it should work after you quote your class and add the semi-colons where I noted. I assume you are aware that CSS hover is not supported in NS 4x.

    Make the suggested changes and see if that helps, if you still have difficulty, reply back for further assistance .
    Last edited by boxer_1; 06-29-2002 at 10:52 PM.
    boxer_1
    CodingForums Moderator
    "How did a fool and his money get together in the first place?"

  • #3
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Appease NS 3?

    Thanks a lot. Replacing the "#" with "java script:;" did the trick. I also inserted your other suggestions thoughout to clean up my sloppy syntax/formatting .

    I was sort of aware of the compatibility issues (I am relatively new to this whole gig). My thought was that if they have NS 3 they would be use to seeing screwed up web pages (realize this is really a cover for my lack of know how). The site I am designing for receives light traffic. Statistically, is NS 3 really something I should worry about?

    In a sort of related topic, I have observed programmers like to brag about their program's capatibility and speed, even beyond any noticable difference. I am from a 3d design background, "If the details in the object can't be seen from afar, don't put them in." If a cube passes for a sphere, use the cube. (I am sure this statement is heretic to some and I realize this raises scalibility concerns, but this site isn't going to blow up.) ...then again, maybe I am just jealous.

    No need to ramble like me, but I would like to hear your NS 3 opinions... (again, thanks for your help.)

    -Luke Campbell

  • #4
    New Coder
    Join Date
    Jun 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't worry, no one is going to be using NS3 - unless they're a ninny. You may get a few visitors with NS4 and, as boxer noted, the anchor pseudo-class is only partially supported in NS4. I wouldn't worry too much about that as statistics show NS4 usage is rapidly declining.

    Important: in order to have this work in all other browsers you should place the hover pseudo-class after a:link and a:visited. Also a:active should be placed after a:hover.

    Example:
    a:link { color: #3366CC }
    a:visited { color: #6699FF }
    a:hover { color: #FFCC99 }
    a:active { color: black }


  •  

    Posting Permissions

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