?
Solved

Gap between images

Posted on 2003-10-30
10
Medium Priority
?
412 Views
Last Modified: 2010-04-09
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
Comment
Question by:avissar
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 2000 total points
ID: 9649232
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
 
LVL 2

Expert Comment

by:ericsDev
ID: 9654361
add vspace="0" hspace="0" to all your image tags
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9654454
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:ericsDev
ID: 9654460
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
 
LVL 4

Expert Comment

by:apprenti
ID: 9661809
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
 
LVL 3

Expert Comment

by:makc
ID: 9665969
why not <img src=blah style="margin-bottom: 2px;">
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 9669679
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
 
LVL 1

Expert Comment

by:dsyn
ID: 9672833
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
 
LVL 2

Expert Comment

by:Netwing
ID: 9677650
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9678476
>> 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question