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