nicht angemeldet
Cursor in Textfelder nicht sichtbar (FF)
Hallo!
Ich hatte das Problem schon mal geschrieben, mittlerweile ist es aber schon im Archiv gelandet, deswegen noch mal neu :-)
Ich habe eine Internetseite mit einem Formular. Leider verschwinden im Firefox die Cursor, was sehr unschön ist, denn der User weiß nicht, welches Feld gerade den Focus hat.
Ich habe das ganze jetzt schon mal so weit runterbrechen können, dass es an meinem CSS liegen muss.
Aber mir ist nicht ersichtlich warum.
Zur Info:
Der Teil mit dem Formular überlagert den "normalen" Teil der Webseite!
Das ganze kann man sich hier angucken:
http://conny.burko.de/test/test.html
http://conny.burko.de/test/css/uiboxTest.css
Hier der HTML - Code:
---------------------
<html>
<head>
<link href="css/uiboxTest.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="boxTopLayer" id="boxTopLayer_analysis" style="">
<div class="boxTopLayerContent" id="boxTopLayerContent_analysis">
<form id="formLocation" action="" method="post">
<input id="id.loc.name" name="loc.name" class="locInput" type="text"><br>
<input id="id.loc.description" name="loc.description" class="locInput" type="text">
</form>
</div>
</div>
<div class="boxContent" id="boxContent_analysis" style="height: 549px;">
<table style="position: relative;" border="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="height: 549px;" id="idAnalysisMainMenu" valign="top">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
-------------------
Die CSS - Datei hab ich bis auf folgendes reduzieren können:
.boxTopLayer{
position:absolute;
z-index:10;
width:300px;
background-color: #b8c1cb;
}
.boxBlindLayer{
position:absolute;
background-color: #fff;
z-index:5;
width:300px;
opacity:.8; /* Alle anderen? */
filter:alpha(opacity=80); /* IE Werte von 0 (totale Transparenz) bis 100 (keine Transparenz) */
-moz-opacity:.8; /* Mozilla Werte von 0.00 (totale Transparenz) bis 1.00 (keine Transparenz) */
}
.boxContent{
background-color:#EBEBEB;
overflow:auto;
}
Vielleicht bin ich auch schon betriebsblind, weil ich da jetzt schon ne ganze Weile mit rumbastel.
Aber ich hab nix gesehen, was an der CSS oder dem HTML dazu führen könnte, dass keine Informationan angezeigt werden.
-
Ich hatte das Problem schon mal geschrieben, mittlerweile ist es aber schon im Archiv gelandet, deswegen noch mal neu :-)
Das war übrigens hier:
http://forum.de.selfhtml.org/archiv/2007/2/t147296/Viele Grüße
Conny -
Hallo,
Ich habe eine Internetseite mit einem Formular. Leider verschwinden im Firefox die Cursor, was sehr unschön ist, denn der User weiß nicht, welches Feld gerade den Focus hat.
Ich habe das ganze jetzt schon mal so weit runterbrechen können, dass es an meinem CSS liegen muss.
Aber mir ist nicht ersichtlich warum.Offensichtlich zeigt der FireFox den Teil des Cursors in absolut positionierten Input-Boxen nicht an, welcher über einer Box mit overflow:auto liegt, die _nicht_ containing block dieser Input-Box ist.
Noch kürzerer Testcase:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Titel</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> html, body { margin:0; padding:0; } .boxTopLayer{ position:absolute; top:0; left:0; margin:0; padding:0; } .boxTopLayer p { margin:0; padding:0; } .boxContent{ background-color:#EBEBEB; margin:.75em; overflow:auto; } </style> </head> <body> <form class="boxTopLayer" action="#" method="post"> <p><input></p> </form> <div class="boxContent">Test</div> </body> </html>Wozu wird das overflow:auto bei Dir benötigt? Kann man es durch ein overflow:hidden ersetzten?
Wenn nicht, kann das DIV.boxTopLayer nicht _innerhalb_ des .boxContent absolut positioniert werden? Das .boxContent müsste dazu position:relative; bekommen und somit der containing block für das .boxTopLayer werden. Dann könnte .boxContent weiterhin overflow:auto; haben.
viele Grüße
Axel
-
Wozu wird das overflow:auto bei Dir benötigt? Kann man es durch ein overflow:hidden ersetzten?
Das ganze hatte eigentlich den Sinn, dass ich eine Box habe, die sich der Fenstergröße anpasst, und der Inhalt darin dann scrollbar wird, wenn er zu lang ist...
Wenn nicht, kann das DIV.boxTopLayer nicht _innerhalb_ des .boxContent absolut positioniert werden? Das .boxContent müsste dazu position:relative; bekommen und somit der containing block für das .boxTopLayer werden. Dann könnte .boxContent weiterhin overflow:auto; haben.
viele Grüße
Axel
Ich werde das mal durchdenken! Auf jeden fall schon mal Danke für die Hilfe.
-
-
Hallo,
.boxContent{
background-color:#EBEBEB;
overflow:auto;
}Das Problem scheint durch dein overflow:auto zu entstehen. Alternativ kannst du entweder overflow:hidden verwenden, oder eine andere Möglichkeit finden, das gewünschte zu erreichen.
-moz-opacity:.8; /* Mozilla Werte von 0.00 (totale Transparenz) bis 1.00 (keine Transparenz) */
An welche Mozillas denkst du hier eigentlich? AFAIK wird opacity (ohne -moz-) schon ziemlich breit unterstützt. Firefox 1.x auf jeden Fall; Die Suite habe ich nicht.
mfg. Daniel