Overflow: hidden - working in IE but not in Opera/Firefox? [Archive]

View Full Version : Overflow: hidden - working in IE but not in Opera/Firefox?

name _F1

09-02-2006, 02:01 PM

I have an IFRAME nested in a DIV. I'm using Javascript to scroll the DIV, but I don't think that affects this problem.

The DIV's CSS is as follows:
.containerDiv {
width: 765px;
height: 503px;
overflow: hidden;
border: thin dotted #00357B;
}
<div id="container" name="container" class="containerDiv">
<iframe src="http://www.miniclip.com/games/tiger-golf/en/" width="640" height="1000" scrolling="no" frameborder="0" name="iframe" id="iframe"></iframe>
</div>
The overflow is hidden, as you can see. I use the DIV to effectively scroll the content of the IFRAME (as it is cross domain), but when I scroll it so that the bottom of the webpage in the IFRAME is below the bottom of the DIV, the webpage is outside of the DIV.

Actually, it is only Java applets that 'break out' of the DIV; it seems to work fine for normal webpages - I'm not sure why.

However, when I use overflow: auto; the DIV works properly, and the webpage is contained inside of the DIV.

I'm not sure what the problem is, and whether there is a solution. Any help would be greatly appreciated. :D

EDIT: Flash applets also break out of the DIV, after some testing on miniclip.com. I uploaded a picture to show you what I mean. IMAGE (http://img155.imageshack.us/img155/1457/breakoutqi9.png)

name _F1

09-03-2006, 03:44 AM

Any help?

Arbitrator

09-03-2006, 06:25 AM

Well, it does look like a bug though I'm hesitant to say then when both Firefox and Opera render something identically. This seems to occur also when the object element is substituted for the iframe element. You could always make a bug report to Mozilla's Bugzilla to see if that's the case.

I'm wondering though why anyone would set an iframe to have certain dimensions and then purposely put it into another element with smaller dimensions and overflow: hidden. I see no use for doing such a thing.

Just for further reference, here's the test code I used:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<base href="http://www.miniclip.com/games/tiger-golf/en/">

<title>HTML 4.01 Transitional Document</title>

<style type="text/css">
* {
margin: 0;
border: 0;
padding: 0;
}
html {
padding: 20px;
background: #222;
}
#container {
overflow: hidden;
width: 765px;
height: 503px;
margin: auto;
border: thin dotted #00357b;
}
#iframe {
width: 640px;
height: 1000px;
}
</style>

</head>
<body>

<div id="container">
<iframe id="iframe" src="/"></iframe>

</div>

</body>
</html>

name _F1

09-03-2006, 07:15 AM

The reason I nested the IFRAME in the DIV is so I can manipulate the DIV, as I cannot manipulate some attributes of the IFRAME as its content is cross-domain [I'm using Javascript to manipulate the attribute properties].

Arbitrator

09-03-2006, 06:30 PM

How does that prevent you from making the iframe's attributes equal or smaller than that of its containing element?