1-2px gap appearing underneath an image!

djmarmalade used Ask the Experts™
I'm working on a site at http://potatopalace.dyndns.org/.

I've got a mystery gap appearing underneath the images in the "earwaks.com" banners.  The gap is 1px or 2px high, and is white because of the background color of it's parent container.  You can see the white gap, as it appears between the image and the light blue area.

So far, I've tried playing with all sorts of CSS settings for the images, the tables, everything, but I can't kill that space.  Anyone have any idea why this occurs?  

I'm sort of a newbie to this site (my first post), so pardon the low points.

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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


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


<img src="banner.jpg">
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
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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 taken a look and the </td> tag thing i mentioned seems to fix it, eg.

    <TD width="100%"><A href="http://potatopalace.dyndns.org/"><IMG
      alt=earwaks.com src="ewks_files/banner_one.jpg"></A></TD>
    <TD align=right><A href="http://potatopalace.dyndns.org/"><IMG
      alt=earwaks.com src="ewks_files/banner-right.gif"></A></TD>
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>

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.



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>


                  <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>

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

good luck,
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial