So ive this database driven site that displays its results in a table with a series of <div> tags for layering and positioning purposes. I wanted to create a link to more information about a specific result but im having trouble getting everything working the way i want.

To be more specific, imagine this...
Ive got a div tag that displays a border around all of the results content, as well as a background image. Then another div tag on top of that with all of the results content. Then a final div tag on top of that displaying a transparent gif image that is linked to more info about that specific result.

The problem is on the bottom div tag, where the border and background pic are displayed, i used css to define the height as 300px. Then on the top div tag, with the transparent image, i defined the height as 300px and used style="position:relative;top:-300;" to get the transparent image on top of the other div tag.

When this is displayed in firefox and other standards loving browsers the border is 300px tall, the transparent images is over all my content and everything is great. But when displayed in IE6 the border is 600px tall, but it still puts the transparent image over my content. Does anyone out there have any idea why this is happening and how it can be resolved?

Many thanks in advance!!
-e.ruckus