1-2px gap appearing underneath an image!

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.

Thanks,
Adam
djmarmaladeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HeadAcheMikeCommented:
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>
0
HeadAcheMikeCommented:
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
0
jaysolomonCommented:
not looked at the code, but try adding a <br /> tag may or may not help
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

webwomanCommented:
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.
0
HeadAcheMikeCommented:
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
      style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"
      alt=earwaks.com src="ewks_files/banner_one.jpg"></A></TD>
    <TD align=right><A href="http://potatopalace.dyndns.org/"><IMG
      style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"
      alt=earwaks.com src="ewks_files/banner-right.gif"></A></TD>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
superslamwichCommented:
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)
0
mattjp88Commented:
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
0
superslamwichCommented:
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.
0
HeadAcheMikeCommented:
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>
0
mattjp88Commented:
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
0
mattjp88Commented:
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
0
HeadAcheMikeCommented:
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
0
djmarmaladeAuthor Commented:
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!
0
HeadAcheMikeCommented:
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)
0
djmarmaladeAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.