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. Advertisements

  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. Advertisements

  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. Advertisements

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. Scotty

    Weird CSS spacing issue

    Scotty, Feb 13, 2006, in forum: HTML
    Replies:
    4
    Views:
    711
    Scotty
    Feb 14, 2006
  2. Bernhard Sturm

    IE7 beta 3 weird CSS behaviour

    Bernhard Sturm, Jul 15, 2006, in forum: HTML
    Replies:
    11
    Views:
    776
    Bernhard Sturm
    Jul 18, 2006
  3. SBmx
    Replies:
    14
    Views:
    776
    dorayme
    Nov 9, 2006
  4. Imran Sadat
    Replies:
    4
    Views:
    537
    Imran
    Jan 11, 2008
  5. bluebaron
    Replies:
    3
    Views:
    937
    Jonathan N. Little
    Nov 4, 2009
  6. dorayme
    Replies:
    1
    Views:
    778
    richard
    Jan 21, 2011
  7. Beauregard T. Shagnasty

    Re: A Weird Appearance for a Weird Site

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