Solved

1-2px gap appearing underneath an image!

Posted on 2003-10-28
15
368 Views
Last Modified: 2011-09-20
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
0
Comment
Question by:djmarmalade
  • 6
  • 3
  • 2
  • +3
15 Comments
 
LVL 2

Expert Comment

by:HeadAcheMike
Comment Utility
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
 
LVL 2

Expert Comment

by:HeadAcheMike
Comment Utility
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
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
not looked at the code, but try adding a <br /> tag may or may not help
0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
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
 
LVL 2

Accepted Solution

by:
HeadAcheMike earned 50 total points
Comment Utility
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
 
LVL 3

Expert Comment

by:superslamwich
Comment Utility
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
 
LVL 6

Expert Comment

by:mattjp88
Comment Utility
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 3

Expert Comment

by:superslamwich
Comment Utility
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
 
LVL 2

Expert Comment

by:HeadAcheMike
Comment Utility
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
 
LVL 6

Expert Comment

by:mattjp88
Comment Utility
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
 
LVL 6

Expert Comment

by:mattjp88
Comment Utility
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
 
LVL 2

Expert Comment

by:HeadAcheMike
Comment Utility
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
 

Author Comment

by:djmarmalade
Comment Utility
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
 
LVL 2

Expert Comment

by:HeadAcheMike
Comment Utility
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
 

Author Comment

by:djmarmalade
Comment Utility
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now