McKenna: Formular mit CSS Hints und der IE

SELF-Forum

Formular mit CSS Hints und der IE

McKenna
– Informationen zu den Bewertungsregeln

Hi, ich habe ein Formular das mittelts einer Tabelle und ein paar ULs Hints mittels Hover realisiert. Bei Fehlern wird ein Icon angezeigt wo man dann per Hover eine Beschreibung erhält was da Falsch ist. Bei einem Feld erhält man dann sofern vorhanden eine Beschreibung für das Feld.
Vorher ging es in Firefox ohne Probleme, da es aber auch im IE7 gehen soll, den IE6 lassen wir einfach mal aussen vor, habe ich alles umbauen müssen. Nun geht es zwar in beiden gleicher maßen schlecht, jedoch funktioniert der Hover bei den Beschreibungen für die Felder nicht. Bei den Fehlern geht es.

Hat da jemand evtl ne Idee was ich da noch machen muss damit beides im IE7 und Firefox gut funktioniert?

bis dann
McKenna

<html>

<head>
<title>Test</title>
<style type="text/css">
ul.feldhint {
 margin: 0;
 border: 0 none;
 padding: 0;
 list-style: none;
}
ul.feldhint li {
 margin: 0;
 border: 0 none;
 padding: 0;
 float: left; /*For Gecko*/
 display: inline;
 list-style: none;
 position: relative;
}
ul.feldhint ul {
 margin: 0;
 border: 0 none;
 padding: 0;
 width: 300px;
 list-style: none;
 display: none;
 position: absolute;
 top: 24px;
 left: 0px;
}
ul.feldhint ul li {
 float: none; /*For Gecko*/
 display: block !important;
 display: inline; /*For IE*/
 height: 20px;
}
/* Root Menu */
ul.feldhint h1 {
 border: 0;
 margin: 0px;
 float: none !important; /*For Opera*/
 float: left; /*For IE*/
 display: block; /*background: #EEE;*/
 color: #000000;
 font: normal 11px/18px Verdana, Arial, Helvetica, sans-serif;
 text-decoration: none;
 height: auto !important;
 height: 1%;
}
/* Root Menu Hover Persistence */
ul.feldhint h1:hover,
ul.feldhint li:hover h1,
ul.feldhint li.iehover h1 { }
ul.feldhint li:hover h1 { }
/* 2nd Menu */
ul.feldhint li:hover li h1,
ul.feldhint li.iehover li h1 { float: none;}
/* 2nd Menu Hover Persistence */
ul.feldhint li:hover li h1:hover,
ul.feldhint li:hover li:hover h1,
ul.feldhint li.iehover li h1:hover,
ul.feldhint li.iehover li.iehover h1 {}
/* Do Not Move - Must Come Before display:block for Gecko */
ul.feldhint li:hover ul ul,
ul.feldhint li:hover ul ul ul,
ul.feldhint li.iehover ul ul,
ul.feldhint li.iehover ul ul ul { display: none; }
ul.feldhint li:hover ul,
ul.feldhint ul li:hover ul,
ul.feldhint ul ul li:hover ul,
ul.feldhint li.iehover ul,
ul.feldhint ul li.iehover ul,
ul.feldhint ul ul li.iehover ul { display: block; }

ul.feldhint > li {
 width: 20px;
}

ul.feldhint .feldhinterror ul {
 top: 20px;
 left: 20px;
}

.feldhintcontent li h1,
.feldhinterror li h1 {
 padding: 4px;
 border-width: 1px;
 border-style: solid;
}

.feldhintcontent li h1 {
 background: #FFFFD4;
 border-color: #ccc #888 #555 #bbb;
}

.feldhinterror li h1 {
 background: #FFEBE4;
 border-color: #DF2121;
}

.feldhinterror {
 z-index: 10;
}

</style>
</head>

<body>
<table style="width:700px;">

<tr class="formrow">
<td class="formcell formlabel" style="width:120px;">
<span class="label pflichtLabel errorLabel">Text</span>
</td>
<td class="formcell formfield">
<div class="Feld">

<ul class="feldhint">
<li class="feldhinterror"><h1><img src="error.gif" alt="" /></h1>
<ul>
<li>
<h1>Bitte füllen Sie alle rot umrandeten Pflichtfelder aus.</h1>
</li>
</ul>
</li>
<li class="feldhintcontent"><h1>
<input class="text pflichtFeld errorFeld" style="width:280px;" type="text" name="feld1" maxlength="100"
 value="" />
</h1></li>
</ul>

</div>
</td>
</tr>

<tr class="formrow">
<td class="formcell formlabel" style="width:120px;">
<span class="label">Text</span>
</td>
<td class="formcell formfield">
<div class="Feld">
<ul class="feldhint">
<li class="feldhinterror"><h1><img src="error.gif" alt="" /></h1>
<ul>
<li>
<h1>Bitte füllen Sie alle rot umrandeten Pflichtfelder aus.</h1>
</li>
</ul>
</li>
<li class="feldhintcontent"><h1>
<input class="text" style="width:280px;" type="text" name="feld2" maxlength="15" value="" /></h1>
<ul>
<li><h1>Hier steht etwas Text</h1>
</li>
</ul>
</li>
</ul>
</div>
</td>
</tr>

<tr class="formrow">
<td class="formcell formlabel" style="width:120px;">
<span class="label">Text</span>
</td>
<td class="formcell formfield">
<div class="Feld">
<ul class="feldhint">
<li class="feldhinterror"><h1>&nbsp;</h1></li>
<li class="feldhintcontent">
<h1>
<textarea class="textBox" style="width:280px;" name="feld3"></textarea>
</h1>
</li>
</ul>
</div>
</td>
</tr>

<tr class="formrow">
<td class="formcell formlabel" style="width:120px;">
<span class="label">Text</span>
</td>
<td class="formcell formfield">
<div class="Feld">
<ul class="feldhint">
<li class="feldhinterror"><h1>&nbsp;</h1></li>
<li class="feldhintcontent"><h1>
<input class="text" style="width:280px;" type="text" name="feld4" maxlength="15" value="" /></h1>
<ul>
<li><h1>Hier steht etwas Text</h1>
</li>
</ul>
</li>
</ul>
</div>
</td>
</tr>

</table>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln