HTML/CSS: Why doesn't scrolling work in iframe? - css

Question

I have a website with 3 iframes and none of them works, although the text is longer than the windows: in Firefox the scroll bars appear but don't work; in Chrome the bars don't even appear. They do scroll in IE 6.
So I suspect there is a problem with the CSS. Probably it's something trivial, but I fail to see it.
CSS code:
.header
{
position:fixed;
top:0%;
right:0%;
height:4%;
width:100%;
text-align:center;
background-color:#BF1E4B;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
z-index:+1;
}
.nav,.nav ul
{
list-style:none;
margin:0.5%;
padding:0;
}
.nav
{
top:0%;
left:0%;
position:absolute;
}
.nav ul
{
height:0;
left:0;
position:absolute;
overflow:hidden;
top:100%;
}
.nav li
{
float:left;
position:relative;
}
.nav li a
{
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
background-color:#BF1E4B;
color:#fff;
display:block;
font-size:100%;
line-height:100%;
padding:4px 35px;
text-decoration:none;
transition:0.1s;
}
.nav li:hover > a
{
background:#000;
color:#fff;
}
.nav li:hover ul.subs
{
height:auto;
width:100%;
}
.nav ul li
{
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
opacity:0;
transition:0.1s;
width:100%;
}
.nav li:hover ul li
{
opacity:1;
-moz-transition-delay:0.1s;
-o-transition-delay:0.1s;
-webkit-transition-delay:0.1s;
transition-delay:0.1s;
}
.nav ul li a
{
background:#BF1E4B;
color:#fff;
line-height:0%;
-moz-transition:0.1s;
-o-transition:0.1s;
-webkit-transition:0.1s;
transition:0.1s;
}
.nav li:hover ul li a {
line-height:150%;
}
.nav ul li a:hover
{
background:#000;
}
.iframe1
{
position:fixed;
bottom:48%;
right:0%;
height:48%;
width:50%;
}
.iframe2
{
position:fixed;
top:4%;
left:0%;
height:96%;
width:50%;
}
.iframe3
{
position:fixed;
top:52%;
right:0%;
height:48%;
width:50%;
}
Sorry for the amateur look, and thanks in advance :)
HTML code:
<div class="header">
<ul class="nav">
<li>Links
<ul class="subs">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</li>
</li>
</ul>
<div style="clear:both"></div>
</div>
<div class="iframe1">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>
<div class="iframe2"">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>
<div class="iframe3">
<iframe src="xxx" width=100% height=100% scrolling="yes"></iframe>
</div>

Answer 1

As Javid said above, overflow:scroll on the iframe elements, though I think using position:fixed might cause problems up on some browsers based on the fact it locks the elements relative to the page scrolling. Consider using position:absolute, though I don't know anything about your situation.

Answer 2

try playing with the z-index value, you might cover it, change it to 1000 in the iframe and see you still cant use it
{
z-index: 1000;
}