[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

1-2px gap appearing underneath an image!

Posted on 2003-10-28
15
Medium Priority
?
409 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 3
  • 2
  • +3
15 Comments
 
LVL 2

Expert Comment

by:HeadAcheMike
ID: 9633325
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
ID: 9633350
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
ID: 9634121
not looked at the code, but try adding a <br /> tag may or may not help
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Expert Comment

by:webwoman
ID: 9634617
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 150 total points
ID: 9635019
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
ID: 9637612
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
ID: 9637640
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
 
LVL 3

Expert Comment

by:superslamwich
ID: 9637661
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
ID: 9637669
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
ID: 9637728
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
ID: 9637765
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
ID: 9637801
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
ID: 9639794
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
ID: 9640921
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
ID: 9644053
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

656 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