So I've 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 I'm 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! :D :D
-e.ruckus

Why would you want to make the div's overlap, if they should simply nest into the container around it.

It's still hard for me to imagine, but I think the problem is in the fact that you used the negative value for top. Not sure if you may do that.

Can you give some information, maybe some visual material?

Hi,
I have to agree. The negative value is allowed but has mixed results. Did you try it in Opera?
I just relearned something in the last week I had forgotten about it. Just nesting should do it.
Peace,
Clarke