Online Shopping : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to
Did You Find This Entry Useful?

70 of 100 people (70%) answered Yes
Recently 6 of 10 people (60%) answered Yes


How do I position a div layer over an iframe in Netscape Or Mozilla?

Apr 5th, 2008 20:18
ha mo, Tony Crosby,

Around August of 2000 someone submitted a bug report to bugzilla (which
you can get to from the website) and the bug still hasn't
been fixed, but today I finally found a way around it.
 The bug .... if you use a <div></div> layer with the position set to
absolute you can't have it touch an iframe. The iframe will always
position istelf to the front for some reason. So what you have to use is
position: fixed;
 It was simple as that after 12 hours of searching but I was lucky to
find anything. Yet this property isn't supported by IE at all, so you
have to write a little snip-it of code perhaps making different style
sheet calls for IE & Netscape. IE has no problem with the div layers and
iframe so I guess they just expect you to stick with position: absolute;
for IE.
 A perfect example of what I'm talking about is here:
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="position: fixed; background-color: yellow; width: 100;
height: 100; left: 368; top: 106"></div>
<div style="position: fixed; background-color: blue; width: 100; height:
100; left: 300; top: 122"></div>
<div style="position: absolute; background-color: purple; width: 100;
height: 100; left: 391; top: 145">
<IFRAME name="midinsert" FRAMEBORDER="0" MARGINWIDTH="0"
<div style="position: fixed; background-color: red; width: 100; height:
100; left: 332; top: 174"></div>
 If you view that in Netscape you'll see what I mean.
 Another great thing about this fixed position property is you can do this:
<title>A frame document with CSS2</title>
<meta name="crc" content=1064543067>
<style type="text/css">
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        text-align: center;
        margin-top: auto;
        background-color: #cccccc;
<div id="footer">
<table width=100% height=100%><tr><td style="font-style: italic"
align=center valign=middle>Footer</td></tr></table>
 It acts like a frame but is on the same page and would be a great
replacement for scripts that try to stick a div layer to the top of your
screen which is very jerky with scrolling. Yet without IE to support
this one, there's not much potential for it.
 Hope this saves someone some time.
 Once more, this isn't supported by IE at all at this time (Aug 01)