Forum Moderators: not2easy
I'm a newbie to CSS & layering; please be gentle! It's been a very steep (but fun!) learning curve so far.
I've got an issue, and it's driving me a little crazy. I've got a page with one inline frame. I have a graphic image (a small "contact us" thing with a mailto link) that, due to the site design, needs to float over the inline frame, up in its upper left corner, so that it's unaffected by any scrolling content in the frame.
I've figured out how to position & layer elements based on the order in the style list, the z-index & order in the actual body of the HTML. But in MSIE, it seems the inline frame sits over top of EVERYTHING, no matter what. Netscape will layer the floating graphic over the inline frame, as will Safari. MSIE always puts the frame first, and I can't figure out why. I've tested this with other elements on the page, and MSIE will layer them correctly in regard to every other element on the page...except for the inline frame.
This is usually the exact opposite of my experience with the browsers; MSIE usually does what I want perfectly, and Netscape requires all the tweaking. I'm using the Mac MSIE 5.2, Netscape 7.0, and Safari beta 2. Anyone out there have any ideas or know what's causing the problem?
Thanks!
ZenFrodo
Why not put the fixed layer as part of the iFrame? There are scripts available online that will show you how to do this.
The thing to remember is that anything within the iFrame is part of the iFrames DOM, and not the DOM of the holding page.
Putting the fixed mailto image in the iFrame should get you around the problems you are experiencing.
When you say "put it in the iframe", do you mean put it in the source html file for the iframe's content (ie, iframe src="about.html", with the graphic's coding in the about.html file? Or put the image tags within the tags for the iframe?
If you could point me to some of those scripts, please? I tried searching google, and I'm probably not using the correct keywords to find such things.
Thanks again!
ZenFrodo
Try searching for "fixed position layer", or Dynamic Drive has a fixed menu (here [dynamicdrive.com]) that will do the job for you. Instead of the menu html in the div (divStayTopLeft), insert your image.
