The Scrolling Attribute on the Iframe Element Is Obsolete. Use CSS Instead

The scrolling attribute on the iframe element is obsolete. Use CSS instead

<iframe style="overflow:hidden;"></iframe>

Unable to hide iframe horizontal scroll bars using css

Iframes are a new document. The inner document could be creating the scrollbar.

The frameborder attribute on the iframe element is obsolete. Use CSS instead.

As they state themselves "The frameborder attribute is not supported in HTML5. Use CSS instead."

The equivalent of frameborder in css is border: 0px;. Add it to your iframe in css.

HTML5 : Iframe No scrolling?

In HTML5 there is no scrolling attribute because "its function is better handled by CSS" see http://www.w3.org/TR/html5-diff/ for other changes. Well and the CSS solution:

CSS solution:

HTML4's scrolling="no" is kind of an alias of the CSS's overflow: hidden, to do so it is important to set size attributes width/height:

iframe.noScrolling{
  width: 250px; /*or any other size*/
  height: 300px; /*or any other size*/
  overflow: hidden;
}

Add this class to your iframe and you're done:

<iframe src="http://www.example.com/" class="noScrolling"></iframe>

! IMPORTANT NOTE ! : overflow: hidden for <iframe> is not fully supported by all modern browsers yet(even chrome doesn't support it yet) so for now (2013) it's still better to use Transitional version and use scrolling="no" and overflow:hidden at the same time :)

UPDATE 2020: the above is still true, oveflow for iframes is still not supported by all majors

Why does HTML5 doesn't validate but doesn't give an alternative either?

The HTML5 spec does describe how the marginheight and marginwidth attributes work. What it says is:

For each property in the table below, given a body element, the first
attribute that exists maps to the pixel length property on the body
element. If none of the attributes for a property are found, or if the
value of the attribute that was found cannot be parsed successfully,
then a default value of 8px is expected to be used for that property
instead.

Property        Source
'margin-top'    body element's marginheight attribute
                The body element's container frame element's marginheight attribute
                body element's topmargin attribute
'margin-right'  body element's marginwidth attribute
                The body element's container frame element's marginwidth attribute
                body element's rightmargin attribute
'margin-bottom' body element's marginheight attribute
                The body element's container frame element's marginheight attribute
                body element's bottommargin attribute
'margin-left'   body element's marginwidth attribute
                The body element's container frame element's marginwidth attribute
                body element's leftmargin attribute

If the body element's Document's browsing context is a nested browsing
context, and the browsing context container of that nested browsing
context is a frame or iframe element, then the container frame element
of the body element is that frame or iframe element. Otherwise, there
is no container frame element.

So to achieve the same effect, you must set the CSS margin values on the body element of the contained page, not the CSS margin values of the iframe element.

The spec then goes on to explain why marginwidth and marginheight may not (or even should not) be supported in browsers:

Warning! The above requirements imply that a page can change the margins of another page (including one from another origin) using, for example, an iframe. This is potentially a security risk, as it might in some cases allow an attack to contrive a situation in which a page is rendered not as the author intended, possibly for the purposes of phishing or otherwise misleading the user.

Iframe showing error on validation?

These attributes should be removed, not the inline style.

1. allowtransparency attribute
2. frameborder attribute
3. Scrolling attribute

Issues resolving issues with iframe code using w3.org

See here: http://www.w3.org/wiki/HTML/Elements/iframe

width = non-negative integer
Give the width of the visual content of the element, in CSS pixels.

height = non-negative integer
Give the height of the visual content of the element, in CSS pixels.

that means, that the values of width and height always in px and you have to insert just an integer.

Remove scrollbar from iframe

in your css:

iframe{
    overflow:hidden;
}

---

Related Topics