CODEWITHSUNDEEP
cssinternet-explorerzoomingcss-position
BillPull
BillPull

Reputation: 7013

Scale Absolute Positioned Element in IE8 with Zoom

Right now I am using an absolutely positioned div to achieve a split background effect for a page. It works fine alone but now I need to embed this in a div and scale it using zoom. When I do this in IE 8 the absolute positioned element does not scale and stays original size. 

<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; 
}

Upvotes: 4

Views: 2033

Answers (1)

David Vasquez
David Vasquez

Reputation: 1223

I am working out a similar issue. Try zoom: .43;

I have run across issues with the zoom property in IE8, however - which is how I happened to run across this post. Let me know how this works for you!

UPDATE: I found this which 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')";

Upvotes: 1

Related Questions