Support » Themes and Templates » Need help modifying css

  • I’ve just introduced some css code which allows me to create specially formatted captions for my blog post images. This code worked perfectly in my former theme but the alignment between image & blue background is slightly off with my new theme.

    I was hoping someone could look at the css & tell me what I need to modify. This is the css I’m using:

    form, img {
    margin: 0;
    padding: 0;
    border: 0; font-size:60%;
    a:hover img {border:solid red 0px }
    p img { padding: 0; max-width: 100%; }
    img.right { padding: 2px; margin: 0 0 2px 7px; display: inline; }
    img.left { padding: 2px; margin: 0 7px 2px 0; display: inline; }
    .right { float: right }
    .left { float: left }
    img.centered {display: block; margin-left: auto; margin-right: auto}
    .caption {
    margin: 4px;
    padding: 2px;
    border: 0px solid #777;
    background: #E5F2FF;
    color: blue;

Viewing 4 replies - 1 through 4 (of 4 total)
  • removing the border and margin on

    .entry img

    seems to set it straight.

    I changed the code as you suggested & there still a slight misalignment between image & background (you can see it at the link to my blog post in the above comment). Here’s the way the code now looks:

    .entry img{
    	padding: 5px;

    Should anything be different?

    Eric Amundson


    Volunteer Moderator

    Since your image is defined as 383px wide and so is the containing box, adding padding to the image causes it to break out of the box.

    To fix this, I’d either:

    1. increase the containing element’s width to 393px (383 + 5 + 5) it’s current set inline to: <div class="caption right" style="width: 383px;">, or
    2. remove the 5px padding on .entry img

    Thanks so much. That fixed it. I removed the padding.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Need help modifying css’ is closed to new replies.