Forum Moderators: open
I have 2 iframes both with scrollable content with partial overlap of the vertical scroll bar.
Each iframe has different z-index value (the upper most iframe is hidden and the other visible).
Even though the upper iframe is hidden I can still see the scroll bar. I figured a way to get around this would be to make the overflow:hidden for that iframe style.
What happens is, that although the scroll bar of the upper iframe becomes hidden after making the overflow:hidden, it now leaves a blank space over the lower iframes' scroll bar where there was an overlap.
Clicking the lower scroll bar makes it all become visible, but once the mouse is moved off the scroll bar, the whitespace of the hidden scollbar covers it again.
Here is the sample code:
<iframe id="buttonbase" name="buttonbase" style="width:600px;height:135px;top:170px;left:0px;position:absolute;z-index:2;visibility:visible;" src="http://www.google.com" scrolling="yes" frameBorder="0" marginHeight="0" border="0px" align="middle"></iframe>
<iframe id="info" name="info" style="overflow:hidden;width:560px;height:80px;top:175px;left:40px;position:absolute;z-index:3;visibility:hidden;" src="http://www.google.com" scrolling="yes" frameBorder="0" marginHeight="0" border="0px" align="middle"></iframe>
Does anyone know of a solution to this problem (keeping the iframe z-values as they are)?
Cheers.
Although I haven't addressed this particular situation, I do know that both IE for Mac and Safari present idiosyncratic quirks. In most cases, I have had to take a different tack in design to get the functionality I wanted - and it has usually been less than elegant.
Since frames and iframes present unique challenges for internal browser coding, getting this to work as it stands may be a losing battle.
First thing I'd check - you didn't mention if the mark-up has validated. Use [validator.w3.org...] to be sure.
If the page mark-up is valid and you still see the issues, then it's probably time to re-think your approach. But if it's not valid, the page may just be rendering properly on PC browsers because of their error recovery routines. Then fixing the validation issues may solve your rendering problems.
