By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,469 Members | 1,259 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,469 IT Pros & Developers. It's quick & easy.

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

P: n/a
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

Feb 28 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
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>
<br><br><a href="javascript:void(0)" onClick="fadeBackground();">Click
Here to Change Background</a>
<br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br><br><br><br><br><br><br><br><br><br >
<br><br><br><br><br><br><br><br><br><br><br><br><b r><br><br><br><br><br><br><br>
</body>
</html>

Feb 28 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.