12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

CSS problem please help!

by Aaron Moser
10 replies
Hi,

I have a little CSS problem on a wordpress theme I'm working on and I can't figure this one out.

The problem is I have 2 images within a post (image1 & image2) that are both being styled by the following code:

.post img, .post a img, #front-list img, #archive img {
border: 1px solid #CCCCCC;
margin: 0 10px 5px 0;
padding: 2px;
}


Image1 is embedded into every post via a WP plugin that has it's own style.css I've tried to add the "border: none; padding: none;" to the plugin's style.css with no luck.

I've tried adding a new class to the Index.php and main style.css with no luck either.

.image1 img {
border: none;
padding: none;
}


How do I override styling for Image1 if the class ".post img" is styling every image in the post?


Thanks,
#css #problem
  • Profile picture of the author entrepenerd
    Originally Posted by Aaron Moser View Post

    Hi,

    I have a little CSS problem on a wordpress theme I'm working on and I can't figure this one out.

    The problem is I have 2 images within a post (image1 & image2) that are both being styled by the following code:

    .post img, .post a img, #front-list img, #archive img {
    border: 1px solid #CCCCCC;
    margin: 0 10px 5px 0;
    padding: 2px;
    }


    Image1 is embedded into every post via a WP plugin that has it's own style.css I've tried to add the "border: none; padding: none;" to the plugin's style.css with no luck.

    I've tried adding a new class to the Index.php and main style.css with no luck either.

    .image1 img {
    border: none;
    padding: none;
    }


    How do I override styling for Image1 if the class ".post img" is styling every image in the post?


    Thanks,
    Your code should be

    Code:
    img.image1 {
        border: none;
        padding: none;
	}
    not .image img

    .image1 img selects images within a container that has the class set as image1. img.image1 selects img tags with image1 as the class.
    Signature
    FREE Video Reveals...
    7 Secrets to Internet Marketing Failure
    ...or, how you can short circuit my mistakes and become an Internet Market Success!!
    {{ DiscussionBoard.errors[242935].message }}
    • Profile picture of the author Aaron Moser
      Originally Posted by entrepenerd View Post

      Your code should be

      Code:
      img.image1 {
        border: none;
        padding: none;
	}
      not .image img

      .image1 img selects images within a container that has the class set as image1. img.image1 selects img tags with image1 as the class.
      I just tried this and it didn't work...

      I copied your code to the bottom of my main style.css and wrapped the php code in my index.php with <div class="image1">PHP code</div>

      I also tried the inline styles with no luck either.

      For some reason the following code seems to override anything I try.

      .post img, .post a img, #front-list img, #archive img {
      border: 1px solid #CCCCCC;
      margin: 0 10px 5px 0;
      padding: 2px;
      }

      Any other ideas would be much appreciated..
      Signature



      {{ DiscussionBoard.errors[243160].message }}
  • Profile picture of the author indexphp
    You could also use inline styles...

    Inline styles are the "old-school" way of web design where every tag holds all the attributes. So in your code, you could just add border = "0"

    <img src="http://blah.com" width="125" height="125" border="0" />
    Signature
    www.TrafficPlusConversion.com
    {{ DiscussionBoard.errors[243007].message }}
  • Profile picture of the author indexphp
    try a new CSS rule...
    Code:
    .img {
border: none;
}
    Signature
    www.TrafficPlusConversion.com
    {{ DiscussionBoard.errors[243184].message }}
  • Profile picture of the author SteveJohnson
    You probably have a specificity issue going on here.

    CSS rules are assigned a specificity (importance) based on various things. A tag rule is less important than a class rule is less important than an id rule is less important than an inline rule.

    Within those 'importances', stacking selectors increases importance. A rule for #container img will be more important than just img.

    You can also use the !important attribute...

    SO - in your override declaration, try building up the importance of the rule by adding to the 'selector path' by prepending the rule with the id, class, or tag of its containing element. Instead of
    Code:
    #img1 img {stuffhere}
    try:
    Code:
    div #img1 img {stuffhere; !important}
    Keep experimenting until you find the importance level that will override the initial style rule.

    BTW, combining selectors increases the importance of the rule also. You might try removing #front-list img and #archive img from the rule and making individual rules for each.

    It's just a try-it-and-see thing sometimes.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[243370].message }}
  • Profile picture of the author Aaron Moser
    Thanks for all the help everyone.

    entrepenerd was able to get the styling mostly fixed on my post pages.

    Instead of using the .post img class I used .entry img and this allowed all the other images within the post to not be affected by the styling.

    But I'm still having the border and padding issue with images on my hompage and archive list.

    Here's the new code:

    .entry img, .entry a img, #front-list img, #archive img {
    border: 1px solid #CCCCCC;
    margin: 0 10px 5px 0;
    padding: 2px;
    }


    It seems that #front-list img, #archive img are still causing the styling issue.

    Anyone have a suggestion?
    Signature



    {{ DiscussionBoard.errors[243693].message }}
  • Profile picture of the author SteveJohnson
    change from this:
    Code:
    .entry img, .entry a img, #front-list img, #archive img {
border: 1px solid #CCCCCC;
margin: 0 10px 5px 0;
padding: 2px;
}
    to this:
    Code:
    .entry img, .entry a img {
border: 1px solid #CCCCCC;
margin: 0 10px 5px 0;
padding: 2px;
}

#front-list img, #archive img {
margin: 0 10px 5px 0;
border: none;
padding: 0;
}
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[243794].message }}
  • Profile picture of the author Aaron Moser
    Thanks Steve. We're getting much closer now... The margin is still causing spacing around other images. I sent you a PM.

    I wish I could just remove the margin but that would cause the text to be right up against the main image.

    Thanks,
    Signature



    {{ DiscussionBoard.errors[243867].message }}

Trending Topics