I can't fix these gaps in a small table of images...

rogerknight · 11-02-2009, 07:45 AM

I have a table of images that are links that operates as my navigation for a bigger site. Here is the code for a page with just the table for the navigation. It it 1 column wide and 6 rows tall. The images change their image on mouseOver by javascript. Anyway, I can't figure out why there is a break between each img / link. All pixel dimensions have been double and triple checked.

You can see the navtest.html at www.upandawaytreehouses.com/navtest.html and the bigger site at www.upandawaytreehouses.com/index.html

Any help would be hugely appreciated!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<script language="javascript" type="text/javascript" src="javascript.js"></script>
<LINK REL=stylesheet HREF="style.css" TYPE="text/css">
<title>
Up And Away Treehouses
</title>
</head>
<body>
<table border=0 cellspacing=0 cellpadding=0 width="100" height="236">
<tr><td><a href="about.html"
onMouseOver="L1HandOver();return true;"
onMouseOut="L1HandOut();return true;">
<img class="ladder" name=L1 width="100" height=37" border=0 alt="L1" src="L3.png">
</a></td></tr>
<tr><td><a href="about.html"
onMouseOver="L2HandOver();return true;"
onMouseOut="L2HandOut();return true;">
<img class="ladder" name=L2 width="100" height="42" border=0 alt="L2" src="L3.png">
</a></td></tr>
<tr><td><a href="about.html"
onMouseOver="L3HandOver();return true;"
onMouseOut="L3HandOut();return true;">
<img class="ladder" name=L3 width="100" height="39" border=0 alt="L3" src="L3.png">
</a></td></tr>
<tr><td><a href="about.html"
onMouseOver="L4HandOver();return true;"
onMouseOut="L4HandOut();return true;">
<img class="ladder" name=L4 width="100" height="38" border=0 alt="L4" src="L4.png">
</a></td></tr>
<tr><td><a href="about.html"
onMouseOver="L5HandOver();return true;"
onMouseOut="L5HandOut();return true;">
<img class="ladder" name=L5 width="100" height="40" border=0 alt="L5" src="L5.png">
</a></td></tr>
<tr><td><a href="about.html"
onMouseOver="L6HandOver();return true;"
onMouseOut="L6HandOut();return true;">
<img class="ladder" name=L6 width="100" height="40" border=0 alt="L6" src="L6.png">
</a></td></tr></table>
</body>
</html>

rogerknight · 11-02-2009, 04:19 PM

I just fixed it myself!

It all has to do with the spaces inbetween the <td> and </td>. There must be none. I don't understand this at all as I have been told, browsers ignore spaces in html code. All the same, once I took out the spaces, it worked. Like this:

<tr><td><a href="about.html"
onMouseOver="L1HandOver();return true;"
onMouseOut="L1HandOut();return true;">
<img class="ladder" name=L1 width="100" height=37" border=0 alt="L1" src="L1.png"></a></td></tr>

Instead of this:

<tr><td><a href="about.html"
onMouseOver="L1HandOver();return true;"
onMouseOut="L1HandOut();return true;">
<img class="ladder" name=L1 width="100" height=37" border=0 alt="L1" src="L1.png"> </a></td></tr>

jthayne · 11-04-2009, 10:04 AM

Quote:

Originally Posted by rogerknight

...browsers ignore spaces in html code...

This is not accurate. Browsers do not ignore spaces. What they do instead, is condense all spaces down to a single space (in essence ignoring everything after the first space) which is why you you have to use   to put in multiple spaces.

11-02-2009, 07:45 AM	#1
rogerknight New Member Join Date: Nov 2009 Webmaster Discussions: 2 Rep Power: 6	I can't fix these gaps in a small table of images... I have a table of images that are links that operates as my navigation for a bigger site. Here is the code for a page with just the table for the navigation. It it 1 column wide and 6 rows tall. The images change their image on mouseOver by javascript. Anyway, I can't figure out why there is a break between each img / link. All pixel dimensions have been double and triple checked. You can see the navtest.html at www.upandawaytreehouses.com/navtest.html and the bigger site at www.upandawaytreehouses.com/index.html Any help would be hugely appreciated! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <script language="javascript" type="text/javascript" src="javascript.js"></script> <LINK REL=stylesheet HREF="style.css" TYPE="text/css"> <title> Up And Away Treehouses </title> </head> <body> <table border=0 cellspacing=0 cellpadding=0 width="100" height="236"> <tr><td><a href="about.html" onMouseOver="L1HandOver();return true;" onMouseOut="L1HandOut();return true;"> <img class="ladder" name=L1 width="100" height=37" border=0 alt="L1" src="L3.png"> </a></td></tr> <tr><td><a href="about.html" onMouseOver="L2HandOver();return true;" onMouseOut="L2HandOut();return true;"> <img class="ladder" name=L2 width="100" height="42" border=0 alt="L2" src="L3.png"> </a></td></tr> <tr><td><a href="about.html" onMouseOver="L3HandOver();return true;" onMouseOut="L3HandOut();return true;"> <img class="ladder" name=L3 width="100" height="39" border=0 alt="L3" src="L3.png"> </a></td></tr> <tr><td><a href="about.html" onMouseOver="L4HandOver();return true;" onMouseOut="L4HandOut();return true;"> <img class="ladder" name=L4 width="100" height="38" border=0 alt="L4" src="L4.png"> </a></td></tr> <tr><td><a href="about.html" onMouseOver="L5HandOver();return true;" onMouseOut="L5HandOut();return true;"> <img class="ladder" name=L5 width="100" height="40" border=0 alt="L5" src="L5.png"> </a></td></tr> <tr><td><a href="about.html" onMouseOver="L6HandOver();return true;" onMouseOut="L6HandOut();return true;"> <img class="ladder" name=L6 width="100" height="40" border=0 alt="L6" src="L6.png"> </a></td></tr></table> </body> </html>

11-02-2009, 04:19 PM	#2
rogerknight New Member Join Date: Nov 2009 Webmaster Discussions: 2 Rep Power: 6	Re: I can't fix these gaps in a small table of images... I just fixed it myself! It all has to do with the spaces inbetween the <td> and </td>. There must be none. I don't understand this at all as I have been told, browsers ignore spaces in html code. All the same, once I took out the spaces, it worked. Like this: <tr><td><a href="about.html" onMouseOver="L1HandOver();return true;" onMouseOut="L1HandOut();return true;"> <img class="ladder" name=L1 width="100" height=37" border=0 alt="L1" src="L1.png"></a></td></tr> Instead of this: <tr><td><a href="about.html" onMouseOver="L1HandOver();return true;" onMouseOut="L1HandOut();return true;"> <img class="ladder" name=L1 width="100" height=37" border=0 alt="L1" src="L1.png"> </a></td></tr>

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

Similar Webmaster Discussions
Thread	Webmaster Discussion Starter	Forum	Replies	Last Post
small programmes	j600	Myspace Forum	1	02-27-2007 09:46 AM
Help with a small counter	Data_999	Javascript Forum	2	02-11-2007 06:55 PM
a small dialog box:	js2006	Javascript Forum	2	08-03-2006 11:21 PM
Small tutorial	html01	Show it off!	1	06-03-2005 07:48 AM
gaps between cells	Ania	HTML Forum	10	11-19-2004 10:32 PM