Grow your CSS skills. Land your dream job.

[Solved] Image Border

  • # September 28, 2009 at 12:03 pm

    Hi all,

    I’m having a problem with what seems to be quite an easy item. I have imported a blog into wordpress and added a dashed border to the images. I did this by using the following css on the main column:

    Code:
    div.main img{
    border: 1px dashed #000000;
    margin: 2px;
    padding:5px;}

    Now… I have images of avatar / gravatar listed in the comments which also have inherited this border. I’m trying to remove this by either using the following to pull up div’s within the main column.

    Code:
    .gravatarside img { border:none;}

    or

    Code:
    .avatar img {border:none;}

    but this code is being ignored when checking the styling with Firebug.
    Any ideas on my oversight on this would be much appreciated.

    As a side question, any preferred method to alternate comment background colors?

    Thanks!

    # September 28, 2009 at 1:50 pm

    Hi, it would be img.classname {…}

    box
    # September 28, 2009 at 3:46 pm

    It’s most likely a specificity issue. It would be easier to diagnose if you have a link to a live site.

    # September 28, 2009 at 5:18 pm

    Hey guys… thanks for the suggestions. I agree that I should be able to turn off the border with a class.. but still no luck. Here is a link to the site if you have time to review.

    The img tag for the gravatar has a class of "avatar avatar-48 photo", I’ve tried variations but without luck thus far.

    Again… appreciate any help.

    Thanks.

    # September 28, 2009 at 5:53 pm

    Then it would be img.avatar.avatar-48.photo {…}

    note: your syntaxt in the original post is wrong. Your saying a container with a class of avitar with an img in it. What you want to say, as I showed, is an img with a classname appliied to it. If that what you have in your HTML.

    # September 28, 2009 at 11:19 pm

    Hi Eric,

    thanks for the help. It was a syntax issue and your suggestion took care of it.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".