weird CSS problem

Discussion in 'HTML' started by dee_ss2001, Jan 29, 2004.

  1. dee_ss2001

    dee_ss2001 Guest

    Hello all,

    I keep having a weird CSS problem, I wonder if you can tell me if I'm doing
    something wrong.

    Here is the CSS I have been using for a while:
    **start
    ..textNormal {font-family: Arial, Helvetica, sans-serif; font-size: 16px;
    color: #000000}
    ..textNormal A:visited, A:active {COLOR: #063F6B}
    ..textNormal A:hover {BACKGROUND: #17598C; COLOR: #ffffff; text-decoration:
    none}

    ..textBold {font-family: Arial, Helvetica, sans-serif; font-size: 18px;
    color: #000000}
    ..textBold A:visited, A:active {COLOR: #063F6B}
    ..textBold A:hover {BACKGROUND: #17598C; COLOR: #ffffff; text-decoration:
    none}

    ..navigation-bar {font-family: Arial, Helvetica, sans-serif; font-size: 18px;
    text-align: center; }
    ..navigation-bar a:link, a:visited, a:active {COLOR: #063F6B}
    ..navigation-bar a:hover {BACKGROUND: #17598C; COLOR: #ffffff;
    text-decoration: none}

    ..textSmall { font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
    ..textWhite {font-family: Arial, Helvetica, sans-serif; font-size: 16px;
    color: #FFFFFF}
    **end

    All works fine, but I recently decided to have a second navigation bar with
    different colours, so I tried adding an extra bit at the bottom, so the
    whole thing is:

    **start
    ..textNormal {font-family: Arial, Helvetica, sans-serif; font-size: 14px;
    color: #000000}
    ..textNormal A:visited, A:active {COLOR: #063F6B}
    ..textNormal A:hover {BACKGROUND: #17598C; COLOR: #ffffff; text-decoration:
    none}

    ..textBold {font-family: Arial, Helvetica, sans-serif; font-size: 17px;
    color: #000000}
    ..textBold A:visited, A:active {COLOR: #063F6B}
    ..textBold A:hover {BACKGROUND: #17598C; COLOR: #ffffff; text-decoration:
    none}

    ..navigation-bar {font-family: Arial, Helvetica, sans-serif; font-size: 17px;
    text-align: center; }
    ..navigation-bar a:link, a:visited, a:active {COLOR: #063F6B}
    ..navigation-bar a:hover {BACKGROUND: #17598C; COLOR: #ffffff;
    text-decoration: none}

    ..textSmall {font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
    ..textWhite {font-family: Arial, Helvetica, sans-serif; font-size: 17px;
    color: #FFFFFF}
    ..textWhiteSmall {font-family: Arial, Helvetica, sans-serif; font-size: 12px;
    color: #FFFFFF}

    ..alt-nav {font-family: Arial, Helvetica, sans-serif; font-size: 16px;
    text-align: center; color: #000000}
    ..alt-nav a:link, a:visited, a:active {COLOR: #ffffff}
    ..alt-nav a:hover {BACKGROUND: #ffffff; COLOR: #17598C; text-decoration:
    none}
    **end

    The new colours seem to work fine on the second navigation bar, but for
    some reason, the colours of the 'visited' links on the original bar have
    changed. How can this be when nothing has changed there??

    All I can think is that you're only allowed one 'visited' attribute per page
    and it takes the last one in the CSS, but I wouldn't have thought that was
    the case. Any ideas?

    Thanks
    Damian
     
    dee_ss2001, Jan 29, 2004
    #1
    1. Advertising

  2. dee_ss2001

    Eric Bohlman Guest

    "dee_ss2001" <> wrote in
    news:bvat3i$q79n7$-berlin.de:

    > All works fine, but I recently decided to have a second navigation bar
    > with different colours, so I tried adding an extra bit at the bottom,
    > so the whole thing is:
    >
    > **start
    > .textNormal {font-family: Arial, Helvetica, sans-serif; font-size:
    > 14px; color: #000000}
    > .textNormal A:visited, A:active {COLOR: #063F6B}


    That selector is a lot less specific than you think it is. It applies to
    an A:visited that's a descendant (or self) of an element with class
    textNormal, but it also applies to *any* A:active anywhere. The class
    specification doesn't "distribute" over the list of selectors; each comma-
    separated selector stands on its own. IOW, it's just a shorthand for:

    ..textNormal A:visited {COLOR: #063F6B}
    A:active {COLOR: #063F6B}

    What you need to write is:

    ..textNormal A:visited, .textNormal A:active {COLOR: #063F6B}

    You've got quite a few cases of this misunderstanding in your example,
    which are almost certainly causing the problem.
     
    Eric Bohlman, Jan 29, 2004
    #2
    1. Advertising

  3. dee_ss2001

    dee_ss2001 Guest

    "Eric Bohlman" <> wrote in message
    news:Xns947F5C28C4D18ebohlmanomsdevcom@130.133.1.4...
    > "dee_ss2001" <> wrote in
    > news:bvat3i$q79n7$-berlin.de:
    >
    > > All works fine, but I recently decided to have a second navigation bar
    > > with different colours, so I tried adding an extra bit at the bottom,
    > > so the whole thing is:
    > >
    > > **start
    > > .textNormal {font-family: Arial, Helvetica, sans-serif; font-size:
    > > 14px; color: #000000}
    > > .textNormal A:visited, A:active {COLOR: #063F6B}

    >
    > That selector is a lot less specific than you think it is. It applies to
    > an A:visited that's a descendant (or self) of an element with class
    > textNormal, but it also applies to *any* A:active anywhere. The class
    > specification doesn't "distribute" over the list of selectors; each comma-
    > separated selector stands on its own. IOW, it's just a shorthand for:
    >
    > .textNormal A:visited {COLOR: #063F6B}
    > A:active {COLOR: #063F6B}
    >
    > What you need to write is:
    >
    > .textNormal A:visited, .textNormal A:active {COLOR: #063F6B}
    >
    > You've got quite a few cases of this misunderstanding in your example,
    > which are almost certainly causing the problem.
    >


    Thanks for that Eric !!
     
    dee_ss2001, Jan 29, 2004
    #3
    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. dorayme
    Replies:
    1
    Views:
    623
    richard
    Jan 21, 2011
  2. richard
    Replies:
    0
    Views:
    586
    richard
    Jan 21, 2011
  3. richard
    Replies:
    0
    Views:
    618
    richard
    Jan 21, 2011
  4. Beauregard T. Shagnasty

    Re: A Weird Appearance for a Weird Site

    Beauregard T. Shagnasty, Jan 21, 2011, in forum: HTML
    Replies:
    1
    Views:
    440
    Captain Paralytic
    Jan 21, 2011
  5. will
    Replies:
    6
    Views:
    409
    Phrogz
    Dec 27, 2006
Loading...

Share This Page