Can't override CSS class!!!

Discussion in 'HTML' started by Jibba Jabba, Feb 14, 2004.

  1. Jibba Jabba

    Jibba Jabba Guest

    I have created a custom CSS class, which specifies a certain link color. I
    then placed it in a "td".

    After the above td, I created another table nested inside. In the inside
    table I tried to override the top one's link color attribute. However it's
    just not working. Does anyone know how I can override a css class?
    Jibba Jabba, Feb 14, 2004
    #1
    1. Advertising

  2. Jibba Jabba

    Els Guest

    Jibba Jabba wrote:

    > I have created a custom CSS class, which specifies a certain link color. I
    > then placed it in a "td".
    >
    > After the above td, I created another table nested inside. In the inside
    > table I tried to override the top one's link color attribute. However it's
    > just not working. Does anyone know how I can override a css class?


    Did you put table table td a:link{} or td table td a:link{}?
    Or even table td table td a:link{}?

    Difficult to see what's wrong, without seeing the code :)


    --
    Els

    Mente humana é como pára-quedas; funciona melhor aberta.
    Els, Feb 14, 2004
    #2
    1. Advertising

  3. Jibba Jabba

    Paul Furman Guest

    Jibba Jabba wrote:

    > I have created a custom CSS class, which specifies a certain link color. I
    > then placed it in a "td".
    >
    > After the above td, I created another table nested inside. In the inside
    > table I tried to override the top one's link color attribute. However it's
    > just not working. Does anyone know how I can override a css class?


    I just got this working:

    a {text-decoration: none; font-weight: bold;}
    a:link {color: #333399;}/*#6633CC*/
    a:visited {color: #9B4457;}
    a:hover {color: #339966;}
    a:active {color: red;}

    a.hidden {text-decoration: none; font-weight: normal;}
    a.hidden:link {color: #444444;}
    a.hidden:visited {color: #444444;}
    a.hidden:hover {color: #339966;}
    a.hidden:active {color: #444444;}

    /* note: #444444 is a dark grey/black */

    <a href="http://" class="hidden">
    only turns a color when hovering

    <a href="http://">
    follows the top global rule
    Paul Furman, Feb 14, 2004
    #3
  4. Jibba Jabba

    Jibba Jabba Guest

    > Difficult to see what's wrong, without seeing the code :)

    Ok below is the code. I finally figured out that the order of the CSS
    classes mattered, but why should that be so? Try switching the CSS classes
    tgroupsblack and tcat, then see how the output html completely changes. One
    with white link font, and the other with black link font as it's supposed to
    be.

    Why is this happening? Is this normal behavior of CSS?


    CODE:


    <HTML>
    <HEAD>




    <style type="text/css">
    <!--

    ..tgroupsblack
    {
    color: #000000;
    font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica,
    sans-serif;
    }
    ..tgroupsblack a:link
    {
    color: #000000;
    text-decoration: none;
    font: bold 10pt;
    }
    ..tgroupsblack a:visited
    {
    color: #000000;
    font: bold 10pt;
    text-decoration: none;
    }
    ..tgroupsblack a:hover, .tgroupsblack a:active
    {
    color: #000000;
    text-decoration: underline;
    }

    ..tcat
    {
    background: #9999FF;
    color: #FFFFFF;
    font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica,
    sans-serif;
    }
    ..tcat a:link
    {
    color: #FFFFFF;
    text-decoration: none;
    }
    ..tcat a:visited
    {
    color: #FFFFFF;
    text-decoration: none;
    }
    ..tcat a:hover, .tcat a:active
    {
    color: #FFFF66;
    text-decoration: underline;
    }

    -->
    </style>




    </HEAD>
    <BODY>

    <table cellpadding="6" cellspacing="1" border="0" width="100%">
    <tbody>
    <tr align="center">
    <td class="tcat" align="left">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td bgcolor="#FFFFFF" colspan="2">
    <div align="right" class="tgroupsblack"><a href="link">Link
    that doesnt show up</a>sdf</div>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </tbody>
    </table>


    </BODY>
    </HTML>
    Jibba Jabba, Feb 14, 2004
    #4
  5. Jibba Jabba wrote:

    >> Difficult to see what's wrong, without seeing the code :)


    > Ok below is the code. I finally figured out that the order of the CSS
    > classes mattered, but why should that be so?


    Why shouldn't it matter? How else would you resolve conflicting
    instructions?

    > font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica,


    Uh Oh, using points for font sizes is a really bad idea.
    http://css-discuss.incutio.com/?page=UsingPoints


    > .tgroupsblack a:link


    A link that is a descendent of an element with class of tgroupsblack (You
    should probably put some more thought into your class names. Aim to
    describe the meaning, not the appearence, it will make things easier if you
    decide to change the look later).

    > .tcat a:link


    A link that is a descendent of an element with class of tcat.


    > <td class="tcat" align="left">
    > <div align="right" class="tgroupsblack"><a href="link">Link
    > that doesnt show up</a>sdf</div>


    This link is a descendent of an element with class 'tcat', but is is also a
    descendent of class 'tgroupsblack'.

    Each instruction is equally specific.

    What should it do when the instructions conflict?

    It takes the newest (i.e. last) matching instruction.

    --
    David Dorward <http://dorward.me.uk/>
    David Dorward, Feb 14, 2004
    #5
  6. Jibba Jabba

    Jibba Jabba Guest

    > > <td class="tcat" align="left">
    > > <div align="right" class="tgroupsblack"><a

    href="link">Link
    > > that doesnt show up</a>sdf</div>

    >
    > This link is a descendent of an element with class 'tcat', but is is also

    a
    > descendent of class 'tgroupsblack'.
    >
    > Each instruction is equally specific.


    I'd always thought that CSS takes the nearest instructions when encountering
    conflicts, but I guess it does it by order first.

    Btw, thanks for your various tips. Will be looking into my code more
    closely.
    Jibba Jabba, Feb 14, 2004
    #6
  7. Jibba Jabba

    Richard Guest

    Jibba Jabba wrote:

    > I have created a custom CSS class, which specifies a certain link color.
    > I then placed it in a "td".


    > After the above td, I created another table nested inside. In the inside
    > table I tried to override the top one's link color attribute. However
    > it's just not working. Does anyone know how I can override a css class?



    alt.binaries.html is now available for posting working code examples.
    If your service does not carry it, ask them to.
    Richard, Feb 14, 2004
    #7
  8. In article <>,
    "Jibba Jabba" <> wrote:

    > > > <td class="tcat" align="left">
    > > > <div align="right" class="tgroupsblack"><a

    > href="link">Link
    > > > that doesnt show up</a>sdf</div>

    > >
    > > This link is a descendent of an element with class 'tcat', but is is also

    > a
    > > descendent of class 'tgroupsblack'.
    > >
    > > Each instruction is equally specific.

    >
    > I'd always thought that CSS takes the nearest instructions when encountering
    > conflicts, but I guess it does it by order first.


    What do you mean by 'nearest'?

    --
    | Andrew Glasgow <amg39(at)cornell.edu> |
    | "SCSI is *NOT* magic. There are *fundamental technical reasons* why it |
    | is necessary to sacrifice a young goat to your SCSI chain now and then." |
    | -- John Woods |
    Andrew Glasgow, Feb 15, 2004
    #8
  9. Jibba Jabba

    Jibba Jabba Guest

    > What do you mean by 'nearest'?

    Nearest as in, the closest CSS class to the link in question, meaning if
    there were one class set for a TD but then there was a DIV declaring another
    class, the one in the DIV would take precedence since it was immedate to the
    text in question.

    For example:

    <td class=A>
    <div class=B>some text</div>
    </td>


    Shouldn't B override A?
    Jibba Jabba, Feb 17, 2004
    #9
  10. Jibba Jabba

    Mark Parnell Guest

    On Mon, 16 Feb 2004 18:52:58 -0800, "Jibba Jabba"
    <> declared in alt.html:

    > <td class=A>
    > <div class=B>some text</div>
    > </td>
    >
    > Shouldn't B override A?


    That depends on your CSS file. Which is defined last? See my reply to
    you in your latest thread ("CSS Problem").

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Feb 17, 2004
    #10
  11. In article <>,
    "Jibba Jabba" <> wrote:

    > > What do you mean by 'nearest'?

    >
    > Nearest as in, the closest CSS class to the link in question, meaning if
    > there were one class set for a TD but then there was a DIV declaring another
    > class, the one in the DIV would take precedence since it was immedate to the
    > text in question.
    >
    > For example:
    >
    > <td class=A>
    > <div class=B>some text</div>
    > </td>
    >
    >
    > Shouldn't B override A?
    >
    >


    --
    | Andrew Glasgow <amg39(at)cornell.edu> |
    | "SCSI is *NOT* magic. There are *fundamental technical reasons* why it |
    | is necessary to sacrifice a young goat to your SCSI chain now and then." |
    | -- John Woods |
    Andrew Glasgow, Feb 17, 2004
    #11
  12. Jibba Jabba

    brandondrury

    Joined:
    Sep 30, 2007
    Messages:
    1
    I'm curious when conflicting instructions would ever arise in CSS / html.
    I thought css always took the closest tag.

    For example:
    HTML:
    <style>
    #mydiv {color: #ffffff}
    body {color: #000000}
    </style>
    
    <body>
    <div id="mydiv">bla bla bla</div>
    </body>
    
    Obviously, in this case, "bla bla bla" will be white even though the body tag says that all text should be black. Isn't this how it is always supposed to work?

    I'm not questioning your knowledge, I'm just trying to understand css better as I'm in that "know just enough to be dangerous" phase.

    Brandon
    brandondrury, Sep 30, 2007
    #12
    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. Andreas Paasch

    CSS override trouble

    Andreas Paasch, Jul 10, 2003, in forum: HTML
    Replies:
    3
    Views:
    8,395
    PeterMcC
    Jul 10, 2003
  2. Nocturnal
    Replies:
    3
    Views:
    612
    Toby Inkster
    Jul 7, 2006
  3. shapper

    Override Css Class

    shapper, Feb 24, 2008, in forum: ASP .Net
    Replies:
    1
    Views:
    3,255
    Peter Bucher [MVP]
    Feb 24, 2008
  4. jelle feringa

    Can't override class |__new__

    jelle feringa, Mar 5, 2009, in forum: Python
    Replies:
    6
    Views:
    296
    jelle feringa
    Mar 5, 2009
  5. Jer A
    Replies:
    2
    Views:
    161
    Dan Zwell
    May 24, 2007
Loading...

Share This Page