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!
