Cursor (caret) fails to appear in input text fields with "Fixed Position" in Firefox

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

vunet.us@gmail.com - 28 Feb 2007 21:50 GMT

Mozilla reported the fix to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=167801.
When input text field is located over div, the cursor cannot be seen
unless special CSS properties are applied. The link above illustrates
many example.
The problem I came across with, is almost identical, except that I
need to use position:fixed for my div element instead of
position:absolute as in all examples illustrated on Mozilla link. It
is related to Firefox only and the reason why I have to use a fixed
position is because my div must be always spread all over the page
even during page scrolling.
How is it possible to find a workaround here?
Thank you

Reply to this Message

vunet.us@gmail.com - 28 Feb 2007 21:52 GMT

Almost forgot the copy/paste test case:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<style type="text/css">
#fadedBackground{
 position:absolute;
 background-color:black;
 filter:alpha(opacity=30);
 -moz-opacity:.30;
 opacity:.30;
 top:expression(this.offsetParent.scrollTop);/*IE only*/
 z-index:1;
}
#myTable{position:absolute;z-index:2;background-color:gray;}
</style>

<script language="JavaScript">
function fadeBackground() {
 var d = document.getElementById("fadedBackground");
 if(d.style.visibility=="hidden"){
 if(navigator.userAgent.indexOf("Firefox")!=-1)
{d.style.position="fixed";}
 //IF LINE ABOVE IS NOT USED FOR FF, BACKGROUND DOES NOT COVER
SCROLLING AREA
 d.style.visibility = "visible";
 d.style.height = "100%";
 d.style.width = "100%";
 }else if(d.style.visibility=="visible"){
 d.style.visibility = "hidden";
 d.style.height = "0px";
 d.style.width = "0px";
 }
}
</script>

</head>

<body topmargin="0" leftmargin="0" rightmargin="0">

<div id="fadedBackground" style="visibility:hidden;"
onClick="fadeBackground();"></div>
<table id="myTable" cellpadding=5>
<tr><td><input type="text" value="Where is Cursor?"></td></tr>
</table>
 <a href="javascript:void(0)" onClick="fadeBackground();">Click
Here to Change Background</a>
 
 
</body>
</html>

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / February 2007

Cursor (caret) fails to appear in input text fields with "Fixed Position" in Firefox