IE6 buggy? Text-INPUT nicht anklickbar...

[Patrick N.]

Hallo Forum,

ich bastele zur Zeit an einer Art Community und bin dabei auf folgenden (interessanten?) Bug gestoßen:
Die Seite ist Frame-frei (Grüße an die Frame-Gegner :o), das HTML bisher ca. 11kB groß (ich arbeite mit PHP und Templates, die 11kB sind das, was der Browser kriegt), mit CSS und (natürlich!!!) vielen, vielen blinden Tabellen (es gibt einfach Dinge, die sich mit CSS entweder gar nicht oder nur unbefriedigend lösen lassen) ausstaffiert. Insgesamt sind auf der Seite zwei Forms eingebaut, wobei das, um welches es sich hier handelt, in zwei ineinander verschachtelten Tabellen untergebracht ist. Wohlgemerkt: Im anderen Form, das ähnlich verschachtelt eingebaut ist, habe ich keine Probleme.

Hier ist erstmal der Code des bewußten Forms:

<form action="./2546/index.php" method="post">
<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr><td width="5%" height="16"></td><td width="15%"></td><td width="5%"></td><td width="70%"></td>
<td width="5%"></td></tr>

<tr><td colspan="3" height="5"></td><td rowspan="2" valign="top">
<input name="Search_Titel" type="text" value="" size="45" /></td><td></td></tr>
<tr><td height="20"></td><td valign="top">Titel</td><td colspan="3"></td></tr>
<tr><td colspan="5" height="13"></td></tr>

<tr><td colspan="3" height="5"></td><td rowspan="2" valign="top">
<input name="Search_Untertitel" type="text" value="" size="45" /></td><td></td></tr>
<tr><td height="20"></td><td valign="top">Untertitel</td><td colspan="3"></td></tr>
<tr><td colspan="5" height="13"></td></tr>

<tr><td colspan="3" height="5"></td><td rowspan="2" valign="top">
<input name="Search_Vorname" type="text" value="" size="15" />&nbsp;&nbsp;&nbsp;
<input name="Search_Nachname" type="text" value="" size="15" /></td><td></td></tr>
<tr><td height="20"></td><td valign="top">Besitzer</td><td colspan="3"></td></tr>
<tr><td colspan="5" height="13"></td></tr>

<tr><td colspan="5" height="14"></td></tr><tr><td colspan="3" height="24"></td><td valign="top">
<input type="submit" name="Search" value="Suchen" /></td><td></td></tr>

<tr><td colspan="5" height="6"></td></tr>
</table></form>

Soll ein Such-Fenster ergeben; wie zu sehen, besteht es aus vier Text-INPUTs und einem SUBMIT.
Problem: Mit Netscape 7.1 und Mozilla 1.7.8 funktioniert die Seite so, wie sie soll. Aber im Internet Explorer 6 lassen sich die INPUTs meistens gar nicht anklicken (Mit "anklicken" meine ich, dem INPUT den Fokus zu geben, so daß ein Text eingegeben werden kann). Wenn ich die Seite neu lade oder das IE6-Fenster mini- und wieder maximiere, lassen sich gelegentlich ein oder zwei INPUTs anklicken. Allerdings sind es bei jedem Mal andere.
Via Tabulator-Taste lassen sich alle INPUTs anspringen, und im anderen FORM funktioniert alles, wie es soll.
Ich habe das HTML durch den W3C-HTML-Validator gejagt, beim IE6 mit Skriptdebugging gearbeitet und den Code per pedes auf fehlende End-Tags untersucht, konnte aber kein Problem feststellen.
Was ist da los? Wenn mir jemand helfen könnte, wäre ich dafür sehr dankbar. Den kompletten Code könnt Ihr auf Anfrage von mir erhalten, weil er zum Posten eine Idee zu lang ist...

MfG

Patrick

[CirTap]

Hi,
ich vermute, das Problem liegt weniger an Formular und Tabelle, sondern deinem CSS.
Der einzige Fall bei dem mir sowas untergekommen war, hatte seine Ursache in einem positioniertem DIV, das sich im IE *über* das Formular gelegt hat, wobei es sich dabei um die klassische Kombi aus margin und padding handelte, die zwar den Text eingerückt hat, das DIV selbst aber fett über die ganze Seite erstreckt hat.
Da nun das DIV über dem INPUT lag, konnten man es nicht mehr anklicken,  die TAB-Reihenfolge funktionierte aber wie erwartet.

Gib den DIVs und ggf. auch Tabellen einfach mal eine satte Hintergrundfarbe, so kannst du im herausfinden, welches Schweinchen sich denn nicht so verhält, wie du denkst.
Evtl. genügt so eine Angabe im CSS um die/den Täter zu finden, vorausgesetzt du hast keine DIVs mit #id welche ihrerseits den Hintergrund festlegen, dann eben dort eine "schreiene" hintergrundfarbe zum Debuggen eintragen.
  div { background-color: #ddd;}
  div div { background-color: #ccc;}
  div div div { background-color: #bbb;}
  div div div div { background-color: #aaa;}
  table { background-color: #999;}
  table table { background-color: #888;}
  table table table { background-color: #777;}
  table table table table { background-color: #666;}

Was in dem Zusammenhang auch gerne die Art von Probs verursacht sind FORMs und INPUTs die per CSS mit "display:inline" deklariert wurde. Dadurch verlieren sie zwar ihre Ränder, erhalten dann aber auch einen dubiosen "z-index" und (Formulare) "unterwerfen" sich dann innliegenden Blockelementen, wie verschachtelten DIV und TABLE.

Hoffe das hilft weiter.

Viel Spaß,
CirTap

[Nils]

Hallo Patrick!

Fülle die leeren <td> mal mit &#160; oder &nbsp;
das hat, warum auch immer, bei mir das letzte Mal gehlofen.

Mit leeren <td> kann der IE irgendwie nicht um.

Nils

[Frodo]

Tach !
Diesmal scheint es umgekehrt zu sein und die Mozillas erweisen sich als äußerst Fehlertolerant.
Deine colspans und rowspans sind ein einziges Chaos und nicht logisch. Bring die erst mal in Ordnung, dann klappt' s auch mit dem Explorer !
Vorschlag : Bastle dir erst mal eine Tabelle ohne die spans und setz' sie erst nachträglich sukzessive ein, sonst verlierst du völlig den Überblick ... bei dem Tabellengewurstel !! :-))
Gruß Frodo

[MudGuard]

Hi,

Hier ist erstmal der Code des bewußten Forms:

Überblickst Du da noch, was Du da Tabellenmäßig baust?

td { border:1px solid red; }
im CSS könnte helfen, Du wirst sehen, daß da einige Linien fehlen.

Wozu überhaupt so viele Zeilen? Um die inputs höherzusetzen als ihre Labels (bzw. bei Dir sind das ja aus unverständlichen Gründen keine Labels, sondern nur Texte), gibt es die CSS-Eigenschaft vertical-align.

cu,
Andreas