English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagCroatian flagDanish flagFinnish flagHindi flagPolish flagRomanian flagSwedish flagNorwegian flagCatalan flagFilipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flagUkrainian flagVietnamese flagAlbanian flagEstonian flagGalician flagMaltese flagThai flagTurkish flagHungarian flagBelarus flagIrish flagIcelandic flagMacedonian flagMalay flagPersian flag

Posts Tagged ‘iframe’

*FIX* Iframes In Chrome And Safari Ignore Scrolling=no / Scrolling:no;
Tuesday, 31 August 2010 by Erock in Web Design Tips • 0 Comments

So I noticed that when embedding an Iframe, Google Chrome (and Safari) failed to respond to scrolling=no.

I went to look and see if this syntax was deprecated, but its not.

Basically webkit (safari and chrome are based on them) values css styles on the html, body, and others, higher than the actual iframe style itself.

what that means is that if their is an ‘overflow’ attribute as anything other than ‘hidden’ in your applicable css, and you place scrolling=no onto an iframe style or place it in the html itself, chrome and safari will show scroll bars. firefox and IE will not. WTF?

What can you do..

Well you can place the iframe inside a div, call larger than width and heights to eleminate the ‘auto’ scroll bars in chrome and safari, then use a div outside of it with a set height and width as well as overflow=hidden to trim the iframe.

The Cause…

There is an attribute inside your css that calls overflow: scroll, or overflow: auto, or overflow-x: scroll, or overflow-y: scroll, or auto or whatever… If you are lucky enough to be able to pull this css style attribute out, it will fix your problem…

 
Remove White Box On Frame Loading
Friday, 20 August 2010 by Erock in Web Design Tips • 0 Comments

I know that if any of you have used iframes you’ll have noticed the white box that floats there so in-your-face, just taunting you with its uglyness as the rest of the page loads.

Why not take a screenshot of the page when it has fully loaded, crop the img down to just the contents of the fully loaded frame, and then use it as the background for a div container around the frame. an example would be:

{code type=php}
<div style=”background: url(‘http://erikshosting.com/childframe/pre-load-screenshot.png’);”>
<iframe src=”http://erikshosting.com/childframe/frame1.php” width=”100%” height=”211″ frameborder=”0″ scrolling=”no” overflow=”hidden” name=”erocks-global-nav-embed”>
You Must Use A Browser Built This Century To See This Frame</iframe></div>
{/code}