Navigation Bar Problem

[Jonah Bishop]

I am developing an experimental webpage with an extremely simple layout: one
table, which only has one column and two rows. The top row consists of seven
images, with a little space between each. This space is there because I'm
trying to format my source code neatly (so some whitespace appears between
each <img> tag). This row will serve as a tabbed navigation bar, much like
the one at amazon.com. The bottom row is simply a solid color, which matches
the background color of the active tab. Here is a brief glimpse of what
table row 1 looks like:

<td id="Navigation">
<a some_link><img some_image /></a>
<a some_link><img some_image /></a>
<a some_link><img some_image /></a>
</td>

My problem is this: there is some vertical whitespace between row 1 and row
2 of this table. Since this will be a tabbed navigation interface, I want
these cells to touch (so the selected image blends in with the row below
it). I am designing the page in XHTML (strict DTD) using cascading style
sheets, and this is the class that I have defined for my navigation table
cell:

#Navigation {
border: 0px;
font-size: 0px;
margin: 0px;
padding: 0px;
}

When I remove the whitespace between each <img> tag, the vertical whitespace
between rows 1 and 2 goes away. So I added the font-size setting of 0px,
thinking that it was the whitespace that was the problem. This hack fixed
the problem in Internet Explorer, but it still remains in Mozilla.

What is the problem here, and how can I fix it? This really has me
puzzled...

Thanks,
Jonah B.

Thanks for all the help...

<msk111@carolina.rr.com> wrote in message
news:OQ4cb.1778$eB.223@twister.southeast.rr.com...

> I have a problem with my navigation bar i was messing around with, the

links

> i provided to the hotspots of the buttons dont work on my site. I click

them

> and it just kind of sits there and does nothing, i provided the .png file.
> Please scan it before you open it so i dont get blamed for screwing up

your

> comp.,
> Mike
>
>
>