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

rogerknight · #1 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 · #2 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 · #3 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.