How to remove iframe's scrollbars?

Question

How to remove iframe's scrllbars? In Firefox it's easy, however I found myself unable to achieve this effect to be compatible with all major browsers.

Solution 1

CSS

iframe {
   overflow: hidden;
}

And/or use Coin_op's answer, it seems to be better.

Solution 2

If the CSS technique isn't working for you, try also adding the property scrolling="no" to the iframe HTML tag.

<iframe scrolling="no" src="..." >

Solution 3

on top of Alex's answer, I also had to add the following to remove horizontal toolbars from both FF and Chrome. This was added in the i-frame page, even though it should be possible to add it in the css as well:

    <style>
        iframe::-webkit-scrollbar {  
        display: none;
    }  
    </style>

Comments

[Lukas]

And this gentlemen, is how I finally got the animated gifs to keep animating, even with a postback call from IE. Attaching extra code didn't work, delaying source load didn't work, but the ancient element iFrame did the trick. Once I dropped the scroll bars, it was as good as gold!

[Lucky]

But if you check in IE compatibility mode it comes back, so you have to add scrolling:'no' to the iframe it self.this link explains it. dynamicdrive.com/forums/…