Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Gaps around images

Status
Not open for further replies.
Grimblam

Grimblam

Programmer
Sep 27, 2004
9
GB
Hi,

I have a bit of a dummy problem with the layout of a page. For some reason, when I put an image in a table, I get a gap of 4pixels either above or below it (this is with the top-bot.jpg picture and the banner.jpg). Does anyone have any idea why? I also is there a minimum height that a table row can go or is there a special way of making them go really small such as one or two pixels?

Cheers,
Andy

Code: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>AG</title>
<!--<SCRIPT LANGUAGE='JavaScript1.2' SRC='functions.js'></SCRIPT>-->
<link rel='styleSheet' href='styleSheet.css' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body >
<!-- Full Table -->
<table>
<tr>
<!-- Left Side Border -->
<td align="left" bgcolor="#F5F5F5" width="">
	<img alt="" src="leftSide.jpg" height="100%" border="0" align="right" width="20" />
</td>

<!-- Center Table Cell-->
<td width="820">
	<table cellpadding="10">
	<tr>
	<td>
		<table>	
		<tr>
		    <td height="0" width="100%" align="center" valign="top">
			<img alt="" src="top-bot.jpg" /> 
            </td>
		</tr>
		
		<tr>
		<td height="100%" width="100%">
			<table class="mainWindowTable" cellpadding="0" cellspacing="0">
				
				<!-- Title -->
				<tr>
                      <td width="100%" height="0" align="left" valign="top" style="border-bottom-style: solid; border-bottom-width: 1; border-bottom-color: #EFEFEF;"> 
                        <img alt="andrewgrimble.com" src="title.jpg" border="0" /> </td>
                    </tr>
				
				<!-- Banner -->
				<tr>
                      <td width="100%" style="border-bottom-style: solid; border-bottom-width: 1; border-bottom-color: #EFEFEF" > 
                        <img alt="View North From Ben Nevis" src="banner.jpg" /> </td>
                    </tr>
				
				<!-- Top Menu Bar -->
				<tr><td border="0" height="0">
					<table align="right" >
					<tr align="right" >
					
					<td width="200" height="0" border="0" align="right" valign="top" 
					style="border-bottom-style: solid; border-bottom-width: 1; border-bottom-color: #EFEFEF;">&nbsp;										
					</td>
					
					<td class="menuBar">										
					<a href="">Main</a>
					</td>
					
					<td class="menuBar">										
					<a href="">Curriculum Vitae</a>
					</td>
					
					<td class="menuBar">										
					<a href="">Software</a>
					</td>
					
					<td class="menuBar">										
					<a href="">Links</a>
					</td>
					
					</tr>
					</table>
				</td></tr>
				
				<tr><td height="8">&nbsp;</td></tr>
				
				<!-- Main Area -->
				<tr>
				<td width="100%" height="100%" border="0" align="left" valign="top" style="border-bottom-style: solid; border-bottom-width: 1; border-bottom-color: #EFEFEF">
				
					<table cellpadding="20">
					<tr>
					<!-- Center Area -->
					<td width="100%" valign="top">
						<table height="0" cellpadding="0" cellspacing="0" border="0">
						<tr>
						<td width="50%" height="0" align="left"  valign="middle" style="border-bottom-style: dashed; border-bottom-width: 1; border-bottom-color: #DCDCDC; line-height: 1">
							<h3 >introduction</h3>								
						</td>
						<td width="50%" height="0" align="right" valign="middle" style="border-bottom-style: dashed; border-bottom-width: 1; border-bottom-color: #DCDCDC; line-height: 1">&nbsp; 
						
						</td>
						</tr>
						
						<tr valign="top"><td colspan="2" valign="top" align="left"><br/><p>hello</p></td></tr>
						
						<tr valign="top"><td colspan="2" height="100%" valign="top"><p>&nbsp;</p></td></tr>
						</table>
					</td>
					<!-- Right Bar -->
					<td width="" height="0" valign="top" >
						<table bordercolor="#000000" width="300" cellpadding="0" cellspacing="0" border="0" >
						<tr>						
						<td align="left" height="0" colspan="2" valign="middle" style="border-bottom-style: solid; border-bottom-width: 1; border-bottom-color: #DCDCDC; line-height: 1">
							<h3>contact</h3>
						</td>
						</tr>
						<tr >
						<td align="left" valign="top">
						<br><br>
						<p>name: </p>
						<p>email: </p>
						<p>mess: </p>
						</td>
						<td align="left" valign="top" >
							<table cellpadding="10"><tr><td>
								<br>	
								<form name="message" method="post">
								<input name="name" type="text" size="26">
								<input name="email" type="text" size="26">				
								<textarea rows="5"></textarea>
								</form>
							</td></tr></table>
						</td>
						</tr>
						<tr valign="top"><td colspan="2" height="100%" valign="top"><p>&nbsp;</p></td></tr>
						</table>
					</td>
					</tr>
					</table>
				
				</td>
				</tr>
				
				<!-- Bottom Area -->
				<tr>
				<td width="100%" height="20" valign="top">
					<table cellspacing="5">
					<tr>
					<td align="left">
						<p style="color: #FF8000;">Copyright 2004 
						<a href="mailto:andrewgrimble@hotmail.com">Andrew Grimble</a>
						</p>
					</td>
					<td align="right">
						<a href="">
						&gt;</a>
					</td>
					<td align="right">
						<a href="">
						<</a>
					</td>
					</tr>
					</table>
				</td>
				</tr>
				
			</table>
					
		</td>
		</tr>
	
		<tr>
		    <td height="0" width="100%"> 
			<img alt="" src="top-bot.jpg" /> 
			</td>
		</tr>
		</table>
		
	</td>
	</tr>	
	</table>
</td>

<!-- Right Side Border -->
<td align="right" bgcolor="#F5F5F5">
<img alt="" src="rightSide.jpg" height="100%" border="0" align="left" width="20" />
</td>
</tr>
<!-- End Full Table -->
</table>

</body>
</html>

Code: 
a {font-family: verdana; font-size: 10; color: #808080; font-style: none; text-decoration:none}
a:hover {color: #FF8000; text-decoration: underline}

body 
{
 	background-color: #F5F5F5;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;	
	font-size: 1;	
	line-height: 1;	
	color: #808080;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0
}
	
table 
{
	background-color: #FFFFFF;
	text-align: center;
	color: #FFFFFF;
	width: 100%;
	height: 100%;
	border: 0;
	cell-spacing: 0			
}

table.mainWindowTable 
{

	border-left-style: solid; 
	border-left-width: 1; 
	border-left-color: #DCDCDC;				   
	border-right-style: solid; 
	border-right-width: 1; 
	border-right-color: #DCDCDC
}

td.menuBar 
{
	width: 150;
	height: 0; 
	text-align: center;
	vertical-align: middle; 
	line-height: 1;	
	border-left-style: solid;
	border-left-width: 1; 
	border-left-color: #DCDCDC;
	border-bottom-style: solid; 
	border-bottom-width: 1; 
	border-bottom-color: #EFEFEF		
}
	
h3
{
	font-family: arial; 
	font-size: 14; 
	color: #808080; 
	font-style: none;
	text-decoration:none; 
	font-weight:bold
}

p
{
	font-family: arial; 
	font-size: 10; 
	color: #808080; 
	font-style: none;
	text-decoration:none
}
 
Sort by date Sort by votes
Remove any space/whitespace after IMG tag (<img...></td> instead of <img...> </td>).

Also specify explicit height/width for images. This has nothing related with problem you explained, but makes page loading a little bit smoother.
 
Upvote 0 Downvote
know its been awhile lol, but thought id add this jus incase you ever came back.

In order to get rid of that gap and get the table cell to 2px in height use the following <td> tag:

Code: 
<td style="height:2px"></td>
 
Upvote 0 Downvote
You should also remove any whitespace before the image tag. (Note that "whitespace" means spaces, tabs and newlines.)

I.e.

<td><img ...></td>

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

usarmycwo
  • Locked
  • Question
Any FrontPage users still around? 1
Replies
4
Views
1K
feherke
feherke
c0deM0nK424
  • Locked
  • Question
Mozilla Firefox Style - New Tab Controls - Thumbnail Images for 'recent websites' viewed ?
Replies
3
Views
324
ChrisHirst
ChrisHirst
Rousseau10
  • Locked
  • Question
How to make web page images also appear first time a web browser hits the page?
Replies
13
Views
413
Olaf Doschke
Olaf Doschke
PCHomepage
  • Locked
  • Question
Align Multiple Images Right
Replies
1
Views
183
PCHomepage
PCHomepage
h2mhd
  • Locked
  • Question
website images and text overlapping
Replies
1
Views
193
datamasher
datamasher

Part and Inventory Search

Sponsor

Back
Top