Jump to content

Remove spaces between vertical images


Darkmatter5

Recommended Posts

How can you remove the space between images that are separated by <br>?

 

example:

<img src="images/right.png" border="0" width="13" height="20" alt="right.png"><br>

<img src="images/right.png" border="0" width="13" height="20" alt="right.png"><br>

<img src="images/right.png" border="0" width="13" height="20" alt="right.png">

 

When this renders it's put's spaces of a few pixels in between each image.

Link to comment
Share on other sites

I'm not seeing any spaces?

 

<html>
<head>
</head>
<body>
<img src="images/right.png" border="0" width="43" height="40" alt="right.png"><br />
<img src="images/right.png" border="0" width="43" height="40" alt="right.png"><br />
<img src="images/right.png" border="0" width="43" height="40" alt="right.png">
</body>
</html>

Link to comment
Share on other sites

try giving your images display block.

 

when images are displayed 'inline' they apply (i think its) line height and you end up with this 'gap'.

 

also there is no need for the br tags - you are using them for presentational purposes so take them out and just use css.

 

giving these images float: left will give them block level display properties also (but you will have to use some clearing to prevent them from lining up alongside each other.

 

let us know how you get on.

Link to comment
Share on other sites

Okay I've made some progress.  With the code provided I get the vertically stacked images displaying with no "gap" their edges line up great in IE and Firefox, the horizontal images also lineup perfect, but the top row of my table and the next row of the table have a gap, but the middle row and the bottom row don't have a gap.  How can I fix this?

 

My CSS code

img { display: block; }

 

My page code

<table align="left" cellpadding="0" cellspacing="0" border="0">
  <tr >
    <td width="13" height="13"><img style='display: inline;' src="images/top-left.png" border="0" width="13" height="13" alt="top-left.png"></td>
    <td><?php $vein->repeat_images("top.png",20,"hor"); ?></td>
    <td width="13"><img style='display: inline;' src="images/top-right.png" border="0" width="13" height="13" alt="top-right.png"></td>
  </tr>
  <tr>
    <td width="13"><?php $vein->repeat_images("left.png",20,"ver"); ?></td>
    <td> </td>
    <td width="13"><?php $vein->repeat_images("right.png",20,"ver"); ?></td>
  </tr>
  <tr>
    <td width="13" height="13"><img style='display: inline;' src="images/bot-left.png" border="0" width="13" height="13" alt="bot-left.png"></td>
    <td><?php $vein->repeat_images("bot.png",20,"hor"); ?></td>
    <td width="13"><img style='display: inline;' src="images/bot-right.png" border="0" width="13" height="13" alt="bot-right.png"></td>
  </tr>
</table>

 

My repeat_images function code

function repeat_images($file,$times,$direction) {
  fopen("images/$file","r") or exit("Unable to open $file!");
  list($width,$height)=getimagesize("images/$file");
  $i=1;
  if($direction=="ver") {
    while($i<=$times) {
      echo "<img src='images/$file' border='0' width='$width' height='$height' alt='$file'>";
      $i++;
    }
  }
  elseif($direction=="hor") {
    while($i<=$times) {
      echo "<img style='display: inline;' src='images/$file' border='0' width='$width' height='$height' alt='$file'>";
      $i++;
    }
  }
}

 

Attached is a screen shot of the table as it's displayed in Firefox.

 

any ideas what I can do?

 

[attachment deleted by admin]

Link to comment
Share on other sites

You could just use Div's with Css background images? That way everything should align perfectly without any spacing. For what purpose are you repeating the images? If it's to create the border you could simply use Css for that as well.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.