1-2px gap appearing underneath an image!

i havent got time to look at your code right now but i wouldnt mind guessing its the old table problem

if its in a table make sure the end td tag is on the same line as the image, not the line after because this tends to create a gap

eg.

<img src="banner.jpg"></td>

not

<img src="banner.jpg">
</td>

i had that problem many times in the past because i used to put the </td> tag on the next line to keep the code looking tidy, as it turns out it is essential to have it on the same line as the image

not looked at the code, but try adding a <br /> tag may or may not help

You have BLANK divs. Get rid of those. I suspect that will fix it, if not, take the heights off of ALL your CSS. You'll probably need to add them back, but you can see what causes the problem then.

It doesn't line up correctly in Mozilla, your content area drops below the blue.

I wouldn't mix tables and divs like that either -- decide on one and use that. You can use a browser sniffer to find old Netscape versions and serve them a table layout if you want.

just a note, when looking at your page, your navigation system has a lower z-Index value then the banner below it, and you can't see it when it drops down.  Thought you might want fix that ;-)  (the banner is the Embassy summer 2003 banner)

as jay said, adding a <BR> will work, but he was alittle vague of where to put it.  place the <BR> after the image tag.  so something like this:

<td><img src="img.gif"><BR></td>

-Matt

Whoa, don't know what happened, but I guess when I first viewed the page it didn't load correctly and your menu was above the banner instead of below it...  It doesn't seem to be happening again though.  Go figure.

with all due respect whats the point in adding a <br> tag when keeping the </td> on the same line as the image has the desired effect like: <td><img src="img.gif"></td>

Well i had the same problem a few months ago, and i had the </td> on the same line as the <img> tag, and the adding of the <BR> fixed it.  I didnt actually try my theory with their code, but i would imagine it would work.  I also didn't try your theory that moving the </td> to the same line as the <img> will fix it.  I dont quite understand what that would do, since hitting enter does nothing to tables.  you can break up tags with new lines and it wont break it.  Maybe i am wrong, which i am very often, but i think my solution works.

-Matt

UPDATE:

I tested my <BR> solution, and it works, here is what i changed:

                  <TABLE WIDTH="100%" BGCOLOR="white" CELLPADDING=0 CELLSPACING=0><TR><TD WIDTH="100%">
                    <A HREF="/"><img style="border: none;" src="/images/banner/banner_one.jpg" alt="earwaks.com"></A>
                  </TD><TD ALIGN="right">
                    <A HREF="/"><img style="border: none;" src="/images/banner/banner-right.gif" alt="earwaks.com"></A>
                  </TD></TR></TABLE>

TO:



                  <TABLE WIDTH="100%" BGCOLOR="white" CELLPADDING=0 CELLSPACING=0 BORDER=0><TR><TD WIDTH="100%">
                    <A HREF="/"><img style="border: none;" src="http://potatopalace.dyndns.org/images/banner/banner_one.jpg" alt="earwaks.com" HSPACE=0 VSPACE=0></A><BR>
                    </TD><TD ALIGN="right">
                    <A HREF="/"><img style="border: none;" src="http://potatopalace.dyndns.org/images/banner/banner-right.gif" alt="earwaks.com"></A><BR>
                  </TD></TR></TABLE>

as i said, it is tested, and it works, the little white line is gone under the image.

good luck,
Matt

i have tested both solutions and while your solution does work the fact still remains that its easier just to move the </td> tag onto the same line as the image :)

>> I dont quite understand what that would do, since hitting enter does nothing to tables

its what you would call a bug i suppose, try it yourself, it makes the difference

The <img></td> solution works perfectly in IE6+, but doesn't get rid of the little white line in Mozilla .. the <BR> idea doesn't seem to make any difference, but I've left it in for now.

Any ideas on getting rid of the gap in Mozilla also?

thanks for the feedback!

im not too familiar with mozilla the only thing i can think of is have you tested it in mozilla without the <br> tag before the </td> that *could* be causing it

incidently are you aware that in Mozilla your navigation appears at the top of the table instead of where its supposed to (like in IE)

I suppose it's okay if the line appears in Mozilla for now, thanks!

The navigation appears up top in Mozilla, yeah .. I'll have to fix that later.

thanks guys!  points to HeadAcheMike, he was the first person to point out the <img src=""></td> thing, which is what I'm going with.