Darkmatter5 Posted December 31, 2008 Share Posted December 31, 2008 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. Quote Link to comment Share on other sites More sharing options...
Darkmatter5 Posted December 31, 2008 Author Share Posted December 31, 2008 instead of <br>, I've tried <span></span> around each image. This works for IE, but strangely enough Firefox is the browser exhibiting the issue. Anyone know a remedy? Quote Link to comment Share on other sites More sharing options...
xtopolis Posted December 31, 2008 Share Posted December 31, 2008 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> Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted January 1, 2009 Share Posted January 1, 2009 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. Quote Link to comment Share on other sites More sharing options...
Darkmatter5 Posted January 2, 2009 Author Share Posted January 2, 2009 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] Quote Link to comment Share on other sites More sharing options...
adx Posted January 3, 2009 Share Posted January 3, 2009 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. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted January 4, 2009 Share Posted January 4, 2009 <div id="wrapper"> <img /><img /><img /> </div> #wrapper { overflow: auto; } #wrapper img { float: left; } That's all there's to it. Quote Link to comment Share on other sites More sharing options...
Daniel0 Posted January 4, 2009 Share Posted January 4, 2009 <div id="wrapper"> <img /><img /><img /> </div> #wrapper { overflow: auto; } #wrapper img { float: left; } That's all there's to it. Images are displayed as inline by default, so floating them is redundant. Quote Link to comment Share on other sites More sharing options...
Gighalen Posted January 6, 2009 Share Posted January 6, 2009 try adding margin:0px; attribute to your images as well. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.