Mysterious Spaces with images

liunx · Jan 10, 2008

Got a very annoying problem is have been solving the hard way forever now but i would like to know how this can be solved without making your sourcecode totally unreadable. 
 
Here is my problem. 
Got a series of 5 images which need to be placed next to eachother in a table cell. I code it like this: 
<img src=http://www.htmlforums.com/archive/index.php/"bla"> 
<img src=http://www.htmlforums.com/archive/index.php/"bla"> 
<img src=http://www.htmlforums.com/archive/index.php/"bla"> 
<img src=http://www.htmlforums.com/archive/index.php/"bla"> 
<img src=http://www.htmlforums.com/archive/index.php/"bla"> 
 
The problem is now that when i view the page each image has a single whitespace on the right side which actually seriously messes up the total design. 
 
I have always been solving the problem this way: I recoded it and put all the images on one line. 
<img src="bla"><img src="bla"><img src="bla"><img src="bla"><img src=http://www.htmlforums.com/archive/index.php/"bla"> 
 
This always solved the problem till now, i gotta add serveral css styles and javascript to each image. The problem is that it makes the code totally unreadable when i put it on one line. 
 
Does anyone know a different way to solve this? 
 
I already tried CSS margin, display:inline, etc but none helped.did you make the padding zero and the border zero?yup, disabled margin, padding and border with CSS: 
td img { 
display: inline; 
margin: 0px; 
padding: 0px; 
border: 0px; 
} 
 
this is the whole code i got now: 
 
 
<IMG SRC=http://www.htmlforums.com/archive/index.php/"img/menu/01_home.jpg" WIDTH="35" HEIGHT="35" BORDER="0" NAME="imghome" ALT="Home" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imghome','','img/menu/01_home_o.jpg',1)"><IMG SRC=http://www.htmlforums.com/archive/index.php/"img/menu/02_homes.jpg" WIDTH="55" HEIGHT="35" BORDER="0" NAME="imghomes" ALT="Homes" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imghomes','','img/menu/02_homes_o.jpg',1)"><IMG SRC=http://www.htmlforums.com/archive/index.php/"img/menu/03_apartments.jpg" WIDTH="85" HEIGHT="35" BORDER="0" NAME="imgapartments" ALT="Apartments" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imgapartments','','img/menu/03_apartments_o.jpg',1)"><IMG SRC=http://www.htmlforums.com/archive/index.php/"img/menu/04_land.jpg" WIDTH="50" HEIGHT="35" BORDER="0" NAME="imgland" ALT="Land" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imgland','','img/menu/04_land_o.jpg',1)"><IMG SRC=http://www.htmlforums.com/archive/index.php/"img/menu/05_projects.jpg" WIDTH="65" HEIGHT="35" BORDER="0" NAME="imgprojects" ALT="Projects" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imgprojects','','img/menu/05_projects_o.jpg',1)"><IMG SRC=http://www.htmlforums.com/archive/index.php/"img/menu/06_virtualtours.jpg" WIDTH="105" HEIGHT="35" BORDER="0" NAME="imgvirtualtours" ALT="Virtual Tours" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imgvirtualtours','','img/menu/06_virtualtours_o.jpg',1)"><IMG SRC=http://www.htmlforums.com/archive/index.php/"img/menu/07_financing.jpg" WIDTH="80" HEIGHT="35" BORDER="0" NAME="imgfinancing" ALT="Financing" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imgfinancing','','img/menu/07_financing_o.jpg',1)"><IMG SRC=http://www.htmlforums.com/archive/index.php/"img/menu/08_inspection.jpg" WIDTH="85" HEIGHT="35" BORDER="0" NAME="imginspection" ALT="Inspection" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('imginspection','','img/menu/08_inspection_o.jpg',1)"></TD> 
 
 
And i would like it to change so that i can put each <img tag on new line ... easier to read u know

display: inline only works on block level elements and an img is not one of them. 
 
I am failing to see what issues you are having? are you saying that if you stick them on a line by themselves they create a space? if so can you show us the page?Hope this helps: <a class="postlink" href="http://www.scratchlabs.com/stuff/htmlforums-spaces/">http://www.scratchlabs.com/stuff/htmlforums-spaces/</a>ahhh, try putting every img in a table with no borders, cellspacing, cell padding and set the table's style attribute to display:inline;; not only should that solve the problem but the tables ahould wrap automatically as the window is resized...Gah, i should slam my head against my desk for the rest of the day for not thinking about that

thanks dude! 
 
But still ... i think fixing this issue in msie and other browsers would make our work alot easier, but then again there are soooo much things that could make our work easier, finding another job is one of em, lol

yw... 
 
but thank scout, he's the one who told me about setting the display:inline on a table yesterday

and unfortunately that is the only way. those spaces are the samething when you make a table cell go 2-3 lines. 
 
<td><img> 
</td> 
 
that would produce the same effect. the browser is using the new line as a space which in the past they never worried about spaces. 
 
you could also stick them in div tags and display those inline. less code then a tableOriginally posted by scoutt 
 
 
you could also stick them in div tags and display those inline. less code then a table 
 
That's what i would do

Mysterious Spaces with images

liunx

Guest