Gap between rows in IE7

I have arranged a table with 2 rows in a layer. The top row has 11 columns which hold the nav buttons. The bottom row has 3 columns with background repeat in the middle one.

The above layout shows up fine in FF2 but not in IE7. In IE7 it shows a few pixels space between the two rows.

 

Add this to your CSS:

#navigation td img{
vertical-align: bottom;
}

Code (markup):

 

wheeee!! thanks dood!
damn sometimes its just so simple as that, the images were aligned to the top. but how come the images on the second row didnt get affected?

Now can a kind soul please let me know how to center this template to the page. I tried the methods posted on the web of, text-align in body tag.
also puttin it all in a div container.

Doesnt help.

 

<div id="container" align="center">
         <div id="content">
         Blah blah blah.  Blah.
         </div>
</div>

Code (markup):

That should center things. Also, if you want a more uniform solution to the spacing of images in your navigation, try this:

#navigation td img{
display: block;
}

Code (markup):

This tells the browser to render the images (only those inside a table under the navigation id) as block elements, rather than inline elements.

 

hmmm.. alright

and the centering still doesnt work. do I have to specify positioning as well for the div?

 

Mind posting (or PMing) a link to the site?

 

I surely do not, except that its not a site yet. Its just a template that I am developing for a future college site.

However I have attached the zip file. Please take a look at it.