Page 1 of 1

iframe and scrollbars question

Posted: Tue Feb 03, 2004 8:12 am
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

Posted: Tue Feb 03, 2004 12:46 pm
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.

Posted: Tue Feb 03, 2004 6:04 pm
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; }

Posted: Tue Feb 03, 2004 7:32 pm
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.

Posted: Tue Feb 03, 2004 8:23 pm
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?

Posted: Wed Feb 04, 2004 12:15 pm
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.

Posted: Wed Feb 04, 2004 2:14 pm
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;

Posted: Wed Feb 04, 2004 3:16 pm
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%
}

Posted: Wed Feb 04, 2004 4:30 pm
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 */

Posted: Wed Feb 04, 2004 4:49 pm
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.

Posted: Wed Feb 04, 2004 7:18 pm
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?

Posted: Wed Feb 04, 2004 10:09 pm
by penguinboy
In the document called by the iframe.

Posted: Fri Feb 06, 2004 5:14 pm
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

Posted: Sat Feb 07, 2004 7:25 am
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.

Posted: Sat Feb 07, 2004 3:00 pm
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