CSS + FireFox: hiding scrollbar on iframe with scrolling=yes

Question

I have an iframe with scrolling=yes. Is it possible to fully hide scrollbar using CSS for the Mozilla FireFox browser?

For instance, on the Internet Explorer I'm using this: Overflow-x: hidden; Overflow-y: hidden; - and it hides scrollbars, but FireFox ignores this CSS.

Here is screenshot from IE:

alt text http://moismski.com/ie.png

Here is screenshot from FireFox:

alt text http://moismski.com/firefox.png

I forgot to mention that I put CSS, to say exactly like this <style>body { overflow:hidden; }</style> inside the iframe. I can't put class to iframe itself like <iframe class="...">

Iframe is put inside the <DIV>...</DIV>. I use it like a modal window.

Unmanned

Have you tried just overflow:hidden? – Lowbred

Yes, anyway it displays scrollbars! – Unmanned

Just use CSS: .frame {overflow:hidden;width:100%;height:100%} I tried now. If you see scroll may be it is not of frame but some parent element? – Vaasa

Use next selector if you can modify div: #divId iframe{overflow:hidden;width:100%;height:100%} – Vaasa

Answer 1

Have you tried setting explicit values for width/height on either the iframe or parent container? Also, does your iFrame contain anything?

EDIT: Try:

div {overflow:hidden;}
div iframe {border:0;overflow:hidden;}

in your actual page that contains the div.

Magdeburg

Yeah, I have width="100%" height="100%" on iframe setting! I have a registration form in the iframe. – Unmanned

Ahh. Ok, border adds to the dimensions so your iframe is actually getting bigger than the viewport. Try border:0; Unless you actually need to see the iframe? – Magdeburg

I guess you can't edit your comments or im too scrubby to do so? The basic deal is, when you have anything that is 100% of it's container and anything adds additional border, padding or margin, it's going to generate a scrollbar. You might try posting your entire code along with all the css rules you are using. Otherwise, I can only guess. :) – Magdeburg

Answer 2

I've tried everything you said and looked at this two links either ( How to remove scrollbars from Facebook iFrame application - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.

What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).

I hope this help you.

Lara