Lots of white space before HTML table

April 23, 2008 4:08 AM

How do I get rid of lots of extra white space before a table (in Internet Explorer).

I set up a web site for a friend's nonprofit. This page looks fine in Firefox, but there's a lot of white space above the table in Internet Explorer (6 & 7). I used a free template to set up the site, and I'm still exploring the mysteries of CSS, however I'm using a table for actual tabular data here, not for layout. There's nothing between the closing /P tag of the paragraph above and the TABLE tag, and there's no extra space at the top of the table. If I put a border around the table, I can clearly see that the white space is above the table, not within it. I did try this without the closing /P tag before the table, and that didn't make any difference. Following some hints I found by Googling "space before tables," I removed all the line breaks from the HTML table code, which didn't make any difference. Is there some intrinisic difference between how Firefox and IE handle the space before tables? And what, if anything can I do about this?

posted by Joleta to computers & internet (5 comments total)

Have you tried changing the width of the table to a % instead of px value:

width="550"

goes to

width="95%"

for example?

It looks like the menu section on the left is pushing the table down because the table's too wide...

You can see this using Firefox's development tools and outline block-level elements :o)
posted by charlie7691 at 4:38 AM on April 23, 2008

Thank you so much! Changing the table width to 95% did the trick! You're wonderful!
posted by Joleta at 4:52 AM on April 23, 2008

It's not to do with space before tables, or line breaks. Note how the table appears just after the navigation on the left hand side. The navigation on the left is squeezing the table down below it in IE.

As an alternative to narrowing the table, you could change line 226 of styles.css to read:

margin: 0 10px 20px 150px;

That'll knock out the excess spacing on the right of the full_page div that's pushing it all out of whack.
posted by armoured-ant at 4:52 AM on April 23, 2008

And than you, too, armoured-ant. I'll give that fix a try too, just to see how it works.
posted by Joleta at 4:54 AM on April 23, 2008

Um..."thank you" I meant to say.
posted by Joleta at 4:54 AM on April 23, 2008