PDA

View Full Version : Iframe's scrollbars problem (FireFox)



luna
06-25-2005, 05:01 AM
Okay, I'm trying to make a website friendly with both IE and FF, and it uses frames. I have no problem seeing it on IE, everything's working like it should be. But when I see it on FireFox, an ugly, evil horizontal scrollball appears :(

I've tried doing the normal "fixing" codes like scrolling="auto" scrolling="yes" and nothing would work. :mad: I also tried changing the width of the content.. but nothing would work to remove the horizontal scrollbar.. I didn't have the problem using IE.

The code I'm using for the iframe right now is

<iframe name="draw" src="main.htm" scrolling="yes" FRAMEBORDER="0" width="328" height="248" marginwidth="0" marginheight="0" allowtransparency="true">
</iframe>

Or maybe is that I have to change the content of the iframe?.. Or it's not a coding problem? If anyone can help, I'd be thankful.

Twey
06-25-2005, 12:25 PM
Use the CSS:


iframe {
overflow-x: hidden;
overflow-y: scroll;
}

Thanks to cr3 for suggesting it was a CSS attribute :p

Be aware that this means that if anything does extend beyond the width of the frame, it won't be accessible to the user.

jscheuer1
06-25-2005, 04:18 PM
iframe {
overflow-x: hidden;
overflow-y: scroll;
}Those are IE specific codes. To get rid of the horizontal scrollbar in FF you need to set the iframe's scrolling="auto" (preferred) or scrolling="yes" and the content page has to be able to display within the iframe's width. This can be done by having no content wider than the iframe's width. This gets a bit tricky with text content, as any line that won't wrap to the desired width will cause a horizontal scrollbar. Especially when you consider that FF will generally only wrap lines on white space.

Twey
06-25-2005, 04:59 PM
He already said he tried all that.

jscheuer1
06-25-2005, 06:09 PM
It works though, the OP probably still had content too wide for the iframe without realizing it. Your method will change nothing in FF. What we really need is a link to the problem page.

luna
06-25-2005, 07:07 PM
Ok I just fixed it :p It wasn't nothing to do with that, it was because header's with was "100%" And it needed to be less, i changed it to 90 and everything's Okay.

thank you all for trying to help! :o


He already said he tried all that.
(by the way, I'm a girl)

Twey
06-25-2005, 07:54 PM
Ack, sorry. (smacks self)
Usually try to use "s/he," but you don't say it out loud, and sometimes I forget.

jscheuer1
06-25-2005, 09:51 PM
You've both conveniently skipped over the fact that I got this one right, the content was too wide after all.

Twey
06-26-2005, 11:21 AM
OK, OK, you were right. :p
The reason I didn't suggest it was that she said she had already adjusted the content width, to no avail.

jscheuer1
06-26-2005, 01:26 PM
Thanks Twey, I probably shouldn't have mentioned it. :cool:

bigguysf
02-23-2006, 07:50 PM
I read through all of the posts and did lots of experimenting in IE, Firefox, and Netscape (PC). I focused on these three because I felt like this would cover the most ground, and also they all were affected to varying and different degrees by each of these single fixes separately.
So here is the final combo of fixes I found that removes the horizontal scrollbar from iframes in ALL THREE BROWSERS -

Step 1
Add this style type to the page with the iframe:
<style type="text/css">
<!--
iframe {
overflow-x: hidden;
}
-->
</style>

Step 2
Make sure the iframe scrolling property is set to scrolling=yes

Step 3
To help ensure the framed content will fit cleanly inside without additional html elements (like tables and such), use this style property in the iframe content page:
<style type="text/css">
<!--
body {
width:98%;
}
-->
</style>

Step 4
Make sure the doctype is set properly... I use this tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

I checked and rechecked to make sure, and the total of these 4 fixes seemed to work for all 3 browsers. It even seemed to work for all major Mac browsers too (IE was a little janky on the vert. scrollbar though). I hope this will help others who experience the same problem.
Later. :D

ifgrounds
03-19-2006, 12:46 PM
Step 1

Step 2

Step 3

Step 4

Hi there, i have carried out all the steps in your post and i still have a problem.

Here is the website where the problem is. (http://www.geocities.com/noresidecats/) ..... it is fine in Netscape and IE, its just firefox that has the bottom scrollbar (the side one i want)

Now here is where it is a bit different .... the news ticker up top is in an iframe aswell and that it fine .... The only difference is that the bottom iframe has overflow-x:hidden;y:scroll; scrolling="yes" and the top one has overflow-x:hidden;y:scroll; scrolling="no"


Has anyone got any ideas ??

ifgrounds
03-19-2006, 01:39 PM
Forget it ..... its sorted !!

The main iframe scrolling was set to yes, i set it to auto and it worked for all three browsers.

bigguysf
03-19-2006, 03:58 PM
Glad to hear it worked for you ifgrounds! :)