Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 8th, 2005, 02:23 PM
Authorized User
 
Join Date: Feb 2004
Location: Montreal, QC, Canada.
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
Reply With Quote
  #2 (permalink)  
Old April 8th, 2005, 02:31 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
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<
//\ =^..^=
Reply With Quote
  #3 (permalink)  
Old April 11th, 2005, 10:22 AM
Authorized User
 
Join Date: Feb 2004
Location: Montreal, QC, Canada.
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
Reply With Quote
  #4 (permalink)  
Old April 11th, 2005, 11:53 AM
Authorized User
 
Join Date: Jul 2004
Location: , , .
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....

Reply With Quote
  #5 (permalink)  
Old April 11th, 2005, 01:30 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
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<
//\ =^..^=
Reply With Quote
  #6 (permalink)  
Old April 11th, 2005, 02:26 PM
Authorized User
 
Join Date: Feb 2004
Location: Montreal, QC, Canada.
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
Reply With Quote
  #7 (permalink)  
Old April 11th, 2005, 02:40 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
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<
//\ =^..^=
Reply With Quote
  #8 (permalink)  
Old April 12th, 2005, 10:13 AM
Authorized User
 
Join Date: Feb 2004
Location: Montreal, QC, Canada.
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
Reply With Quote
  #9 (permalink)  
Old April 13th, 2005, 12:21 AM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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

(o<
//\ =^..^=
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 09:09 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.