SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot gidday's Avatar
    Join Date
    Jan 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cascading not working (?)

    Hi Folks

    Below you will see a copy of a stylesheet and page that I am working on. My problem is that the float positioning (and other attributes) in #content img { is affecting my class .article img { . The class attributes are not being rendered correctly. They are inheriting the id attributes and ignoring their own.

    A bit of background. Here is the html from the affected page.

    <div id="content">
    <div id="content_heading">
    Welcome
    </div>
    <div id="content_left">
    <div class="article">
    <img src="images/notice_images/3.jpg" />
    <span class="firstletter">A</span>bracadabra
    </div>

    <div class="article">
    <img src="images/notice_images/2.jpg" />
    <span class="firstletter">C</span>ause I can
    </div>
    </div>
    <div id="content_middle">
    <div class="article">
    <img src="images/notice_images/2a.jpg" />
    <span class="firstletter">B</span>efore the first
    </div>

    <div class="article">
    <img src="images/notice_images/1.jpg" />
    <span class="firstletter">D</span>oh!
    </div>
    </div>
    -- other stuff here --

    Here is the section of css causing the problem. This is also affecting a div contained within content that is part styled by another style sheet.

    #content { /* main content */
    float: right;
    width: 800px;
    margin: 10px 15px 20px 0;
    /*border: 1px solid;*/
    }
    html>body #content { /* hack for ff main content */
    margin: 10px 25px 20px 0;
    }
    #content img { /* <--- This one here */
    position: relative;
    float: left;
    margin: 20px 20px;
    border-top: 5px solid #ccc;
    border-left: 5px solid #ccc;
    border-right: 5px solid #808080;
    border-bottom: 5px solid #000;
    }
    #content_heading {
    font-size: 1.8em;
    font-variant: small-caps;
    color: #336600;
    margin: 0 0 5px 0;
    border-bottom: 1px solid #ecc542;
    }
    #content_left {
    position: relative;
    float: left;
    width: 300px;
    margin: 0px 5px;
    }
    #content_middle {
    position: relative;
    float: left;
    width: 300px;
    margin: 0px 5px;
    /*border: 1px solid #000;*/
    }
    #content_right { /* scroller goes in here */
    position: relative;
    float: right;
    height: 700px;
    margin: 10px 0 0 0;
    }
    .article {
    margin: 5px 0;
    min-height: 350px;
    height: auto!important;
    height: 350px;
    }
    .article img { /* <--- is affecting this one here */
    position: relative;
    float: right;
    }

    All help much appreciated.

    Joe

  2. #2
    SitePoint Wizard bronze trophy bigalreturns's Avatar
    Join Date
    Mar 2006
    Posts
    1,295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that an ID is regarded as being more specific than a class in terms of CSS targetting, which is why the ID styles are being used rather than the class ones. You could get the .article styles to be used by being more specific with your selector, i.e.:
    Code:
    #content .article img { 
    // styles
    }
    Should solve your problems.
    "The proper function of man is to live - not to exist."
    Get a Free TomTom


  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Yes id's carry more weight than classes and the exact details of how weights are calculated are covered here.

  4. #4
    SitePoint Zealot gidday's Avatar
    Join Date
    Jan 2007
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.


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
  •