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. Link to comment https://forums.phpfreaks.com/topic/139038-remove-spaces-between-vertical-images/ 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? Link to comment https://forums.phpfreaks.com/topic/139038-remove-spaces-between-vertical-images/#findComment-727214 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> Link to comment https://forums.phpfreaks.com/topic/139038-remove-spaces-between-vertical-images/#findComment-727253 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. Link to comment https://forums.phpfreaks.com/topic/139038-remove-spaces-between-vertical-images/#findComment-727390 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] Link to comment https://forums.phpfreaks.com/topic/139038-remove-spaces-between-vertical-images/#findComment-728074 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. Link to comment https://forums.phpfreaks.com/topic/139038-remove-spaces-between-vertical-images/#findComment-728946 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. Link to comment https://forums.phpfreaks.com/topic/139038-remove-spaces-between-vertical-images/#findComment-729189 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. Link to comment https://forums.phpfreaks.com/topic/139038-remove-spaces-between-vertical-images/#findComment-729495 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. Link to comment https://forums.phpfreaks.com/topic/139038-remove-spaces-between-vertical-images/#findComment-731123 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.