HTML5 CSS3 and IFRAMES?

12,554

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.

Share:
12,554
IncomePitbull
Author by

IncomePitbull

Professional Internet Marketer, SEO Specialist/Consultant, Web Designer, Programmer

Updated on June 29, 2022

Comments

  • IncomePitbull
    IncomePitbull almost 2 years

    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...