I am facing an issue with my website that has 3 iframes, none of them seem to be working properly. In Firefox, the scroll bars appear but do not function, while in Chrome, the scroll bars do not appear at all. Surprisingly, they work fine in IE 6.
This problem has led me to believe that there might be a CSS-related issue. It could be something trivial, but I am unable to pinpoint it.
Here is the CSS code snippet:
.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;
}
/* More CSS styles here... */
Apologies for the amateurish appearance of the code, and thank you in advance :)
Below is the HTML code snippet:
<div class="header">
<ul class="nav">
<li><a href="">Links</a>
<ul class="subs">
<li><a href="xxx" target="_blank">link</a></li>
<li><a href="xxx" target="_blank">link</a></li>
<li><a href="xxx" target="_blank">link</a></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>