Scale Absolute positioned element in IE8 with scaling

Question

Right now I am using an absolutely positioned div to achieve the background splitting effect for the page. It works fine alone, but now I need to embed it in a div and scale it with scaling. When I do this in IE 8, the absolute positioned element does not scale and remains the same.

<div class="scale-wrap"> <div class="scale-frame"> <div class="container"> some content </div> <div class="split-page-bg"></div> </div> </div> 

CSS

 .scale-wrap { border: 1px solid #ccc; box-shadow: 1px 3px 5px #777; height: 426px; margin-left: -20px; overflow: hidden; padding: 0; width: 410px; } .scale-frame { -ms-zoom: 0.43; -ms-transform-origin: 0 0; -moz-transform: scale(0.43); -moz-transform-origin: 0 0; -o-transform: scale(0.43); -o-transform-origin: 0 0; -webkit-transform: scale(0.43); -webkit-transform-origin: 0 0; } .scale-frame { border: 0; height: 1000px; overflow: hidden; width: 950px; } .split-page-bg { background-color: #f3f3f3; top: 0; display: block; height: 400px; position: absolute; width: 100%; z-index: 10; } 

Answer 1

I am developing a similar problem. Try increasing: .43;

However, I ran into problems with the scaling property in IE8 - this is how I came across this post. Let me know how it works for you!

---

UPDATE: I found this that seems to work better for me. Your mileage may vary:

-ms-filter: "progid: DXImageTransform.Microsoft.Matrix (M11 = 0.43, M12 = 0, M21 = 0, M22 = 0.43, SizingMethod = 'auto expand')";