WordPress.org

Ready to get started?Download WordPress

Forums

Problem with table alignment in posts for TwentyTen theme (13 posts)

  1. JoeGrizzly
    Member
    Posted 3 years ago #

    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

  2. jamespiggot
    Member
    Posted 3 years ago #

    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?

  3. JoeGrizzly
    Member
    Posted 3 years ago #

    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.

  4. JoeGrizzly
    Member
    Posted 3 years ago #

    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?

  5. Mihai Marica
    Member
    Posted 3 years ago #

    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">

  6. jamespiggot
    Member
    Posted 3 years ago #

    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.

  7. JoeGrizzly
    Member
    Posted 3 years ago #

    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.

  8. jamespiggot
    Member
    Posted 3 years ago #

    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.

  9. JoeGrizzly
    Member
    Posted 3 years ago #

    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?

  10. jamespiggot
    Member
    Posted 3 years ago #

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

  11. JoeGrizzly
    Member
    Posted 3 years ago #

    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.

  12. jamespiggot
    Member
    Posted 3 years ago #

    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.

  13. JoeGrizzly
    Member
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic