Absolute bottom annoyance in IE6

[raffaello]

Hello all

I am having great trouble getting this small hover text aligning at the bottom of its respective image.
The code works with a single image but as soon as i duplicate it the text aligns at the bottom of the page.

It seems to be a problem with the the bottom positioning element since there is no problem without it ie. just

right:0 

(except obviously its position)

Is this possible to fix? or alternative methods for the same effect? anything would be greatly appreciated.

CSS

.i {position:relative;}
.i a {display:block;}
.i a:link {} 
.i a:visited {} 
.i a:hover {text-indent: 0;} /* fixes a:hover span dec. */
.i a:hover span {display:block; position:absolute; right:0; bottom:0;}
.i a span {display:none;}

HTML

<div class="i"><a href="f.jpg"><span>(Click image to enlarge)</span><img src="bg_f.jpg"></a>
<p>caption</p>
</div>
<div class="i"><a href="g.jpg"><span>(Click image to enlarge)</span><img src="bg_g.jpg"></a>
<p>caption</p></div>

Thanks! Raff

[JAB Creations]

Implement this and play with the margins in this CSS file that will only be read by IE and completely ignored by all other browsers in all possible situations. While the CSS to fix IE's issues obviously aren't standards compliant the implemented method is. IE Mac does not support conditional comments [msdn2.microsoft.com] however.

<!--[if IE]><link href="fixie.css" media="screen" rel="stylesheet" title="use_same_title_for_all_concurrent_stylesheets" type="text/css" /><![endif]-->

If you still require assistance please provide a full quoted example including any doctype and related information so that I know if IE is rendering in quirks or standards mode on your page as that will effect IE's rendering. Have fun. :)

- John