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.
avissarAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.