Results 1 to 3 of 3
Related
-
small programmes Forum: Myspace Forum
Replies: 1 -
Help with a small counter Forum: Javascript Forum
Replies: 2 -
Small tutorial Forum: Show it off!
Replies: 1 -
gaps between cells Forum: HTML Forum
Replies: 10
-
11-02-2009, 07:45 AM #1
New User
Status- Offline
Join Date- Nov 2009
Posts- 2
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
New User
Status- Offline
Join Date- Nov 2009
Posts- 2
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>
-
11-04-2009, 10:04 AM #3
Status- Offline
Join Date- Aug 2008
Location- Texas
Posts- 508
Re: I can't fix these gaps in a small table of images...
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.
Originally Posted by rogerknight
Reply With Quote
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum