iframe problem

[geoffb]

Hi all,

I have a fixed width layout with fixed main area, page views as I want it with navigation on left and coloured column on right.

Problem is, as soon as I place an iframe that connects to an external source and view (F12) the left and right column are invisible....any ideas why.

geoffb

[DrDoc]

How wide is your iframe?
Have you validated [validator.w3.org] your markup?
Do you have permission from the owner of "the other site" to include their content on your site?

[geoffb]

Hi DrDoc,

I frame is 600px Wide (held within main div larger than this)
Markup validated
I have full permission.

The iframe displays as I want, I just loose the left and right column when displaying in browser.

geoffb

[DrDoc]

Do they have a "bust out of frames" script on their end?

[tedster]

Are you losing the left and right columns on the parent page - the page on your own site?

If so, time to test your code - maybe put a different url in the iframe and see what behavior you get. You may be running into a browser bug of some kind. Better to know first whose page is creating the unwanted behavior.

[geoffb]

Hi DrDoc/Tedster,

Not sure about 'bust out of frames'. If I make it really small it just make a scroll across bar as well as height.

Here is where im at:

Markup approved.
Tried doing this from 3 different angles so far:

using css non floated positioning (head/foot ok-left and right column gone)
using css floating positioning (head/left/footer ok-right column gone)
using table based design (head/left/right ok-footer gone)

So driving me crazy, if you have a bit of extra time i can send you the markup and iframe, it's only a short amount of code, about 10 lines

Cheers so far.
geoffb

[tedster]

10 lines of code is small enough to paste into this thread - just be sure to change any urls or specifics to something generic. You can use "example.com" for any of the urls that might be in the code.

Also a good idea to strip the code down to the bare minimum needed to demonstrate the problem. That helps others to focus in on the important parts faster.

[geoffb]

Hi Tedster,

html page:
<div id="container">

<div id="header"></div>

<div id="leftcolumn"></div>

<div id="maincolumn">
<iframe src="http:example.com" scrolling=yes /></div>

<div id="rightcolumn"></div>

</div>

css markup:

html, body{
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#container {
width:1000px;
height:900px;
margin-left:5px;
margin-top:5px;
background:#EEEEEE;
border:1px solid #C6C6C6;
}

#header {
position:relative;
width:100%;
height:120px;
background:url(images/top-header.gif) repeat-x;
}

#leftcolumn {
position:relative;
float:left;
width:170px;
height:700px;
background:#8A8A8A;
}

#maincolumn {
position:relative;
float:left;
width:700px;
height:700px;
}

#rightcolumn {
float:left;
width:120px;
height:700px;
background-color:#616161;
}

take a look.

cheers
geoffb

[tedster]

The iframe tag requires a formal </iframe> end tag to validate (a height and width are also helpful). I'm not seeing any vanishing content once I change from:

<iframe src="http:example.com" scrolling=yes /> ...to
<iframe src="http:example.com" scrolling=yes></iframe>

[geoffb]

tedster you are a SAINT.....

I can't believe after all this time in the web world (3 years..he he) that I didn't think of doing a closing tag for the iframe. I just copied and pasted and didn't realise it needed one, no excuse though, I should have tried that I suppose.

I cant thank you enough.

Have a great day, and a weekend where ever you are.

geoffb (UK)

[tedster]

You're welcome Geoff. And not to rub it in, but DrDoc's first reply did ask you about validation, and you said "Markup validated". So I was hesitant to even suggest that closing tag issue, thinking that it might not be that way in your full code.

Validating is the best practice, and it's very unwise ever to skip it or assume it. I validate the first time with the W3C tool, and then after any edit using Homesite - even when I think I couldn't possibly have caused a problem.

[geoffb]

Hi tedster,

I did a validation within Dreamweaver and originally the iframe had an 'unsupported attribute' which was an 'ALLOWTRANSPARENCY' thing, so got rid and strangely it came up after as validated.

Maybe putting it through the W3C would have been best, anyway, here to make mistakes I suppose and it wont be the last for me or any of us. so long as I learn from it.

take care, thanks again.

geoffb

[encyclo]

"Markup validated". So I was hesitant to even suggest that closing tag issue

Glad you found the problem. Are you using XHTML syntax by any chance? The problem with validation is that the following:

<iframe src="http:example.com" scrolling=yes />

Is valid XHTML 1.0 Transitional. Unfortunately, it doesn't actually work, as it is invalid HTML. XHTML is treated as HTML in almost all cases by the browser, so you can't use some valid XHTML constructs without encountering problems. This can cause intractable issues unless you are familiar with the HTML specifications!

[DrDoc]

Not to mention -- XHTML sent as

text/html

is treated as broken HTML by the browser anyway. So, you might as well use an HTML doctype anyway, as there are no benefits to XHTML tagsoup markup.

[geoffb]

Thanks for all replies.

Its coded in HTML 4.01 Transitional.

I ended up with the following code for specifying the iframe in question and seems fine.

<iframe src="http://example.com" style="border:0" width="680" height="560"></iframe>

Let me know if you can see any immediate problems in older browsers.

Cheers all.

geoffb