absolute within relative//IE 6 & 7 mock me//what bug is this?

[burlyscudd]

I'm trying to use absolute positioning within a relatively positioned div to keep an image near the bottom of the container--i.e., in the same (vertical) spot on every div:

Witness code:
http://catapult-creative.com/plp_test/index.html

The "Learn More" images are what I'm hoping to keep in a uniform spot near the bottom.

Works as hoped in Ffox, jacked in similar ways in MSIE 6 & 7.

I'm sure this is just another positioning bug I'm not familiar with. Tried applying Holly Hack to containing div, but no dice.

Any help will be greatly appreciated!

[Kravvitz]

Why are you using XHTML code with an HTML doctype?

IE is incorrectly making .tocq_promo_body clear .tocq_promo_image. Add clear:both to .tocq_promo_body and then change its height.

I suggest you read Tips on Debugging Layouts.

[Paul O'B]

Ho,

What Kravvitz said plus you will also need to set the left position on the image for IE otherwise the horizontal position will be different.

.tocq_promo_body {
    width: 157px;
    height:200px;
    padding: 5px;
    top:10px;
    position:relative;
 clear:both;
}

img.learn_more {
    display:block;
    position:absolute;
    bottom:10px;
    left:10px;
}

[burlyscudd]

Thanks for the tips, guys. Krav, this link looks really useful--thanks for passing it along! Sorry it took me so long to repost. I'll make these changes and see what happens.