Web Analytics Made Easy -
StatCounter HREF="#" and dominating A:visited CSS's - CodingForum

Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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.
    lukec
    New to the CF scene
    Last edited by lukec; Jun 29, 2002, 06:40 PM.

  • #2
    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 .
    boxer_1
    New to the CF scene
    Last edited by boxer_1; Jun 29, 2002, 06:52 PM.
    boxer_1
    CodingForum Moderator
    "How did a fool and his money get together in the first place?"

    Comment


    • #3
      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

      Comment


      • #4
        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 }
        Co-Operative Web Development

        Comment

        Working...
        X