CSS Table Problem with Twentyeleven

  • Hello,

    I’m customizing my first theme based off of Twentyeleven and so far I’ve been able to find CSS rules via Firebug. However, I’m experiencing a problem with table cell alignment that I can’t figure out.

    Here’s the page: https://ecbiz122.inmotionhosting.com/~maddyw5/music/

    Each row has three columns and columns 2 and 3 are being pushed down for some reason. Both of these columns have vertical alignment set to “top” – yet they’re still being pushed down. I’ve tried adjusting various CSS rules but nothing is fixing the problem. I don’t understand what could make these columns get pushed down.

    Any ideas?

    Thanks.

Viewing 5 replies - 1 through 5 (of 5 total)

  • The second two td tags in the first row and all of the td tags in the second row are missing a width attribute — so they are by default 100% wide (as the table). BTW, Vertical align does not apply to the position of the cell — but to the contents inside the cell.

    So you just need to add width to all the td tags.

    Thread Starter tgone83

    (@tgone83)

    I just added widths to the td tags and it didn’t fix the problem:
    https://ecbiz122.inmotionhosting.com/~maddyw5/music/

    This is weird – the problem goes away when I remove the album cover in the first column. Maybe the image itself is causing the proceeding columns to get pushed down?

    The image is not inside the td tags in the first row — it’s in the second row. The top row td’s ARE side by side now.

    Also, you might want to use fixed widths for the td’s — less likely to cause problems like you are experiencing. The total table width is 848px so be sure the td sizes don’t exceed that — and you also have to account for padding or margins on the td’s.

    You’d also make this a lot simpler by putting the styles (widths, margins, etc.) in the external stylesheet…you would not need to add those attributes to EACH td tag… You’d add a class to the td tags then use that class as a selector in the stylesheet to add or adjust styling.

    Thread Starter tgone83

    (@tgone83)

    My mistake, the image is now inside the td tag for the first row.

    I also set fixed widths for the tables.

    I will put the styles in an external file after I solve this problem. Right now it’s just easier this way.

    None of this has fixed the problem though…

    Okay, after several tries and much time fooling with this, I figured it out — you are using deprecated CSS code — that’s why it’s not working! Put the styles in the external stylesheet and use

    table {
width: 100%
}
td {
vertical-align: top;
width: 33%;
}

    Make sure you remove the inline width and valign from the html tags.

    You also really should always add text to alt=” ” attributes — as those help people who are visually impaired use the site.

    Here is a good reference on table styling if you need it.

    Hope that helps you out…

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘CSS Table Problem with Twentyeleven’ is closed to new replies.