WordPress.org

Support

Support » Themes and Templates » Problem with table alignment in posts for TwentyTen theme

Problem with table alignment in posts for TwentyTen theme

  • I’m trying to add a three column wide, ten row tall table to each of my posts. The code itself is fine, I’ve tested it on other themes, but when inserting into a TwentyTen post, I run into alignment problems.

    The main problem is that when I insert an image as the first object in the first column, it bumps all the content in the second and third columns down underneath it so that there’s a huge gap in the second and third columns with no text until after the image. If I add text right before the image, then this problem doesn’t happen… What could be causing this??

    Here’s an image of the problem: http://yfrog.com/3ttesttablej
    Here’s the code I’m using: http://wordpress.pastebin.com/SN6MqGxn

Viewing 12 replies - 1 through 12 (of 12 total)
  • That would appear to be a CSS float issue, have you had a look at the CSS for the image you inserted, does it have float: left; or similar?

    I don’t think so. It has an “alignnone” which you can see in the code. I tried changing the alignment options, didn’t fix anything.

    It works fine on other themes I test it on, so it has to be something in the stylesheet causing this. Anybody have any idea what in the stylesheet could be creating this problem or what I should look at changing?

    Yes, it might be a float issue. When floated content doesn’t fit, will be pushed downwards. You can try decreasing the table width to smaller values until you’ll find one that fits:
    <table style="width: 580px;" border="0" cellspacing="1" cellpadding="1">

    You haven’t posted a link so it is difficult for people to see how your html interacts with the WordPress stylesheets. I didn’t spot the alignnone in your code.

    The problem is caused by the width of your table which is set at 590px, if you have a look at this test page where I removed the width completely then you can see it works more or less correctly.

    Sorry, posted this without realising Mihai had pointed out the same solution.

    Thanks, but I tried removing the width and making it smaller and that didn’t effect the way the image was causing everything to be bumped down.

    If you look on the page you posted james, the problem is still there where there’s a large gap to the right of the image that is forcing the text in the two columns to the right of the image to start way too far down.

    I think that is a separate problem, you should be able to fix that by editing the style.css file and removing the vertical-align: baseline line from the global reset section. Have another look at the test page which now shows the effect of this change.

    Yeah, that looks great! Only thing, can you align the image so that it’s bumped to the top of its cell? And also, how would you remove the padding that each cell has so that the text can start right at the edge of each cell instead of being centered?

    You can do this by using valign=”top” in the table cells.

    Thanks james, everything works now. There’s just one last problem with the styling. The content within the cells are centered with padding on the sides. I’d like to remove or greatly reduce the padding since it’s so large that it’s causing all the content within my cells to look weird and on multiple lines.

    Hi Joe,

    You will need to edit your style.css file in the \wp-content\themes\twentyten folder. Then find the line below and reduce the padding, it currently is set to 6 pixels top and bottom and 24 pixels left and right of each cell.

    #content tr td {
        border-top: 1px solid #E7E7E7;
        padding: 6px 24px;
    }

    I have changed the values for the test page to make the cells align better, have a look, you may may need to play around with the values to get the effect you need.

    big thanks for all your help james, everything works now. merry christmas!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Problem with table alignment in posts for TwentyTen theme’ is closed to new replies.
Skip to toolbar