• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

style="display:none;" funktioniert nicht in IE

G

geotommy

New member
Hallo,

ich habe mit dem Problem schon lange gekämpft und finde dazu einfach keine Lösung. Ich bin leider ein Anfänger in dieser Materie.

Ich versuche für eine Umfrage ein Formular zu basteln, in dem die Checkboxes ausgeblendet werden. Die Checkboxen werden durch ein Label aktiviert, sollen aber selbst nicht sichtbar sein. Dazu verwende ich den Befehl
style="display:none;". Es funktioniert wunderbar in Firefox, in IE leider nicht. Die Werte werden nicht übermittelt, es findet keine Auswahl statt.
Woran legt das gibt es für diese speziellen Fall eine Abhilfe?
Unten das genaue Script.
Für eure Hilfe Danke ich schon mal:)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function aendereHG(zelle)
{
zelle.className = zelle.className=='c1' ? 'c2' : 'c1';
}

//-->
</script>

<style type="text/css">
<!--
td.c1 {background-color:#FFFFFF;}
td.c2 {background-color:#00AA00;}
//-->
</style>
</head>
<body>

<TABLE SUMMARY="layout table" CELLPADDING="1" CELLSPACING="0" BORDER="0">
<TR>
<TD VALIGN="TOP"><INPUT ID="A2_1_1" TABINDEX="100" type="CHECKBOX" style="display:none;" NAME="A2_1:1" VALUE="1" ></TD><TD class="c1" onClick="aendereHG(this);"><LABEL FOR="A2_1_1">Das</LABEL></TD>
<TD VALIGN="TOP"><INPUT ID="A2_1_2" TABINDEX="101" TYPE="CHECKBOX" style="display:none;" NAME="A2_1:2" VALUE="2" ></TD><TD class="c1" onClick="aendereHG(this);"><LABEL FOR="A2_1_2">wird</LABEL></TD>
<TD VALIGN="TOP"><INPUT ID="A2_1_3" TABINDEX="102" TYPE="CHECKBOX" style="display:none;" NAME="A2_1:3" VALUE="3" ></TD><TD class="c1" onClick="aendereHG(this);"><LABEL FOR="A2_1_3">vielleicht</LABEL></TD>
<TD VALIGN="TOP"><INPUT ID="A2_1_4" TABINDEX="103" TYPE="CHECKBOX" style="display:none;" NAME="A2_1:4" VALUE="4" ></TD><TD class="c1" onClick="aendereHG(this);"><LABEL FOR="A2_1_4">doch noch</LABEL></TD>
<TD VALIGN="TOP"><INPUT ID="A2_1_5" TABINDEX="104" TYPE="CHECKBOX" style="display:none;" NAME="A2_1:5" VALUE="5" ></TD><TD class="c1" onClick="aendereHG(this);"><LABEL FOR="A2_1_5">funktionieren.</LABEL></TD>
</TR>
</TABLE>
</html>
 
Hi,

ich muss zugeben ein Firefox User zu sein:) Nein, leider nicht. Beim ausführen bekomme ich zumindest keine Fehlermeldungen.
Es geht hier um ein visuelles Problem, durch das klicken auf das Label wird im Firefox auch die Auswahl gemacht, die Checkbox ist dabei unsichtbar. Der IE scheint diese Auswahl nicht zu machen. Wenn ich die Checkbox einblendee (Befehl rausnehmen) funktioniert es wieder.

Gruß
 
Zuletzt bearbeitet:
1. Deine DocType ist unvollständig (für den IE) -> du arbeitest im Quirksmodus.
2. Der IE scheint das mit dem label und versteckten Objekten (mit visibility und display) nicht zu machen - aber wenn du statt dessen mit width: 0px; arbeitest funktionierts und du siehst auch keine Checkboxen.

PS: Wieso eine Tabelle?
 
Hi kkapsner,

vielen Dank für Deine Hilfe! Es funktioniert im IE, dafür geht es im Firefox nicht mehr, d.h. die Checkboxen sind jetzt sichtbar. Kann man beide Lösungen verbinden, damit es für beide Browser kompatibel ist?

Dieses hat z.B. nicht funktioniert:
style="width:0px; display:none;"

Es ist eine Tabelle um es in eine Befragungssoftware als Frontend einzubinden. Ich habe den Quelltext einer Standartfrage übernommen und entsprechend modifizieren wollen.

Danke auch für die Erklärungen. Ich muss mich definitiv mit der Programmierung stärker auseinandersetzen:) Bin erst am Anfang.
 
Es gibt noch viele andere Möglichkeiten ein Element mit CSS zu verstecken... position, opacity,...
 
Hi kkapsner,

danke für den Tipp, wird weiterverfolgt. Es müsste doch aber eine Lösung geben die beiden Optionen:
style="width:0px;"
und
style="display:none;"

zu verbinden, so dass es je nach Browser die eine oder andere Option greift, oder sehe ich das als Laie falsch?

Gruß
 
Gibt es schon - ist aber nicht besonders elegant (ich persönlich finde ja das Ganze insgesammt nicht besonders elegent - was ist, wenn jemand mit deaktiviertem JS auf deine Seite geht? Er kann zwar die Checkboxen ändern, kann aber nicht kontrollieren, ob sie jetzt aktiv sind oder nicht.)
Mache das "checken" der Boxen doch auch mit JS.
 
Hi,
da bin ich programmtechnisch überfragt. Könntest Du kurz sagen wie mann die beiden style Komponenten vebindet? Oder wenn es nicht aufwendig ist den Javascript für diese Funktion nennen? Ich wäre dir wirklich dankbar.

Sinn der ganzen Sache ist, dass die Person auf der Seite einen normalen Text sehen soll. Mit einem Klick können einzelne Wörter markiert/demarkiert werden. Im Hintergrund wird dadurch eine Auswahl (unsichtbares Kästchen) aktiviert. Die Auswahl wird in eine Datenbank aufgenommen. Natürlich muss ich davor gewährleisten, dass Javascript ausgeführt wird. Wie erwähnt handelt es sich um eine Lösung für eine Umfrage. Zugelassen werden Personen, die Javascript im Browser ausführen. Script dafür habe ich bereits im Netz gefunden und adaptiert. Führe das Script aus, dann wird es vielleicht verständlicher:)
 
Zuletzt bearbeitet:
Versuch' mal
Code: 
position: absolute;
top: -100000px;
left: -100000px;
Wenn du sowieso prüfst, ob JS aktiv, ist das ja OK.
 
Ach so - wir haben aneinander vorbeigeredet. Natürlich funktioniert visibility im IE (d.h. die Elemente werden nicht angezeigt, es existiert aber dennoch ein Platzhalter) - das meinte ich nicht. Was ich meinte ist, dass der IE bei einer Checkbox, die per visibility ausgeblendet ist, den Status nicht ändert, wenn man auf das zugehörige Label klickt. Ds war auch das Problem des Fragestellers.
 
Hi kkapsner, dkdenz,

ja genau das war das Problem. Es wurde aber mit den Vorschlag von kkapsner gelöst. Nochmals danke.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben