Border on individual image

I tried to make some changes in the zen.css, particularly in the code below, to add a border to my individual images. However, the borders show up the way I like it except the right and left side of the image there's too much space. Here's an example of what it looks like on my site - http://darrellmankin.org/zenphoto/portraits/003.jpg

I did a search first to see if there are any answers but it only talks about the thumbs. Thanks for any help you can give me.

/* Individual Image
------------------------------ */
.image {
margin: 0;
padding: 0;
border: 0;
}
#image {
text-align: center;
line-height: 0;
background: #ffffff;
padding: 5px;
border: 1px solid #ccc;
}

Comments

  • trisweb Administrator
    You probably need to put the border on the .image part instead?

    Check out Firebug firefox extension, it lets you edit styles live and see what they look like. Very useful.
  • Hey Tris, thanks for the quick reply. I do have Firebug - it didn't work out. Maybe I didn't place the code correctly. If someone could show me where to put the code that would be great. CSS is still a guessing game for me. Thanks.
  • trisweb Administrator
    If you've got firebug, use the 'inspect' button and click the image. That'll tell you where the code goes. You can edit the rules there and then just copy them into the CSS file from the theme.

    Basically, it should look like this instead of what you have above.

    `/* Individual Image

    ------------------------------ */

    .image {

    margin: 0;

    padding: 5px;

    border: 1px solid #ccc;

    }

    #image {

    text-align: center;

    line-height: 0;

    background: #ffffff;

    }`
  • Thanks Tris. For some reason, it doesn't work. I'll just figure something else out.
Sign In or Register to comment.