1

I've used the method described here to setup an iframe on one of my pages. I just wanted a piece of the page I'm trying to iframe, so I used the zoom/scale function of various browsers.

In order to load a certain section I wrapped the iframe in a div, sized and scaled it. Then I put the iframe inside that div and positioned it using top: -300px;

This looks great in Firefox and Chrome, but it doesn't work right in IE8 at all (big surprise). Basically, it looks like something else is interfering in IE8 and the browser doesn't calculate the top: -300px from the same starting point as the other browsers. So you end up not seeing the same result in IE8 as you do in other browsers.

Okay, so here's the code I'm using. I ended up amending the code from the previously mentioned topic above in that, in order for IE8 to scale the iframe content properly (and not the entire iframe itself) I had to scale/zoom the wrapping div and not the iframe id as they suggest.

#themeframe {
    overflow: hidden;
    position: relative;
    width:800px;
    height:850px;
    -ms-zoom: 0.75;
}


#frame {
    position: absolute;
    overflow-x: hidden;
    top: -300px;
    -moz-transform: scale(0.75);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.75);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.75);
    -webkit-transform-origin: 0 0;

What am I doing wrong? Or, rather, what odd CSS character is IE8 seeing that I'm not?

Community
  • 1
  • 1

1 Answers1

1

-ms-zoom is probably the thing IE8 doesn't understand. Fixed rule: zoom: 75%;. Notice the unit.

Teemu
  • 22,918
  • 7
  • 53
  • 106
  • No, this doesn't work. It doesn't solve the issue, that's for sure, and if you don't have `-ms-zoom` and just put `zoom` then Chrome interprets both `zoom` and `-webkit` and it wrecks it in Chrome. Thanks though! –  Aug 15 '12 at 16:23