Coupling Text & Images?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I'm trying to create a page with image/text layouts similar to comic
books or story-boards.  First, I tried adding text directly to the
image via an image editor, but resizings degraded the text quality, so
I decided to use "real" text.  This meant coupling the text and the

To couple them, I tried using tables to make sure that text and images
stayed together.  Unfortunately, the table layout kept on getting
corrupted by the image.  It was weird, the table would occasionally get
resized beyond the image's bound, and at other times, the image would
ignore the cell size.  Here's what I was trying to do to get 4 images
per line w/ annotated text at the top of each image:

<p align=center>
<table width=100%border=1 cellpadding=0 cellspacing=0
<td width=24%>Some sample Text</td>
<td width=24%>Some more sample text</td>
<td width=24%>Third text</td>
<td width=24%>Final text</td>
<td width=24%><img src="img1.jpg" width=24%></td>
<td width=24%><img src="img2.jpg" width=24%></td>
<td width=24%><img src="img3.jpg" width=24%></td>
<td width=24%><img src="img4.jpg" width=24%></td>

The actual source is more complex than this, but I hope you get the

Any ideas how to get this to work?  If the table idea won't do it, then
what would you recommend for what I'm trying to achieve?

I'm using IE 6.0.2+ with the latest service packs.  As long as the
solution will work in IE, portability doesn't matter.
Thanks in Advance.

Re: Coupling Text & Images? wrote:

Quoted text here. Click to load it /
should give you the ideas you need.  It's links positioned with CSS above an
image.  Of course, you don't have to use links --  plain old text can be
used just as well.

Re: Coupling Text & Images? wrote:

Quoted text here. Click to load it

Don't get us started.

Re: Coupling Text & Images?

Hi All,

I managed to figure out the answer -- or at least a work-around.  Don't
use percentages for sizing.  For example, here's one that works:

<table border=0 cellspacing=5 cellpadding=5 align=center>
<td width=190 align=center bgcolor=yellow><b>Test 1</td>
<td width=190 align=center bgcolor=yellow><b>Test 2</td>
<td width=190 align=center bgcolor=yellow><b>Test 3</td>
<td align=center valign=top><img src="img1.jpg"  width=250
<td align=center valign=top><img src="img2.jpg"  width=250
<td align=center valign=top><img src="img3.jpg"  width=250

Thanks to everyone who constructively replied to my post.

Site Timeline