Html Table Display with images

Jorge · April 8th, 2005, 02:23 PM

When setting up Html Table Display with two image files
Am trying to have an image file, (an image of a "tab" button" sit on the table, but there is a two pixal gap between the bottom of the image (tababoutus.gif) and the top of 2nd row-of-table which has bgcolor of orange (#ffcc00), I do not want any gap at all.

Code:

<table width="768" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="468">
           <br><img src="images/NSIA_Logo_Navy.gif">
        </td>
    <td width="300" align="right" valign="bottom" height="108">
       <img src="images/tababoutus.gif" style="border:0px;">
    </td>    
    </tr>
    <tr>
    <td colspan="2" bgcolor="#ffcc00">
        &nbsp;
    </td>
    </tr>    
</table>

thx!

Jorge

meow · April 8th, 2005, 02:31 PM

If you see this in IE, get rid of whitespace withing table cells.

Like so:
<td><img><td>

NOT like so:
   <td>
           <img>
   </td>

If you see it in Moz in Strict Mode you have another problem. I don't find the actual page at http://www.freewebs.com/gypsydriver/ . Perhaps you can link to it?

(o<
//\ =^..^=

Jorge · April 11th, 2005, 10:22 AM

TY - your solution works for the simplified code. On my more complex code (ie the real web page), it does not seem to work
Link: http://www.nsia.ca/nsia01.html
Code:

<html>

<script language="JavaScript">

</script>

<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title></title>

</head>

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">

<table width="768" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td background="images/mountains3.gif" colspan="2" height="108"><table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr><td width="*"><br> <img src="images/NSIA_Logo_Navy.gif"></td><td width="400" align="right" valign="bottom" height="108" style="border-width:0px;"><a href="P1/about.asp" style="border-width:0px;"><img src="images/tababoutus.gif" style="border-width:0px;"></a><a href="P1/faq.asp" style="border-width:0px;"><img src="images/tabfaq.gif" style="border-width:0px;"></a><a href="P1/contact.asp" style="border-width:0px;"><img src="images/tabcontact.gif" style="border-width:0px;"></a><a href="nsiaf.asp" style="border-width:0px;"><img src="images/tabfrancais.gif" style="border-width:0px;"></a>   </td></tr></table></td>
    </tr>
    <tr>
        <td colspan="2" bgcolor="#ffcc00"> </td>
    </tr>
</table>

</body>
</html>

Thx!

Jorge

elladi · April 11th, 2005, 11:53 AM

I seem to have this problem anytime two images are lined up in a table horozontally (this is never a problem vertically...) if anyone has a solution I would love to hear it....

meow · April 11th, 2005, 01:30 PM

Looks like the spaces are in the images themselves to me. Highlight the image and you can see they aren't cut close enough.
http://www.nsia.ca/images/tabfaq.gif
If you replace the tab pics with images that are colored all the way out there are no gaps.

BTW if you put the "no border" stuff in a linked or embedded style sheet you can get rid of the style attributes.

/* all images */
img { border: none }

/* only linked images */
a img { border: none }

(o<
//\ =^..^=

Jorge · April 11th, 2005, 02:26 PM

The solution to this image-placement problem is as follows:

Code:

<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td background="images/mountains3.gif" colspan="4" height="108" valign="bottom">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
                <tr>
                    <td width="*">
                        <br> &nbsp; <img src="images/NSIA_Logo_Navy.gif"></td>
                    <td width="400" align="right" valign="bottom" height="108">
                        <a href="P1/about.asp"><img src="images/tababoutus.gif" style="border:none;"></a><a href="P1/faq.asp"><img src="images/tabfaq.gif" style="border:none;"></a><a href="P1/contact.asp"><img src="images/tabcontact.gif" style="border:none;"></a><a href="nsiaf.asp"><img src="images/tabfrancais.gif" style="border:none;"></a></td>
                </tr>
            </table>
        </td>
    </tr>
        <tr>
           <td bgcolor="#ffcc00">&nbsp;</td>
        </tr>
</table>

However, the moment I put ' ' character after this series of images, this gap re-apprears! i.e. <img src="xxxx">   </td> produces a gap; whereas,
<img src="xxxx"></td> does not product this gap.

Jorge

meow · April 11th, 2005, 02:40 PM

Are you talking about the gap UNDER the tabs? I thought you meant the gap between them. :D

Don't use   to create padding then. Use padding. I.e. padding-right applied to the containing TD.

(o<
//\ =^..^=

Jorge · April 12th, 2005, 10:13 AM

THX .... padding-right (instead of &nbsp) worked great :-)
You've been a great help!
Jorge

Jorge

meow · April 13th, 2005, 12:21 AM

You're welcome. Glad it worked out. :)

(o<
//\ =^..^=