HTML Forum

**Nathand** · 07:04 PM

Is there any way at all that I can eliminate the vertical gaps between images? I need one large image to be on top of two smaller images, but I don't want a vertical gap between any of them. How can I accomplish this?

Thanks for the help,
Nathan

[edit] I also forgot to add that there are horizontal gaps as well, I'd like to get rid of those as well. [/edit]

**JamieLewis** · 08-06-2007, 07:03 PM

UM you are quite vague. So I can only give a vague answer, use CSS.

Jamie

**Nathand** · 08-06-2007, 07:17 PM

Sorry about that, here's an example of what I mean: http://www.2008.huntingtonrobotics.org/media/images.php

As you can see there are "gaps" between all the images, above, below, and on the sides.

**JamieLewis** · 08-06-2007, 07:19 PM

Use CSS and set their margins and padding to 0px.

Jamie

**Nathand** · 08-06-2007, 07:30 PM

Thanks for the help. That seemed to take care of the margin, but not the spacing between images. See here: http://www.2008.huntingtonrobotics.org/media/images.php

**JamieLewis** · 08-06-2007, 07:34 PM

You need to use CSS on the images themselves. That should work then.

Jamie

**Nathand** · 08-06-2007, 07:54 PM

I used this code to apply the style to the images:

Code:

<head>
  <style type="text/css">
  img {margin: 0px; padding: 0px;}
  </style>
</head>

But it's not working. Did I not use the correct html syntax?

**JamieLewis** · 08-06-2007, 08:00 PM

Browsers add margins to things to be nice: YOu can try negattive margins like:

Code:

img {
margin: -2px -3px; 
padding: 0px;
}

Or try using position:absolute;

Jamie

**vkw91** · 08-07-2007, 06:34 AM

To remove the vertical lines, just keep the the 3 images on one line of code. I seemed to work for me.

Code:

<body>

<img width="100" height="100" src="./pictures/black.JPG"><img width="100" height="100" src="./pictures/brown.JPG"><img width="100" height="100" src="./pictures/pink.JPG"> <br>
<img width="100" height="100" src="./pictures/purple.JPG"><img width="100" height="100" src="./pictures/red.JPG">

</body>

**Ksaniya** · 08-08-2007, 08:29 AM

I prefer not to use negative margins - they don't smell good.
They are well-taken in very peculiar situations, but not now.
Try this code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
    .images {width:330px;}
    .images IMG {float:left; width:100px; height:100px;}
</style>
</head>
<body>
<div class="images">
    <img src="brown.JPG">
    <img src="pink.JPG">
    <img src="purple.JPG">
    <img src="red.JPG">
    <img src="brown.JPG">
    <img src="pink.JPG">
    <img src="purple.JPG">
    <img src="red.JPG">
    <img src="brown.JPG">
</div>
</body></html>

**InfinitySchima** · 08-08-2007, 09:22 AM

I had (and have) the same problem once. I tried to fill a table with images, one image on each <td>. I got it pretty well (without any gaps) on Firefox, but (are you already guessing?.....) IE didn't displayed it like I wanted.
What I did was to set:
padding:0px on <table>
margin:0px; padding:0px on <th> (or <td>, doesn't matter)
margin:0px; padding:0px on <tr> (but I think this doesn't changed anything)
margin:0px; padding:0px on <img>

now the tricky thing is that it still may show gaps all around the images, for that on the <table> tag I have set cellspacing="0" , I never saw this possible in CSS, wonder why. Anyways, with that cellspacing it rendered very well in FF. But on IE it still shows horizontal lines, I think it may have to do with <tr>, but I never managed to get rid of them.
Also, when you add the image use
<td><img></td> (note the lack of space between the tags).
Another possibility would be absolute positioning, but thats up to you to decide

Schimassek...

**Ksaniya** · 08-08-2007, 10:21 AM

InfinitySchima,
try this sample:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
    .images {width:300px; border-collapse:collapse;}
    .images TD {padding:0;}
    .images TD IMG {width:100px; height:100px;}
</style>
</head>

<body>
<table class="images">
  <tr>
    <td><img src="brown.JPG"></td>
    <td><img src="pink.JPG"></td>
  </tr>
  <tr>
    <td><img src="red.JPG"></td>
    <td><img src="brown.JPG"></td>
  </tr>
</table>
</body></html>

The code is simple and valid. Styles are helpful, aren't they?

**Nathand** · 08-08-2007, 05:03 PM

Ksaniya! Thank you, it's beautiful and works perfect!!!

Thanks again!
-Nathan

**Nathand** · 08-08-2007, 09:12 PM

I guess I spoke too soon

The code I thought worked really doesn't work well being inside a div. I thought it did, but once I put a border around the div I saw that the div was actually getting "squished"up, and that the images were actually outside the div?

Tell me this. Is there any way to achieve exactly this: http://www.2008.huntingtonrobotics.org/media/images.php

without having to eliminate all whitespace?

Thanks for the help,
Nathan

**Ksaniya** · 08-09-2007, 05:50 AM

Hi Nathand,

Probably I didn't quite catch your question, but I made a sample for you.
Styles are a bit different from yours. I didn't try to eliminate any whitespace, just put one image after another with float:left.

Code:

.images {width:800px; background:#333; margin:0 auto; border:2px solid red;}
.images IMG {float:left; width:100px; height:100px;}

**InfinitySchima** · 08-10-2007, 07:31 AM

In respond to post #12

Thanks Ksaniya, I tried your sample code and I saw the images displaying fine, then I tried to put it in my code, but had no luck, it still shows the horizontal lines. FF works fine, the only problem is IE. I have got PHP code inside the table and the tds, but I payed close attention not to leave any white-spaces, altough I think they are not the problem. Could you please see if you find any flaw in here?
This is the stylesheet:

Code:

.map { border-collapse: collapse;
     }

.map td { padding: 0px;
        }

.map td img { width: 25px;
              height: 25px;               
            }

.map td img:active { margin: 0px;
                     border-width: 1px;
                     border-color: #dd4444;
                     border-style: solid;
                   }

.map td span { display: none;
               position: absolute;
               background-color: #FFFFF5;
               border: solid 1px #333333;
               text-align: left;
               white-space: nowrap;
               padding: 3px;
               margin-top: 15px;
               margin-left: 15px;
               font-weight: 300;
             }

.map td:hover span { display: block;
                   }

And this is the actual code (just a part of it, the most important parts):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style1.css">
</head>

<body>
      <center><table class="map">
<?php
      for ($y = $maxy; $y >= $miny; --$y) {
        ?><tr><?php
        for ($x = $minx; $x <= $maxx; ++$x) {
          $sqlquery4 = "((SELECT QUERY))";
          $sqlresult4 = mysql_query($sqlquery4);
          $sqlnum4 = mysql_numrows($sqlresult4);
          $comment = $x." : ".$y;
          for ($a = 1; $a <= $somevariable; ++$a) {
            if ($mapresource[1][$x][$y][$a][1] != NULL)
              $comment .= "<br>".$mapresource[1][$x][$y][$a][1]." : ".$mapresource[1][$x][$y][$a][2]." ( "._getrsrcdayrecovery($mapresource[1][$x][$y][$a][3], $users, $resourcebalance)." )";
          }
          if ($sqlnum4 > 0) {
            ?><td><img src="../path/to/my/site/1_<?= $x."_".$y; ?>.png"/><span><?= $comment; ?></span></td><?php
          } else {
            ?><td><img src="../path/to/my/site/nopanel.png" title="Free Space"/></td><?php
          }
        }
        if ($y != $miny) { ?></tr><tr><?php }
        else { ?></tr><?php }
      }
    ?></table></center>
</body>
</html>

Would be really great if you could find out how those lines appear (example in Attachment).

Schimassek...

PS: The image just represents an overview from a small cave with lava, nevermind it

, just notice the white lines, heh

**Ksaniya** · 08-10-2007, 09:42 AM

I can't test your code now... Just can guess...
Try to put <br> tag after each <img>.
IE puts some space after every image and <br> must help.

**Nathand** · 08-11-2007, 06:35 PM

Thanks Ksaniya, the code you posted in #15 helped a lot

I've got everything working pretty good now thanks you you

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!