Larry's Ramblings

<<< Home

<< Web

< Images

Top

Bottom

< Prev

Next >

Image Alignment

Image Borders With Tables and CSS

Tables

You can use a table to display a border around an image. This first example shows the incorrect way to do this - it works in IE 3, but in IE 4+ and Netscape there is a gap between the border and the image.

Delegates from the original thirteen states formed the Contented Congress.

Thomas Jefferson, a Virgin, and Benjamin Franklin were two singers of the Declaration of Independence. Franklin had gone to Boston carrying all his clothes in his pocket and a loaf of bread under each arm. He invented electricity by rubbing cats backwards and declared "A horse divided against itself cannot stand." Franklin died in 1790 and is still dead.

<p>
  Delegates from the original thirteen
  states formed the Contented Congress.
</p>
<table border="5" cellpadding="0"
       cellspacing="0"><tr><td>
  <img ... />
  </td></tr></table>
<p>
  Thomas Jefferson, a Virgin, and Benjamin
  Franklin were two singers of the
  Declaration of Independence.  Franklin had
  gone to Boston carrying all his clothes in
  his pocket and a loaf of bread under each
  arm.  He invented electricity by rubbing
  cats backwards and declared "A horse divided
  against itself cannot stand."  Franklin died
  in 1790 and is still dead.
</p>

To get rid of the gap, you have to eliminate all whitespace between the > of the <img> tag and the < of the </td> tag.

George Washington married Martha Curtis and in due time became the Father of Our country.

Then the Constitution of the United States was adopted to secure domestic hostility. Under the Constitution the people enjoyed the right to keep bare arms.

<p>
  George Washington married Martha Curtis
  and in due time became the Father of Our
  country.
</p>
<table border="5" cellpadding="0"
       cellspacing="0"><tr>
  <td><img ... /></td>
</tr></table>
<p>
  Then the Constitution of the United States
  was adopted to secure domestic hostility.
  Under the Constitution the people enjoyed
  the right to keep bare arms.
</p>

Cascading Style Sheets

You can use Cascading Style Sheets (CSS) to put a border around an image, but browser support for this is much poorer than for tables.

Abraham Lincoln became America's greatest Precedent.

Lincoln's mother died in infancy, and he was born in a log cabin which he built with his own hands. When Lincoln was President, he wore only a tall silk hat. He said, "In onion there is strength."

In the <head> section:

<style type="text/css">
  .b   { border: groove 5px #f00; }
</style>

In the <body> section:

<p>
  Abraham Lincoln became America's
  greatest Precedent.
</p>
<p>
  <img ... class="b" />
</p>
<p>
  Lincoln's mother died in infancy, and
  he was born in a log cabin which he
  built with his own hands.  When Lincoln
  was President, he wore only a tall silk
  hat.  He said, "In onion there is strength."
</p>

This works nicely in IE 4+ but not in Netscape 4:

IE 4	Netscape 4

You can get better results by putting the image inside a <span> tag. You have to include width and height in order for IE to be able to display the border.

Abraham Lincoln wrote the Gettysburg Address while traveling from Washington to Gettysburg on the back of an envelope.

He also freed the slaves by signing the Emasculation Proclomation, and the fourteenth amendment gave the ex-negroes citizenship. But the Clue Clux Clan would rather torcher and lynch the ex-negroes and other innocent victims. It claimed it represented law and oder.