Question on DIV/Iframe height...

[kargrafx]

I am using the CSS/DHTML tabber found at brainjar.com (http://www.brainjar.com/css/tabs/) in a site I am doing for some friends. My problem is that the height of the DIV is set to "auto" and although it does change with the various webpages loaded into it, it doesn't quite fit them - it is always just a bit taller than the screen, no matter how small the embedded webpage, and on the larger webpages, I not only get the scroll bar on the main screen, but I get one on the inner embedded page as well.

I have tried setting it to a specified height in pixels, which kindof works, but still does not adjust based on the inner contents; so is not the solution I really want. I have also tried various percentages as heights, and removing a defined height entirely; yet these two methods yield the same as height="auto".

Can someone give me a suggestion as to how to have the inner Iframe (and therefor the outer DIV) always adjust to the content of the webpage being displayed? So that I do not have a ton of blank space at the bottom of small pages, and on larger pages I only get the outermost scrollbar, no scrollbar on the inner frame?

Oh, as a note, I did try setting scrolling=none as well, and while it prevents the inner scrollbars, it also prevents viewing any excess content; simply cutting that off.

The site in question is located here (http://www.warworldthegame.com/SWd20/index.html).

Thank you in advance for any help you might be able to provide!

[Paul Jr]

Well, it's a bit too large when I view it locally, so I'm not really sure what the heck's up.

[kargrafx]

it is optimized for 1024 x n browsers, but should view okay in 800 x n . . . if it isn't fitting that, then I have more problems than I thought!

[Paul Jr]

I checked it out in FireBird .7, resolution at 1024*768.

[kargrafx]

Strange, I am not familiar with Firebird, but I checked NS6 and IE6 here, in 800x600 and up to 1600x1200, including 1024x768 - all looked okay to me width-wise, I just have the problems of height not working out.

[adios]

Put this in index.html:

function getIFRAME_doc_height(IFrameDoc) {
return (typeof IFrameDoc.height != 'undefined') ?
IFrameDoc.height + 30 :
(IFrameDoc.body && typeof IFrameDoc.body.scrollHeight != 'undefined') ?
IFrameDoc.body.scrollHeight + 30 :
null;
}

function IFRAME_size_to_content(iframe_ref) {
var IFrameDoc, oIframe = document.getElementById(iframe_ref);
if (typeof oIframe != null) {
if (oIframe.contentDocument) IFrameDoc = oIframe.contentDocument;
else if (oIframe.contentWindow) IFrameDoc = oIframe.contentWindow.document;
else if (oIframe.document) IFrameDoc = oIframe.document;

var hgt = getIFRAME_doc_height(IFrameDoc);
if (hgt) oIframe.style.height = String(hgt + 'px');
}
}

The number in red is a 'fudge factor' - a little adjustment that may need to be itself adjusted a bit to work. Haven't quite ironed out all the variables.

Add an id to the iframe tag:

<iframe class="tabContent" name="tabIframe2" id="tabIframe2"......>

Then - in every iframe page:

<body.........onload="if(parent.IFRAME_size_to_content)parent.IFRAME_size_to_content('tabIframe2')">

Change the CSS to:

iframe {
background-color: #663333;
border: 2px solid #000000;
border-color: #662222 #990000 #990000 #662222;
width: 98%;
}

(Remove height rule; you don't need a class for one iframe!)

See if that does anything...

[kargrafx]

THANK YOU!

Though I seem to have a small white band at the bottom of each page, it is only a few pixels in height. I tried playing with the +30, both up (to +50) and down (to nothing), but it did not seem to affect that. I can life with it for now, though.

Thanks, adios.

[adios]

Hey, glad it worked. Yeah, saw that white thingy - immediately checked to see if you were using FP, yup, that's the ticket. Nice, elegant markup. :rolleyes: The white is from some layout confusion, which I didn't have time to track down - it's not from the iframe resize. That 'fudge' adjustment just corrects for browser irregularities; sometimes, even when the numbers look right, a little voodoo is required. I'd lower that value until scrollbars appear - check with more than one browser - and then add in a comfortable margin for error. Set html, body {overflow: hidden;} in every iframe page's stylesheet and you should be immunized, without losing content. Anyway, thats the theory. :)

adios

[kargrafx]

Yes, I used frontpage, and though I did correct some of the glaring errors it produces, I have not gone through with a fine-tooth comb yet :o . I'll get it fixed eventually.

Thanks.

[me']

Y'know, Frontpage breaking for me (when I switched computers) has to be one of the best things that ever happened to me.

[kargrafx]

I use frontpage only because my hands no longer like to type for mor than an hour a day or so, and they really let me know when I have been typing too much. Wth a thumb-ball mouse, I can point and click non-stop with no aches or pains... so any program that gives me a GUI instead of making me type is what I have been using.

I really do know how to code, and mere months ago would scoff at anyone who told me they used something like frontpage or dreamweaver, etc. Now I know that such programs do have their place, even for people who otherwise should "know better".

[me']

Each to their own...