Larry's Ramblings

<<< Home

<< Web

< Images

Top

Bottom

< Prev

Next >

Image Alignment

Making Images Touch

In IE 3, the following images all touch each other with no gaps. But in IE 4+ and in Netscape there are gaps between the images

On the night of April 14, 1865, Lincoln went to the theater and got shot in his seat by one of the actors in a moving picture show. This ruined Booth's career.

Meanwhile in Europe the enlightenment was a reasonable time. Voltare invented electricity and also wrote a book called Candy. Gravity was invented by Isaac Walton. It is chiefly noticable in the Autumn when the apples are falling off trees.

<p>
  On the night of April 14, 1865, Lincoln
  went to the theater and got shot in his
  seat by one of the actors in a moving
  picture show.  This ruined Booth's career.
</p>
<p>
  <img ... />
  <img ... />
  <br />
  <img ... />
  <img ... />
</p>
<p>
  Meanwhile in Europe the enlightenment was
  a reasonable time.  Voltare invented
  electricity and also wrote a book called
  Candy.  Gravity was invented by Isaac Walton.
  It is chiefly noticable in the Autumn when
  the apples are falling off trees.
</p>

To make the images touch in IE 4+ and Netscape 4, you have to get rid of all whitespace between the > of each <img> tag and the < of the following tag:

Bach was the most famous composer in the world, and so was Handel.

Handel was half German, half Italian, and half English. He was very large. Bach died from 1750 to the present. Beetoven wrote music even though he was deaf. He was so deaf he wrote loud music. He took long walks in the forest even when everyone was calling for him. Beetoven expired in 1827 and later died for this.

<p>
  Bach was the most famous composer
  in the world, and so was Handel.
</p>
<p>
  <img ...
  /><img ...
  /><br /><img ...
  /><img ... />
</p>
<p>
  Handel was half German, half Italian,
  and half English.  He was very large.
  Bach died from 1750 to the present.
  Beetoven wrote music even though he was
  deaf.  He was so deaf he wrote loud music.
  He took long walks in the forest even when
  everyone was calling for him. Beetoven
  expired in 1827 and later died for this.
</p>

If you really want gaps between the images as in the first example, remember that IE 3 shoves them together. To prevent this, put a   between the images.

Notice what happens when you have align="left" in the images:

France was in a very serious state. The French Revloution was accomplished before it happened.

The Marseillaise was the theme song of the French Revolution. It catapulted into Napoleon. During the Napoleonic Wars, the crowned heads of Europe were trembling in their shoes.

<p>
  France was in a very serious state.
  The French Revloution was accomplished
  before it happened.
</p>
<p>
  <img ... align="left"
  /><img ... align="left" />
  The Marseillaise was the theme song of
  the French Revolution. It catapulted into
  Napoleon. During the Napoleonic Wars, the
  crowned heads of Europe were trembling in
  their shoes.
  <br clear="all" />
</p>

Even though we've got no whitespace between the image tags, we've got a gap between the images. That's because when you specify align="left" or align="right", the default for hspace is no longer zero. Let's add hspace="0":

Then the Spanish gorillas came down from the hills and nipped at Napoleon's flanks.

Napoleon became ill with bladder problems, and was very tense and unrestrained. He wanted an heir to inherit his power, but since Josephine was a baroness, she couldn't bear children.

<p>
  Then the Spanish gorillas came down from
  the hills and nipped at Napoleon's flanks.
</p>
<p>
  <img ... align="left" hspace="0"
  /><img ... align="left" hspace="0" />
  Napoleon became ill with bladder problems,
  and was very tense and unrestrained. He
  wanted an heir to inherit his power, but
  since Josephine was a baroness, she
  couldn't bear children.
  <br clear="all" />
</p>