SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Noobie class question

    Hi and thanks in advance for any help.

    I am building my own Joomla site and learning CSS a little as i go. I am using copies of the same module to display different images on different pages.

    I want different padding on different pages and the piece of CSS that controls this module is

    .feature-module {color: #555; padding-bottom:25px;}

    The module i use has a module class suffix so i can individually style each time i use the module. So i gave it a class "articleimage" and tried both of these

    #articleimage {color: #555; padding-bottom: 0px;}
    #articleimage.feature-module {color: #555; padding-bottom: 0px;}

    neither work....can anyone help

    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved this....How do i mark it as solved?

    Thanks

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,094
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    You can't (mark a thread as solved).
    Just leave it as is
    Maybe you could post your own solution in case people have the same question and are following this thread for an answer

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Sorry we missed your post but glad you solved the problem anyway and as mentioned above we don't close posts but like the OP to post their solution when they find the answer before we do

    #articleimage.feature-module
    If you are supporting IE6 then concatenated id.classname (or classname.classname) dot notation structures are very buggy in IE6. What's worse is that they may appear at first to work but in fact they don't and are best avoided if IE6 support is required.

    If not then ignore the above as they are quite useful also

    An alternative would be to make the class more important than the id by either creating a longer path name using an id from a parent higher up the html, assuming there is an id available somewhere (which is quite likely), or if not by using important on the class itself.

    Code:
    .feature-module {padding-bottom:25px!important;}
    That would ensure that the class has more weight but !important can be a double edged sword and should be used wisely and usually very infrequently.

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by travlar View Post
    The module i use has a module class suffix so i can individually style each time i use the module. So i gave it a class "articleimage" and tried both of these

    #articleimage {color: #555; padding-bottom: 0px;}
    #articleimage.feature-module {color: #555; padding-bottom: 0px;}
    I know you've solved it, but just for anyone else who is staring at it in puzzlement and thinking "That's the same problem I've got"...

    #articleimage targets an element with id="articleimage", not class="articleimage".

    If you have a declaration targeting an ID, that will override any declarations that are just based on class or element type. But you can only use any particular ID once on each page.

    As Paul said, it's best to avoid trying to meld two targets into one. You are better off setting a new class just for those elements, or using some other combination of elements and classes (eg .feature-module .articleimage {...} targets anything with class="articleimage" that is inside anything with class="feature-module") to home in on the items you want.


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
  •