SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast schwim's Avatar
    Join Date
    Jan 2005
    Location
    Western NC, US
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stopping table from inheriting css properties

    hi there everyone,

    I've placed a table in the center of a wordpress page and it's inheriting traits that I'd rather it wouldn't, namely it's got a border and mouse-over effect. I'm trying to get it to actually be a transparent table with no border or mouse-over effect.

    the page in question: http://www.bluemoonelise.net (center of the page)

    I'm having problems figuring out how to assign these traits to the table I'm making. I would be very appreciative of any help you might be able to provide!

    thanks,
    json
    If at first you don't succeed, then skydiving's not for you.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The easiest way would be to add a class to the table and then over-ride the existing styles from there.

    In the context you have you could use #post-8 as a hook but I guess that might change.

    Code:
    #post-8 table,#post-8 td{
    border:none;
    background:transparent;
    }
    #post-8 tr:hover,#post-8 td:hover{background:transparent}

  3. #3
    SitePoint Enthusiast schwim's Avatar
    Join Date
    Jan 2005
    Location
    Western NC, US
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    The easiest way would be to add a class to the table and then over-ride the existing styles from there.

    In the context you have you could use #post-8 as a hook but I guess that might change.

    Code:
    #post-8 table,#post-8 td{
    border:none;
    background:transparent;
    }
    #post-8 tr:hover,#post-8 td:hover{background:transparent}
    Thanks a bunch for the reply. I'm having a problem implementing the class, however.

    If you look at the page, you can see that I've added the css under the class "transtable" then altered the table to include

    class='transtable'
    When I look at the page, the borders, backgrounds and hover-over traits still exist however. I even tried adding class='transtable' to every element, table, tbody, tr and td, but the problem persists.

    Any thoughts on why it's not working? Did I implement it incorrectly?

    Thanks a bunch for your time!
    If at first you don't succeed, then skydiving's not for you.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Paul's CSS would have worked if you'd just put that in. But adding a class to the table is not powerful enough on its own to override some of the other styles. But you could do it with an id instead.

    Remove all those "transtable" classes (a terrible idea, anyway!) and just have one id on your table:

    Code:
    <table id="transtable" width="100%" border="0" cellspacing="0" cellpadding="0">
    
    </table>
    Then paste this code into you CSS file:

    Code:
    #transtable, #transtable td{
      border:none;
      background:transparent;
    }
    
    #transtable tr:hover, #transtable td:hover {
      background:transparent;
    }

  5. #5
    SitePoint Enthusiast schwim's Avatar
    Join Date
    Jan 2005
    Location
    Western NC, US
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Paul's CSS would have worked if you'd just put that in. But adding a class to the table is not powerful enough on its own to override some of the other styles. But you could do it with an id instead.
    Hi there and thanks very much for your help. It's working fine now. I was wondering if I could ask you a couple questions however to help me understand the issue a little bit better:

    1) Why would the original code have worked without any changes to the html? What about "post-8" that makes it work this way?

    2) Why could class or style not change the table, but id would? Is it a hierarchy of power, meaning class will set traits but not override any while ID will override everything?

    Thank you both very much for all your help.
    If at first you don't succeed, then skydiving's not for you.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by schwim View Post
    Why would the original code have worked without any changes to the html? What about "post-8" that makes it work this way?
    The HTML had everything in place that was needed, including hooks for styling. #post-8 is an id that—like any id or class—can be referenced for styling the element to which it applies or any child elements of that element. #post-8 was a handy hook for getting the job done, that's all. Paul's concern was that this id might change at some time, as it looks like an id inserted by a CMS that may not be there later on ... but we are only guessing there.

    Why could class or style not change the table, but id would?
    There's an important aspect of CSS called "specificity". If there are two or more conflicting style rules on an element, there is a pecking order that determines which wins out. IDs carry more weight than classes, but there's more to it than that. I didn't check, but whatever other rules were applying to that table were too powerful to be overridden by a simple class on the table, but an ID had the extra weight to override them.

    In general, it's better to use existing hooks (e.g. #post-8) than to include new hooks every time you want to add new styling. It makes for more efficient and lean code. For example, if you have a <ul> menu in a <div class="head">, rather than give the <ul> a special class, just reference it with

    .head ul { ... }

    Hope that all makes some kind of sense.

  7. #7
    SitePoint Enthusiast schwim's Avatar
    Join Date
    Jan 2005
    Location
    Western NC, US
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for taking the time to explain it to me. It's very much appreciated!
    If at first you don't succeed, then skydiving's not for you.


Bookmarks

Posting Permissions

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