Link to home
Start Free TrialLog in
Avatar of avissar
avissar

asked on

Gap between images

I have this code
<img src="topimg.gif">Hello<br><img src="BottomImg.gif"><img src="SideImg.gif">

when viewing the code in IE, it displays a small gap betwen the 2 topimg and the BottomImg.

if you delete the Hello word the gap doesnt show (but i need it).

Putting it in a table is not an option because i do not know the number of colums i would have.
ASKER CERTIFIED SOLUTION
Avatar of seanpowell
seanpowell
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ericsDev
ericsDev

add vspace="0" hspace="0" to all your image tags
Actually that won't work in this scenario, because the space is caused by the required line-height of the text.

If you consider the word Hello - the browser creates an overall line height that would also fit yellow. (The descender on the y is what causes the space.) Setting the "absbottom" attribute tells the browser to align the image with the actual bottom of the required line-height, not just the bottom of the visible text.

If you try this:

<img src="topimg.gif" hspace="0" vspace="0">yellow<br>
<img src="BottomImg.gif" hspace="0" vspace="0"><img src="SideImg.gif" hspace="0" vspace="0">

... you'll notice that the bottom of the y actually touches the bottom two images, but the gap is still the same as if the word was Hello.
thanks for the info, I hadn't and havn't tested it but I believe you are correct.  I'll keep that in mind.
Maybe you could try something like this:

<img src="topimg.gif" alt="" />Hello<br><span style="position:relative;top:-4px"><img src="BottomImg.gif" alt="" /><img src="SideImg.gif" alt="" /></span>

The results depend on the font size.
why not <img src=blah style="margin-bottom: 2px;">
assuming that your image are always larger in height than your used font (for Hello text) you may try following:

  img src="..." style="padding:0,margin:0;display:inline">Hello<br style="="padding:0,margin:0;">
This:
<img src="topimg.gif" hspace=0 vspace=0 border=0>Hello<br><img src="BottomImg.gif" hspace=0 vspace=0 border=0><img src="SideImg.gif" hspace=0 vspace=0 border=0>

or the best way would be in a table using width settings:

<table cellpadding=0 cellspacing=0 border=0>
<tr>
       <td align=left valign=top width="a"> <img src="topimg.gif" width="a"></td>
       <td align=left valign=top width="c">Hello</td>
</tr>
<tr>
       <td align=left valign=top width="b"><img src="BottomImg.gif" width="b"></td>
       <td align=left valign=top width="c"><img src="SideImg.gif" width="c"></td>
</tr>
</table>
the error is the alignment of the image beside hello. put it to absmiddle and it works:

 <img src="topimg.gif" width="40" height="40" hspace="0" vspace="0" align="absmiddle">Hello<br>
  <img src="BottomImg.gif" width="40" height="40" hspace="0" vspace="0" align="top"><img src="SideImg.gif" width="40" height="40" hspace="0" vspace="0" align="top">
>> put it to absmiddle and it works
Basically the same condition as the absbottom attribute, it will depend on where the text needs to line up adjacent to the image...