• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 209
  • Last Modified:

Problem in Netscape

Hi,

I have one image which will be moving along with the scorll. And a text Box at the Bottom. As I Scroll Down The Image will appear in front of the text Box. But In Netscape it is not possible The Image will be Behind the textBox.

I have one sample File uploaded.

http://kq.cuttack.net/ravi/ 

Pls scroll down and view.

Is it possible in Netscape also to view same as IE
0
ravimk
Asked:
ravimk
1 Solution
 
djbusychildCommented:
This is a known issue with NS. You cannot have anything on top of form widgets... sorry.. =(
0
 
CJ_SCommented:
Not only form-element, you can't place anything above a java-applet, flash and other elements which are not plain html. This is because these items have an infinite z-index which will make them appear in front of everything. You can hide the form-elements by putting them in a layer and make it visible or invisible at command, but it won't be pretty.

Regards,
CJ
0
 
tleishCommented:
Webreference.com gives a good explanation of what doesn't work with objects on the page and layers:
http://www.webreference.com/dhtml/diner/seethru/

The only solution I've ever seen when this has to be used it to put the form element in a layer, and hide it whenever the 2nd layer would be covering it.

Here's an example from FAQTS.com, view it in NS to see what I mean:

<!------- BEGIN CODE --------->
<HTML>
<HEAD>
<STYLE>
.javascript { color: white; background-color: orange; }
.php { color: white; background-color: darkblue; }
.python { color: white; background-color: lightblue; }
#layer1 {
  position: absolute;
  z-index: 10;
  left: 50px;
  visibility: hidden;
}
#layer2 {
  position: absolute;
  z-index: 5;
  left: 0px;
}
</STYLE>
<SCRIPT>
function showLayer (id) {
  if (document.layers)
    document[id].visibility = 'show';
  else if (document.all)
    document.all[id].style.visibility = 'visible';
  else if (document.getElementById)
    document.getElementById(id).style.visibility = 'visible';
}
function hideLayer (id) {
  if (document.layers)
    document[id].visibility = 'hide';
  else if (document.all)
    document.all[id].style.visibility = 'hidden';
  else if (document.getElementById)
    document.getElementById(id).style.visibility = 'hidden';
}
function clipSelect () {
  if (document.layers) {
    document.layer2.oldClipWidth = document.layer2.document.width;
    document.layer2.clip.width = 50;
  }
  else if (document.all)
    document.all.layer2.style.clip = 'rect(auto 50px auto auto)';
}
function unclipSelect () {
  if (document.layers)
    document.layer2.clip.width = document.layer2.oldClipWidth;
  else if (document.all)
    document.all.layer2.style.clip = 'rect(auto auto auto auto)';
}
function init () {
  if (document.layers)
    document.layer1.onmouseout = function () {
      hideLayer(this.id);
      unclipSelect();
    };
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init()">
<A HREF="javascript: void 0"
   ONMOUSEOVER="showLayer('layer1'); clipSelect();">
Knowledge Bases
</A>
<BR>
<DIV ID="layer1"
     ONMOUSEOUT="if (document.all) {
                   if (!this.contains(event.toElement)) {
                     hideLayer(this.id);
                     unclipSelect();
                   }
                 }
                 else if (document.getElementById) {
                   window.tid = setTimeout('hideLayer(\'' + this.id
+ '\')', 20);
                 }"
     ONMOUSEOVER="if (document.getElementById)
                   clearTimeout(window.tid);"
>
<TABLE BORDER="0">
<TR>
<TD CLASS="javascript">
<A HREF="http://JavaScript.FAQTs.com" CLASS="javascript">
JavaScript.FAQTs.com
</A>
</TD>
</TR>
<TR>
<TD CLASS="php">
<A HREF="http://php.FAQTs.com" CLASS="php">
php.FAQTs.com
</A>
</TD>
</TR>
<TR>
<TD CLASS="python">
<A HREF="http://python.FAQTs.com" CLASS="python">
python.FAQTs.com
</A>
</TD>
</TR>
</TABLE>
</DIV>
<DIV ID="layer2">
<FORM NAME="formName">
<SELECT NAME="aSelect" WIDTH="150" STYLE="width: 150px;">
<OPTION>Kibo
<OPTION>Kibology
<OPTION>Xibology
</SELECT>
</FORM>
</DIV>
</BODY>
</HTML>
<!------- END CODE --------->
0
 
djbusychildCommented:
well plugins and applets have their own graphics context, so the problem is there for both NS and IE. form elements reside in the same graphics context and the problem is only in NS
0
 
ravimkAuthor Commented:
Thanks for giving an Code and explaining the problem and giving the refrence for more info.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now