iframe scrolling problem

[Burgin]

I'm playing around with html5 and it doesn't support scrolling="no" attribute on the iframe tag.

Here's my html code

<iframe name="slider-frame" src="slider.htm"></iframe>

What css code would I need to prevent both Hori & Vert scroll bars just for that specific iframe?

Thanks

[jscheuer1]

To satisfy some browsers, you may actually have to go with scrolling="no".

However, the HTML 5 standards method would be to give it css style of:


overflow: hidden;

I think you know how to do that for just that element. If not:


<iframe style="overflow: hidden;" name="slider-frame" src="slider.htm"></iframe>

Or (preferred) give the iframe a unique id attribute and style it by its id with that style in the stylesheet.

Even using that and scrolling="no" may fall short in some browsers. In which case you will want to make the HTML and the BODY elements on the slider.htm page also overflow hidden.

It should be noted that it isn't so much HTML 5 not supporting scrolling="no", as its being non-standard for that DOCTYPE. Support is determined by the browser. It doesn't (in this case) hurt to include scrolling="no" for those browsers that might need it.

[Burgin]

Thanks for that, but how do you refer to that specific iframe, name="slider-iframe", in the stylesheet and one issue worth mentioning... by including scrolling="no" the code doesn't validate.

[Beverleyh]

use id="slider-iframe" in the iframe element and then this in the stylesheet;


#slider-iframe { overflow: hidden; }

[jscheuer1]

use id="slider-iframe" in the iframe element and then this in the stylesheet;


#slider-iframe { overflow: hidden; }

That's right, and the iframe would then look like so:


<iframe id="slider-iframe" name="slider-frame" src="slider.htm"></iframe>

But you could use any valid cross browser selector that would single out that iframe. Like - say it's the only iframe on the page, then you could just use the iframe selector. Or if it's the only iframe inside an element with a unique id, you could use that element's id followed by iframe.


. . . by including scrolling="no" the code doesn't validate.

That's also right. You're faced with some choices. You could use another DOCTYPE, one that allows that attribute. Or you could live with it not validating. As I said, in this case that won't hurt anything. Or you could choose not to support those browsers that require scrolling="no".

For that last choice they are all IE, and all browsers built on the IE browser engine, perhaps one or more others. Using IE 9 here, it appears to be all versions of IE. However, using:


<style type="text/css">
html, body {
overflow: hidden;
}
</style>

on the page inside the iframe, in this case on slider.htm, appears to solve the problem. In fact, with that you probably don't need any style for this on the top page for any browser.

So that's another and perhaps the best choice. But it does require that you have control over the style for that slider.htm page.

There may be other choices. I can't think of any more at the moment.

[molendijk]

[...] using:

<style type="text/css">
html, body {
overflow: hidden;
}
</style>
on the page inside the iframe, in this case on slider.htm, appears to solve the problem. [..]that's another and perhaps the best choice.
That's the best choice indeed, because the css refers directly to the iframed page. I've encountered several problems concerning the styling of iframed pages that were solved when the css was given in the iframed pages themselves. But, as John said, you have to have control over them.
===
Arie Molendijk.

[Beverleyh]

That's certainly one to remember (for the iframed pages that you have control over) - definitely one to pencil in the experience notebook. Thanks for that chaps.