3

I am trying to remove the iframes scrollbars and frameborder. I cannot use frameborder=0 and scrolling=no since they are no longer supported in HTML5. The seamless attribute throws a warning stating it isn't yet implemented according to the W3C Validator. I found a page online that said to use overflow:hidden to remove the scrolling, however it is not removing the scrollbars, at least in my google chrome. I haven't checked other browsers. Also the frameborder is still there, even though I used border:none. I also was trying to set the width and height of the iframe using css, however it didnt want to listen. Here is my current code:

#vidframe
{
    width: 577px;
    height: 358px;
    overflow: hidden;
    border: none;
}

<iframe name="videoframe" id="vidframe" src="video1.html"></iframe>

Yeah, I easily could add width=xxx height=xxx into the iframe tag, but my understanding that with HTML5 the goal is to get AS MUCH of the coding into CSS as possible... So shouldn't I be able to set the iframes width and height in the stylesheet? Again, overflow hidded didnt remove the scrollbars... and border: none didnt remove the borders...

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
IncomePitbull
  • 302
  • 2
  • 4
  • 14
  • ***CORRECTION*** I just tried again and again.. it was stuck in my cache. It now looks perfect in Chrome and Firefox.. However, in Internet Explorer 9 it is showing the ugly scrollbars! Why is microsoft so retarded! Any ideas how to take the above code and get it to remove the scrollbars for IE? – IncomePitbull Jun 12 '12 at 04:20
  • nobody wants to answer :( I just need to remove the scrollbars now from the iframe in Internet Explorer. It needs to be HTML5 valid, which means I can't use scrolling=no in the html tag. It ignores the CSS. So unless someone knows a trick in CSS, then I am looking to javascript I guess... – IncomePitbull Jun 12 '12 at 04:48

2 Answers2

11

The solution was to add overflow:hidden in the css of the file that was being loaded into the iframe. If the document is not something you can control the source code of, then use javascript to appent the overflow hidden attribute to it's body.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
IncomePitbull
  • 302
  • 2
  • 4
  • 14
  • +1 for showing the answer. Your question was only on here for 45 minutes so maybe with more time someone would have answered. I was just about to try to help you look but see you answered it. – Michael Grassman Jun 12 '12 at 05:03
  • Does it make a difference if I add `overflow:hidden;` to the `html` tag instead of `body`? – Mori Apr 29 '14 at 08:33
  • If the OP found the answer straight away then there's nothing wrong with adding his answer straight away. – Ken Sharp Jan 21 '16 at 19:54
-1

Remove iframe border and scroll bar using javascript,see the following link...

How to remove border from iframe in IE using javascript

Community
  • 1
  • 1
Sundar
  • 159
  • 1
  • 9