Which gaps are you talking about specifically? I see just one between the header and the forums, maybe. Then maybe between the top and those side images as well.
1. Don’t use tables for layout, use divs if you can.
2. Validate your layout CSS and HTML and fix those problems first.
http://validator.w3.org/ (XHTML needs some work)
http://jigsaw.w3.org/css-validator/ (CSS is OK)
3. Looks like there was some cutting and pasting going on. The main problem, I think, is that there are tags for two tables there, but the top table (with this image gregjamesforum_01.jpg) is not really marked up as a table. There are no row and table data tags. So, that’s invalid. Then, a new table is started below. That’s why there’s a gap.
I would fix the improper markup and then put everything in one table (if you are going to continue using tables) so there is no gap between the two tables. That’s why there’s a gap beneath that top image right now.
Also, there is nothing in your problem that is specific to bbPress, so you can seek support at any CSS/HTML forum as well if there’s not enough help forthcoming here.
It has nothing to do with the CSS as you can see now and my tables are okay.
So, you changed something but it’s still not fixed? The page still does not validate and the markup is still incorrect. The nested tables you have now make it even MORE difficult to fix.
I think until you fix your markup it is going to be difficult to elicit free help. My first piece of advice is to fix the markup. In the process, you may discover why it’s doing this.
Good luck.
How are my tables messed up? They seem to be intact, I know that it doesn’t validate because of the background and alignment. But I see nothing else.
Well, when I validate the page, there are errors around line 318 which is where a bunch of td/tr/table end tags are located. The fact that they are improperly nested (i.e. they are closed here but are not open) means they were probably improperly closed (or not closed) elsewhere.
But, just adding the style="display: block;" to the <img> tags as sambauers suggested should take care of it without you having to fix the improper code. It should look fine when you do that and replace the stylesheet reference.
Thank you! It worked perfect!
Last question, how would I align my tables so they’re not on the left?
Wrap the whole thing, from beginning to end, in a div with this style: <div style="width: 800px; margin: 0 auto;">
Put that before the beginning table tag, and then close it after the ending </table> tag.
You can separate the style from the template html by calling the div something like <div id="wrapper"> in your template then adding this to your style.css:
#wrapper {
width: 800px;
margin: 0 auto;
}
In either case, the margin is 0 top and bottom, and auto left and right, which means it will be centered horizontally in the browser no matter what the size of the browser viewport.
But how about the actual content? Like where the forums are?
