72 users online (0 members and 72 guests)  

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

  Results 1 to 3 of 3

Related

  1. small programmes    Forum: Myspace Forum
    Replies: 1
  2. Help with a small counter    Forum: Javascript Forum
    Replies: 2
  3. Small tutorial    Forum: Show it off!
    Replies: 1
  4. gaps between cells    Forum: HTML Forum
    Replies: 10
  1. 11-02-2009, 07:45 AM #1
    rogerknight
    rogerknight is offline
    rogerknight's Avatar
    New User
    Status
    Offline
    Join Date
    Nov 2009
    Posts
    2

    Unhappy 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>
    Reply With Quote Reply With Quote
  2. 11-02-2009, 04:19 PM #2
    rogerknight
    rogerknight is offline
    rogerknight's Avatar
    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>
    Reply With Quote Reply With Quote
  3. 11-04-2009, 10:04 AM #3
    jthayne
    jthayne is offline
    jthayne's Avatar
    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

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

    Quote Originally Posted by rogerknight View Post
    ...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 &nbsp; to put in multiple spaces.
    Coding and Misc Thoughts.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread