Solved

Gap between images

Posted on 2003-10-30
10
391 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
10 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

785 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