Phantom space between images

jonnymorris · #1 (**permalink**) Jul 2nd, 2007, 23:31

I seem to be having some trouble discovering why in blazes there is a space after my first image in a table cell, the image itself does not contain a space and if I switch the images around it is always the first one on the line that has a space after it. Nnnnnnnggg! Please anyone, if you can spot something in my code that's causing this or have another suggestion, do tell

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    
  <title>Wildlife Photography</title>
</head>

<body bgcolor="#003300" text="#000000" link="#ff99cc" vlink="#6600ff" leftmargin=0 rightmargin=0 topmargin=0>

<table border="1" cellpadding="0" cellspacing="0" bgcolor="#003300" align="right">

      <tr>
          <td>
              <img alt="Index" border="0" align="top" src="images/cloudscape_ladybirdcone.jpg">
          </td>         
      </tr>
      
      <tr>
        <td>
            <img alt="Insects" border="0" align="top" src="images/bt_insects.png">
            <img alt="Animals" border="0" align="top" src="images/bt_animals.png">
        </td>
    </tr>
    
  
</table>

</body>
</html>

Also I have a question about the use of topmargin etc, Validator tells me it's wrong so is there an equivalent I should be using (to remove the borders to the browser window edge)?

BGarner · #2 (**permalink**) Jul 3rd, 2007, 00:41

I would not use tables (I would use CSS), but can you give a link so we can see exactly what you're talking about?

Lchad · #3 (**permalink**) Jul 3rd, 2007, 00:44

Not sure what you are trying to do.
You have one image in the top row.
Then two images in the bottom row.
That's why you are getting a space in the top row.

It's hard for me to tell exactly because I don't know the width's of the images.

Can you give more details?
First off.. set some widths and heights on the images.

jonnymorris · #4 (**permalink**) Jul 3rd, 2007, 08:19

Quote:

Originally Posted by BGarner

I would not use tables (I would use CSS), but can you give a link so we can see exactly what you're talking about?

OK I've uploaded it here:

http://www.jonathanmortimer.co.uk/test2/test3/test.html

I added in the width and height things as someone suggested but it made no difference. The gap is part of the first img tag in that cell but I can't for the life of me see why it's there.

Is it the table that's causing this? I don't think I ever had this problem with tables before. Perhaps someone could direct me to a good example of this kind of layout using CSS

jonnymorris · #5 (**permalink**) Jul 3rd, 2007, 11:37

I tried a different approach using table cells to manage each image, it seems to solve the problem. New version is up at http://www.jonathanmortimer.co.uk/test3/

Just out of interest I tried a page with nothing but the two images and it still produced a small gap to the right of each one, regardless of whether there were just two or ten images. I still don't know what causes it, but I'm sure html/browsers didn't used to do that.

Lchad · #6 (**permalink**) Jul 3rd, 2007, 11:41

Glad you have it sorted out. Table cells are the way to do it IF you are going to use tables.

However you have just experienced one of the downfalls of using tables. You don't have control over spacing like you would if you were using xhtml/css.

I suggest you have a look at the beginner resources, lot of great information on the basics of handcoding.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
ie6 white space under div	AndrewChip	Web Page Design	1	Jun 11th, 2008 13:15
unwanted space between 2 images	Craigj1303	Web Page Design	1	Apr 6th, 2008 12:04
PM Space	JacobHaug	Webforumz Cafe	12	Oct 1st, 2007 02:47
how to finish the space between images	s_mazhar	Graphics and 3D	3	Dec 28th, 2005 13:30
Space on table	iceytina	Web Page Design	6	Dec 11th, 2005 23:38

		Webforumz.com > Main Forums > Design Your Website > Starting Out
Phantom space between images