[Hitokage]

I am having a somewhat bizarre problem maybe someone here has seen before and/or could help with.

I have an iFrame that displays when an object is clicked through a little js script - no problem there. However, the iFrame seems to be breaking the confines of a div on the page the iFrame is displaying and ruining it.

http://shadow-tigres...olio/index.html

If you click on 'photos', you'll see the iframe display. The Polaroids are supposed contained in a 600x400 div. If you go to the actual page - http://cgi.shadow-ti...otos/photos.php - it's clearly working and they are being contained.

As soon as they are put in the iframe on the index page, they break out of that div.

If I just put them in an iFrame (on a blank html page) it still works just fine.

What is causing this breakage to happen? I've played with everything and just can't seem to figure it out.

Thanks!

[Advertisements]

Try correcting the coding first:

HTML errors

CSS errors [Ignore any properly coded CSS 3 rules that are flagged as errors]

[AstraNut]

Try correcting the coding first:

HTML errors

CSS errors [Ignore any properly coded CSS 3 rules that are flagged as errors]

[Hitokage]

There is a LOT of CSS3 in that stylesheet - I think all the errors are it complaining about CSS3 and the older browser fixes.

I fixed a few little HTML things, but they were all small. It still holds the same problem.

[Hitokage]

Any possible help?

[Hitokage]

After a LOT of testing, I found the issue but it's a bizarre one.

function photos_clicked(){
var thediv=document.getElementById('display_photos');
if(thediv.style.display == "none"){
thediv.style.display = "";
}else{
thediv.style.display = "none";
}
return false;
}



<div id="display_photos" style="display:none">
<iframe id="photos_iframe" src="http://cgi.shadow-ti...tos/photos.php" scrolling="no"></iframe>
</div>


These are the two bits of code. If I remove the style="display:none" (which makes the JS pointless, obviously) the iFrame works as it should be. If I make it display:block or anything other than none, it works. But as soon as I put back in "none" to make the JS work... the iFrame breaks.

Any idea why? How to fix?

[AstraNut]

Have you tried:

visibility: hidden;

Using display: none; removes the element from the document flow.

[Hitokage]

I have. It seems the JS won't change visibilty hidden.

[AstraNut]

Might try changing this:

thediv.style.display

to this:

thediv.style.visibility

And "none" to "hidden"

function photos_clicked(){
	var thediv=document.getElementById('display_photos');
	if(thediv.style.visibility == "hidden"){
		thediv.style.visibility = "";
	}else{
		thediv.style.visibility = "hidden";
	}
	return false;
}



<div id="display_photos" style="visibility:hidden">
		<iframe id="photos_iframe" src="http://cgi.shadow-tigress.com/photos/photos.php" scrolling="no"></iframe>
	</div>

Not too sure about the JS as I don't see where a change is made to: thediv.style.visibility = "visible";

[Hitokage]

I had already tried altering the javascript to try to make the visibility:hidden thing work. When I alter it (HTML and JS both), and click to make the div appear, nothing happens. So... currently not functioning.