Support » Fixing WordPress » How do I place an image to fit perfectly in a table?

  • Resolved poom

    (@poom)


    Hi,

    This is my first time using WordPress and I really need help with this one. Currently, I’m creating a theme for personal use. I have a table so that the content of the post would fit perfectly into it. The table has a width of 596px with left and right padding of 30. So basically, the content would fill in the 536px area.

    It works fine with text and small images, but when I insert a full-size image with a width of exactly 536, it makes the table wider and that rearranges other things on the page 🙁

    I searched around the web and found this css code:

    p img {
    padding: 0;
    max-width: 100%;
    }
    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }
    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }
    .alignright {
    float: right;
    }
    .alignleft {
    float: left
    }

    I use a Mac and adding the above code fixes my problem in Safari and Chrome. However, when I test it with Firefox and IE (using Parallel), the problem is still there.

    You can see my still under-construction blog at:
    asyllable.com/

    Can anyone help so it works across all browsers?

Viewing 4 replies - 1 through 4 (of 4 total)
  • First of all, you can’t add padding to an image, only margins. The substance of an image is itself, and you can’t stick more padding inside of it.

    WP puts the uploaded images inside of a <p>, is the image picking up on any classes you have in your stylesheet for paragraphs?

    If so the easiest thing would be to reduce the image’s width = to whatever margins/paddings horizontally you have set for paragraphs in the post area.

    Thread Starter poom

    (@poom)

    I didn’t assign any css style for <p>, so I don’t think it’s picking up anything I wrote. You can actually view my entire css code in the source file since I put everything in the header (there’s essentially nothing in the style.css file).

    I tried assigning a style for <p> with:
    p {
    margin: 0;
    padding: 0;
    max-width: 536px;
    }

    But it still doesn’t fix my problem, and my image size is exactly 536px wide.
    The way it rendered in Safari and Chrome is how I wanted it to appear. In Firefox and IE, the image still pushes the table wider.

    Would there be any workaround, if I can’t fix it directly?

    I don’t really see what the problem is regarding the image.
    It looks as if the right side is where widths are being skewed.
    You have several nested tables; are you sure all the widths, padding and margin add up correctly?

    Thread Starter poom

    (@poom)

    The problem was with the table width. I thought I specify them correctly, but somehow it didn’t work. So I just remove all the table width and let the images push the table to my desired width.

    Thanks for pointing things out for me, though.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How do I place an image to fit perfectly in a table?’ is closed to new replies.