Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 417
  • Last Modified:

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.
0
avissar
Asked:
avissar
1 Solution
 
seanpowellCommented:
You need the "absbottom" attribute:

<img src="topimg.gif" border="0" align="absbottom">Hello<br>
<img src="BottomImg.gif" border="0"><img src="SideImg.gif" border="0">

Thanks,
GM
0
 
ericsDevCommented:
add vspace="0" hspace="0" to all your image tags
0
 
seanpowellCommented:
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.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
ericsDevCommented:
thanks for the info, I hadn't and havn't tested it but I believe you are correct.  I'll keep that in mind.
0
 
apprentiCommented:
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.
0
 
makcCommented:
why not <img src=blah style="margin-bottom: 2px;">
0
 
ahoffmannCommented:
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;">
0
 
dsynCommented:
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>
0
 
NetwingCommented:
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">
0
 
seanpowellCommented:
>> 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...
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now