We have a fun site/webapp thing that needs to be vertically responsive. We told them that it was going to be an awesome super futuristic html5, any device, etc. They were excited. We coded it up, figured out how to do it, and sent them the link and all management at the brand that has to approve. They are all running ie8. Our analytics actually show one person on ie6!!! So now we have to re-do, fix the jquery/javasript, do flash fallback, etc. Not too big of a deal, just more work.

Problem is...

To position the buttons horizontally (because there is no defined width, only a defined height of 100%) I have a shrink-wrapped div (or span I've tried both) around the main image.

The problem is in ie8, the shrinkwrapped div (or span) doesn't shrink wrap to the 100% height version of the image but to the actual version of the image and therefore the sizing and positioning of the buttons and videos aren't working.

Without the sticky div properly shrinkwrapped, the buttons and the video are messed up because they are positioned with %'s and sized with percentages - of the sticky div.

On IE8, I think it is taking measurements on the size of the actual image, before it resizes based on the 100% height parameter. In dev tools on IE8 I can uncheck the 100% height box and the sticky fits perfectly around the image.

I'll pm you the link so you can see better. It's just pretty private, so no sharing.