Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old April 8th, 2005, 02:23 PM
Authorized User
 
Join Date: Feb 2004
Posts: 19
Thanks: 0
Thanked 0 Times in 0 Posts
Default Html Table Display with images

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
__________________
Jorge
 
Old April 8th, 2005, 02:31 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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<
//\ =^..^=
 
Old April 11th, 2005, 10:22 AM
Authorized User
 
Join Date: Feb 2004
Posts: 19
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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>&nbsp;<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>&nbsp; &nbsp;</td></tr></table></td>
    </tr>
    <tr>
        <td colspan="2" bgcolor="#ffcc00">&nbsp;</td>
    </tr>
</table>



</body>
</html>

Thx!

Jorge
 
Old April 11th, 2005, 11:53 AM
Authorized User
 
Join Date: Jul 2004
Posts: 40
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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

 
Old April 11th, 2005, 01:30 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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<
//\ =^..^=
 
Old April 11th, 2005, 02:26 PM
Authorized User
 
Join Date: Feb 2004
Posts: 19
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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 '&nbsp;' character after this series of images, this gap re-apprears! i.e. <img src="xxxx"> &nbsp; </td> produces a gap; whereas,
                     <img src="xxxx"></td> does not product this gap.

Jorge
 
Old April 11th, 2005, 02:40 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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

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

(o<
//\ =^..^=
 
Old April 12th, 2005, 10:13 AM
Authorized User
 
Join Date: Feb 2004
Posts: 19
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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


Jorge
 
Old April 13th, 2005, 12:21 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
Display valign=middle HTML table in Excel BananaJim Classic ASP Professional 0 March 9th, 2007 07:27 AM
is it possible to display GIF Images uneek_18 Crystal Reports 0 January 16th, 2006 08:03 AM
How To Display Images in DataList abdul_owiusa General .NET 4 June 3rd, 2005 11:49 AM
How To Display Images in DataList abdul_owiusa General .NET 1 May 20th, 2005 09:01 AM
how to display images ? shirley65 C# 2 May 31st, 2004 08:12 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.