'position: relative' and Netscape 4

I'm having some difficulty with Netscape 4 and `position: relative'.

I have been asked to create a column of images with text overlayed on
them. The page will be generated dynamically and the number of images
and the text will vary.

I'm using the following CSS:

div.outer {
	position:       relative;
}

div.inner {
	position:       absolute;
	left:           10px;
	top:            10px;
}

img {
	vertical-align: text-bottom;
}

And each image goes inside HTML with the following structure:

<div class="outer">
   <img src="button_off.gif" name="button1" id="button1" alt="" />
   <div class="inner">
     Foo
   </div>
</div>

There is a demo page at http://aamcf.co.uk/temp/finder/demo

I have tested this on a range of browsers, and the behaviour in
Netscape 4 is very odd. Instead of seamlessly stacking the images one
on top of the other it puts a large vertical margin around each
div.outer. The margin disappears when I remove the `position:
relative' declaration from the div.outer rule.

I'm also getting unwanted whitespace around the images themselves, but
I can live with that- it's the huge vertical margins are the problem.
I've tried setting `margin: 0px; padding 0px;' in the div.outer,
div.inner and img rules, but to no avail.

Is it possible to solve this problem, or does anyone know of any
techniques for achieving a similar effect?

(I posted this query to usenet a couple of days ago - no response as yet - 
see 
<http://groups.google.com/groups?as_umsgid=%3C48055a8a.0205280509.395e0bff%40posting.google.com> 
)

Andrew
--
http://aamcf.co.uk/

HWG hwg-style mailing list archives, maintained by Webmasters @ IWA