Images

  Dorkins 09:07 11 Jan 2007
Locked

I know how to use the br clear="left">, br clear="right"> and br clear="all"> tags but there is a way of getting the text directly below an image without a gap or space between the image and the text. Only i can't for the life of me remember it. Could someone help me out here please. Thanks

  Eric10 11:04 11 Jan 2007

Can you put it inside a div and use <br> like this or is it more complicated?

<p>Paragraph text here.
<div style="text-align: center; float: left; padding: 10px"><img src="your_image.jpg"> <br>Following text under picture.
</div>
</p>

If your picture isn't floated inside a paragraph then just use <br> on its own.

  LeadingMNMs 18:28 11 Jan 2007

From my quick test it seems to be a problem with IE. In Firefox my text was directly under the picture, while in IE there was clearly a gap.

I tried setting margins and padding to 0, but that did nothing, so I set them as negative which did indeed close the space. The problem is that this messes up the layout in other browsers, causing an overlap as expected.

  Eric10 20:27 11 Jan 2007

I may have misunderstood just what you were asking.
If you use the following:
<img src="your_image.jpg"><br clear="left">
<p>Paragraph text under picture</p>
Then you get a space between the picture and the text due to starting a new paragraph.

If you use:
<img src="your_image.jpg"><br clear="left"><div>Text in a div under the picture</div>
Then you don't get a space.

Also if you put both the picture and the text in the same paragraph but separated by the line break like:
<p><img src="your_image.jpg"><br clear="left">Both picture and text inside a paragraph</p>
Then you don't get a space either.

Tested in IE6, IE7, Firefox 1.5, and Opera 9.10 and they all display the same.

  Dorkins 21:37 11 Jan 2007

My problem is i have got text-image-text all on one line which looks great but the line of text which comes immediately after there is a gap/space which spoils the effect.

  Eric10 22:29 11 Jan 2007

It would help greatly if you could show us the section of code that is giving you the problem otherwise we are just shooting in the dark. Or if the site is online a link to it would be even better.
In the meantime you could try this for the paragraph you are wanting to move up:
<p style="margin-top: -35px">Text here.</p>

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Fujitsu Lifebook P727 laptop review

Converse's new logo: the trainer brand looks to its heritage for a fresh identity

Mac power user tips and hidden tricks

Comment lancer Windows 10 en mode sans ├ęchec ?