iframe and scrollbars question

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

iframe and scrollbars question

Post by m3rajk »

i can only find three options for scrollbars: yes,no,auto
the issue is this... mozilla is doing what i want (i know netscape does this too since i've seen it in netscape 7) which can be seen here:
http://www.findyourdesire.com/iframe/moz.scrollbar.jpg
yet ie does it radically differnt. there's nothing that should be causing any horizontal scrollbar, yet.....
http://www.findyourdesire.com/iframe/msie.scrollbar.jpg
note: there might be a difference on one of the three iframes havng information, but that's more because i removed the closer and just closed it out since it's oalways a sub page. when someoen has information there it'll still have that quirk.


right now the iframes are set to "auto"
i want the scrollbar that's vertical when needed, but iit's adding an ugly horizontal one in ie. is there any way to remove it? i haven't tried setting the scrollbars to "vertical" becasue i can't find anything saying that would be supported.

the profile in that screenshot is....
http://www.findyourdesire.com/profile.php?un=m2spoild

thanx in advance for your help
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

That's common in IE. I tend to not use iframes, so I've never had to deal with it myself, but my guess is it's a box-model problem. Anyway, since it only occurs in IE, you can you can use the IE-proprietary property "overflow-x: hidden ;" to eliminate the horizontal bar.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

is that microsoft's version of css? or in the iframe declaration?

edit: gah. the answer is obvious. : v =

ok...
http://findyourdesire.com/profile.php?un=m2spoild

this is what the css looks like:
/* iframes & frames */
iframe{ border-width:0; border-style:none; margin:0; padding:0; overflow-x:hidden; }
iframe.previmg{ height:30px; width:100%; }
frameset.b0{ border-width:0; margin:0; padding:0; }
frameset.b1{ border-width:1px; margin:0; padding:0; }
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

Hmm. Don't know. The only thing I can think of is to make sure to check the padding & margins on your iframe document (rather than the iframe itself). If it hasn't been restyled it'll still have the default HTML padding.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

i have one universal css page. this is the part relative to the body tag.
/* body */
body { background-color:#000000; color:#ffffff; text-align:center; margin:auto; font-family:Arial,Courier; }
the entire css file: http://www.findyourdesire.com/textStyle.css

should i change how body is done? use a class to do margins and have one for main pages and a seperate one for sub pages?
or do you think having a class something like
body.subpage{ margin:0; }
would then work?
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

ok. changed it slightly. still not working =o(

even updated because i realized i messed up a little thing. still doesn't work.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

body.subpage{ margin:0; }

sounds good to me. But it sounds like you've tried that and it's not working? If so, you've reached the limits of my knowledge about iframe hacking. This is one of the reasons I try to avoid using them whenever possible.

You might be thrilled to know that you can accomplish basically all of the functionality of an iframe by putting content inside a div with overflow: auto;
penguinboy
Forum Contributor
Posts: 171
Joined: Thu Nov 07, 2002 11:25 am

Post by penguinboy »

IE has some screwy problems with the margin and padding attributes.

With a doctype of:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

this works:

body{
margin:0px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
height:100%;
width:100%
}
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

since last time i updated the class to
body.subpage { margin:0; padding:0; overflow-x:hidden; } /* for iframes */
but there is a margin:auto in the body declaration which might be causing an issue.

Unipus:
the reason i'm not using div is the amount things i have on that page. eahc iframe uses a different table. i've seen sites that have about the same amount it gets from dbs and uses tables witht he overflow set to scroll, and they take forever to load form the sheet amount in the page call. i tried that just for the hell f it and found that this gave the illusion of a faster load because it comes up in sections.

my personal feeling is that if the pages take too long people will not stand for it, therefore taking a few more seconds to load via iframes actually makes the site APPEAR to load faster and tehrefore people will like it better.

penguinboy:
the width trick fixed ONE of the two windows (tried after splitting to two classes to do margins, so i don't know if it would have worked previously) the new body stuff is:
/* body */
body { background-color:#000000; color:#ffffff; text-align:center; font-family:Arial,Courier; }
body.rebod { margin:auto; }
body.subpage { margin:0; padding:0; overflow-x:hidden; width:100%; } /* for iframes */
penguinboy
Forum Contributor
Posts: 171
Joined: Thu Nov 07, 2002 11:25 am

Post by penguinboy »

Ah!
I remember a problem I had.
IE accually puts the scroll bar to the right of the frame, rather than inside of it.
So instead of using up 10px of the frames width, it expands it +10xp.

So just find the max width that you want, and set the body to -10px less.

like, if you wanted a width of 480px;
You would set it to 470px;

10px; is a guess, it might be 12, 8 or so, just try a few different number, you should find it pretty quick.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

penguinboy:
the odd thing then is that width:100% worked on ONE of them.
one of three. hmm.. then that begs the queston why did it work, and the answer looks to be that there is no need for a scroll bar.

the stats window is 550 tall by 375 wide
the bio window is 200 tall by 550 wide
the desires windoe is 200 tall by 200 wide

the entire thing is suppossed to be 750 wide (all numbers in px unless otherwise noted)
too bad css doesn't support something like width:(100%-10px);

so to fix this, would it work to set the iframe 10 px (assuming the scrollbar is 10 px wide) smaller than the cell it's in?
or does it have to be in the document called by the frame?
penguinboy
Forum Contributor
Posts: 171
Joined: Thu Nov 07, 2002 11:25 am

Post by penguinboy »

In the document called by the iframe.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

anyone know a way that i can set it so that it'll give me approx 20 px less in M$IE without using multiple classes? scrollbars are approx 20 px
User avatar
HaVoC
Forum Commoner
Posts: 83
Joined: Sat Feb 07, 2004 7:20 am
Location: Smiths Falls, CA

Post by HaVoC »

Changing the size of the scrollbar is all well and good, but with your popup, or whatever you're doing with your window why wouldn't you just set the width. Adjust it until you don't get that ugly scrollbar. Plus, the scrollbar itself adds to the width. Try adding say 10-20 pixels to your windows width.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post by m3rajk »

it's an iframe. the issue doesn't exist int he pop ups.
adding id to the body tag and using that seems to work
Post Reply