Problem mit background eines Dropdown in FF und IE @ tutorials.de: Tutorials, Forum & Hilfe

nic1981 · 11.07.10 13:47

Hallo Zusammen!

Ich habe ein Problem, das im Internet schon desöfteren auch in anderen Foren aufgetaucht ist, aber nie so richtig gelöst wurde.

Ich habe ein html-datei, die ein CSS-Script integriert hat.

Folgender Code

HTML-Code:

<select size="1" name="Wurffeld1">
     <option id="a" value="0">W&uuml;rfe</option>
     <option id="b" value="100">100</option>
     <option id="b" value="200">200</option>
</select>

Im <HEAD> habe ich dann folgenden CSS-Code:

HTML-Code:

<style type="text/css">
<!--
  #a {
         background-color:#F82811;
  }
             
  #b {
         background-color:#11FE02;
  }
-->
</style>

Die Aufgabe des Codes ist es, zur Laufzeit über die id die Hintergrundfarbe der SelectBox zu ändern.
Dieses funktioniert beim IE tadellos, aber beim Firefox kann ich in der Auswahlliste zwar die Farben beim anklicken sehen, doch wenn ich mich dann für eine der Auswahlmöglichkeiten entschieden habe, ignoriert er die Hintergundfarbe und setzt diese auf weiß. Es steht nun die richtige Auswahl dort aber die Farbe ist nicht zu sehen. Selbst wenn ich in CSS background statt background-color benutze hat das keine Auswirkungen auf das Anzeigeergebnis.

Suche dringend Hilfe!

Viele Grüße,
nic1981

Maik · 12.07.10 06:25

Hi,

die Formular-Steuerelemente lassen sich nicht betriebssystem- und browserübergreifend einheitlich formatieren, wie es der Artikel Styling form controls und Styling even more form controls verdeutlichen, hier im Detail Styled select boxes und Styled multiple select boxes.

Übrigens darf ein ID-Bezeichner (hier ID "b") im Dokumentbaum nicht mehrmals vergeben werden.

mfg Maik

nic1981 · 12.07.10 12:34

Hi Maik!

Danke für die Antwort!

Ich werde mir mal die Texte durchlesen. Ok, mit dem Dokumentenbaum verstehe ich. Darf ich aber z.B.: id=b im gesamten Dokument nur 1mal verwenden oder darf ich es im neuen select-tag wieder verwenden?

Doch wie kann ich mein Problem jetzt lösen?

Viele Grüße,
nic1981

Maik · 12.07.10 12:36

Geht es aus meinem Beitrag und den genannten Seiten nicht klar hervor, dass es hierfür keine browserübergreifende Lösung gibt?

Den ID-Bezeichner darfst du nur einmal zwischen <body></body> vergeben.

mfg Maik

Godstyle · 12.07.10 13:00

versuch es mal so:

PHP-Code:


<select size="1" name="Wurffeld1">

     <option class="a" value="0">W&uuml;rfe</option>

     <option class="b" value="100">100</option>

     <option class="b" value="200">200</option>

</select>

PHP-Code:


<style type="text/css">

<!--

  .a {

         background-color:#F82811;

  }

             

  .b {

         background-color:#11FE02;

  }

-->

</style>

Maik · 12.07.10 13:02

Zitat von Godstyle

versuch es mal so:

PHP-Code:


<select size="1" name="Wurffeld1">
     <option class="a" value="0">W&uuml;rfe</option>
     <option class="b" value="100">100</option>
     <option class="b" value="200">200</option>
</select>

PHP-Code:


<style type="text/css">
<!--
  .a {
         background-color:#F82811;
  }
             
  .b {
         background-color:#11FE02;
  }
-->
</style>

Versuch's doch selber, bevor du hier sinnlose Vorschläge postest.

Ob nun ein ID- oder Klassenbezeichner verwendet wird, ist hier nämlich unerheblich.

mfg Maik

Godstyle · 12.07.10 13:10

habe ich doch siehe anhang. das blaue ist nur weil ich mit der maus drauf war.

wenn ich das sichtbare im dropdown anders haben will mache ich es so:

PHP-Code:




<select class="a" size="1" name="Wurffeld1">

     <option class="b" value="0">W&uuml;rfe</option>

     <option class="b" value="100">100</option>

     <option class="b" value="200">200</option>

</select>

daher verstehe ich nicht weshalb es unangebracht war.

Maik · 12.07.10 13:13

Ganz einfach aus diesem Grund:

Zitat von nic1981

Die Aufgabe des Codes ist es, zur Laufzeit über die id die Hintergrundfarbe der SelectBox zu ändern.
Dieses funktioniert beim IE tadellos, aber beim Firefox kann ich in der Auswahlliste zwar die Farben beim anklicken sehen, doch wenn ich mich dann für eine der Auswahlmöglichkeiten entschieden habe, ignoriert er die Hintergundfarbe und setzt diese auf weiß.

mfg Maik

nic1981 · 12.07.10 13:41

Hallo ihr beiden!

Bitte nicht streiten!

Danke für eure Hilfe!
Mit dem Classattribut funktioniert es leider auch nicht. Ist ja prinzipiell absolut richtig, denn class darf ich öfters verwenden, hingegen ich id nur 1 mal verwenden darf.
Aber komischerweise hat die Gruppenzuordnung über class auch keine Auswirkung in Mozilla.

Das komische ist ja, das im DropdownMenü bei klick die Farben richtig angezeigt werden, aber beim übernehmen bleibt das Ausgeählte weiß (siehe Anhang).

Was kann ich tun? JavaScript?

Viele Grüße,
Nico

Hallo Zusammen --- Problem gelöst --- mit JavaScript!

MIt etwas kleinem Aufwand konnt ich die Problematik InternetExplorer und Firefox lösen.
MIt Hilfe von JavaScript.

Beispiel:

HTML-Code:

<body text="#FFFFFF" bgcolor="#000000" style="font-family:Verdana" onLoad="GoGreen()">
....
....
....
<tr>
    <th id="id1"><?php $id=1;?>Max Muster</th>
    <td  width="70"><select size="1" name="SpieltagID1" id="SpieltagID1" onChange="GoGreenA()">
                 <option id="a" value="s0">Spieltag</option>
                 <?php include '../../include-files/Dropdown.php';?>
         </select>
    </td>
    <td width="70" ><select name="Wurffeld1" id="Wurffeld1" size="1" onChange="GoGreenA()">
                 <option id="a" value="0" >W&uuml;rfe</option>
                 <option id="b" value="100">100</option>
                 <option id="b" value="200">200</option>
         </select>
    </td>
    <td>Ergebnis: <input type="text" maxlength="4" size="5" id="Eingabe1" name="Eingabe1" onKeyup="GoGreen()"> </td>
    <td id="klein"><?php include '../../include-files/LetzterSpieltag.php';?></td>
    <?php include '../../include-files/BilderOKNotOkEintrag.php';?>
</tr>
....
....
....
</body>

Folgender JavaScript-Code:

Code :

<!--
     function GoGreenA(){
      for(var i = 1; i <= 2; i++){
                FeldA = "Wurffeld"+i;
                if(window.document.getElementById(FeldA).value > 0){
                    window.document.getElementById(FeldA).style.backgroundColor="#11FE02"; //Gruen
 
 
                }
                else{
                     window.document.getElementById(FeldA).style.backgroundColor="#F82811";   //Rot
 
                }
           }
       for(var a = 1; a <= 2; a++){
                FeldB = "SpieltagID"+a;
                if(window.document.getElementById(FeldB).value == "s0"){
                    window.document.getElementById(FeldB).style.backgroundColor="#F82811"; //Rot
 
 
                }
                else{
                     window.document.getElementById(FeldB).style.backgroundColor="#11FE02";   //Gruen
 
                }
           }
     
     
     }
 
     function GoGreen(){
           for(var i = 1; i <= 2; i++){
                Feld = "Eingabe"+i;
 
                if(window.document.getElementById(Feld).value==""){
                    window.document.getElementById(Feld).style.backgroundColor="#F82811";
 
                }
                else{
 
                     window.document.getElementById(Feld).style.backgroundColor="#11FE02";
                }
           }
           for(var a = 1; a <= 2; a++){
                FeldA = "Wurffeld"+a;
                if(window.document.getElementById(FeldA).value > 0){
                    window.document.getElementById(FeldA).style.backgroundColor="#11FE02"; //Gruen
 
 
                }
                else{
                     window.document.getElementById(FeldA).style.backgroundColor="#F82811";   //Rot
 
                }
           }
           for(var a = 1; a <= 2; a++){
                FeldB = "SpieltagID"+a;
                if(window.document.getElementById(FeldB).value == "s0"){
                    window.document.getElementById(FeldB).style.backgroundColor="#F82811"; //Rot
 
 
                }
                else{
                     window.document.getElementById(FeldB).style.backgroundColor="#11FE02";   //Gruen
 
                }
           }
 
 
     }

Ich lese in Javascirpt immer die ID der Selectfelder aus. Sie werden bei mir im Quellcode immer um eins erhöht, also Wurffeld1, Wurffeld2,....
Über den onChange() Befehl überprüft nun die Funktion, ob sich der ID-Wert geändert hat und passt dementsprechend die Hintergrundfarbe an.

Es ist ein bisschen umständlich aber es funktioniert bei den beiden Browsern tadellos.

Mmh, was meint ihr?

Viele Grüße,
nic1981

Maik · 13.07.10 08:16

Was sollen wir dazu schon groß meinen, wenn's so funktioniert?

mfg Maik

nic1981 · 13.07.10 09:57

Hi Maik!

Vielleicht kann ich es noch ein bisscehn modifizieren. Ich werde die Funktion GoGreen2() noch mit einem Parameter ausstatten, der vom Hauptprogramm mit übergeben wird. z.B. onChange="GoGreen2("Wurffeld1");
Somit müssen nicht alle drei for-Schleifen durchlaufen werden, sondern es reicht nur ein Befehl. Somit bessere Performance, Zeitersparnis und Rechenleistungsersparnis, da das HTML-Dokument aus 50 Tabellenzeilen besteht und nicht wie bei mir im Beispiel nur aus einer bzw. zwei.

Mal sehen, ob das so funktionieren wird.

Viele Grüße,
nic1981

nic1981 · 13.07.10 17:12

Hallo Zusammen!

So, dass Problem mit der Dartsellung der Hintergrundfarben in Firefox und Internet Explorer ist nun positiv gelöst!
Folgende Lösung inkl. Code.

Der HTML Code einer Tabellenzeile von sehr vielen (es werden bestimmt 50 solcher werden):
In jeder neuen Zeile werden die Namen von mir einfach erhöht (also Eingabe1, Eingabe2, Eingabe3,...) damit es keine Verwechslungen im Quelltext gibt.
Gleichermaßen können die Felder exakt angesprochen werden.

HTML-Code:

<body text="#FFFFFF" bgcolor="#000000" style="font-family:Verdana" onLoad="GoGreenStart()">
...
<form name="HerrenErgebnisse" method="get" action="<?php $_SERVER['PHP_SELF'];?>" >
...
...
<tr>
    <th id="id1"><?php $id=1;?>Spielername</th>
    <td  width="70"><select size="1" name="SpieltagID1" id="SpieltagID1" onChange="GoGreenSpieltag('SpieltagID1')">
                 <option id="a" value="s0">Spieltag</option>
                 <?php include '../../include-files/Dropdown.php';?>
         </select>
    </td>
    <td width="70" ><select name="Wurffeld1" id="Wurffeld1" size="1" onChange="GoGreenWurffeld('Wurffeld1')">
                 <option id="a" value="0" >W&uuml;rfe</option>
                 <option id="b" value="100">100</option>
                 <option id="b" value="200">200</option>
         </select>
    </td>
    <td>Ergebnis: <input type="text" maxlength="4" size="5" id="Eingabe1" name="Eingabe1" onKeyup="GoGreenErgebnis('Eingabe1')"> </td>
    <td id="klein"><?php include '../../include-files/LetzterSpieltag.php';?></td>
    <?php include '../../include-files/BilderOKNotOkEintrag.php';?>
</tr>
...
...
</form>
</body>

Bei jedem input Feld (input oder select) werden die Namen des Feldes als String mit an eine Javascript Funktion übergeben.
Diese kann dann das Feld entsprechend den Einträgen rot oder grün erscheinen lassen.
Im Body werden alle Formularfelder entsprechend ihrer Einträge ebenfalls über eine Javascript-Funktion gefärbt. ( GoGreenStart() ).

Nun die Javascript Funktionen:

Code :

function GoGreenSpieltag(Inhalt){
 
             FeldA = Inhalt;
                if(window.document.getElementById(FeldA).value == "s0"){
                    window.document.getElementById(FeldA).style.backgroundColor="#F82811"; //Rot
 
 
                }
                else{
                     window.document.getElementById(FeldA).style.backgroundColor="#11FE02";   //Gruen
 
                }
      }
      
      function GoGreenWurffeld(Inhalt){
 
             FeldB = Inhalt;
                if(window.document.getElementById(FeldB).value > 0){
                    window.document.getElementById(FeldB).style.backgroundColor="#11FE02"; //Gruen
 
 
                }
                else{
                     window.document.getElementById(FeldB).style.backgroundColor="#F82811";   //Rot
 
                }
      }
      
      function GoGreenErgebnis(Inhalt){
      
               FeldC = Inhalt;
 
                if(window.document.getElementById(FeldC).value==""){
                    window.document.getElementById(FeldC).style.backgroundColor="#F82811";
 
                }
                else{
 
                     window.document.getElementById(FeldC).style.backgroundColor="#11FE02";
                }
      }
 
 
      function GoGreenStart(){
           Anzahl = window.document.HerrenErgebnisse.length;
               for(var zaehler = 0; zaehler < Anzahl-1; zaehler++){
                   if(window.document.HerrenErgebnisse.elements[zaehler].value=="" || window.document.HerrenErgebnisse.elements[zaehler].value == "s0" || window.document.HerrenErgebnisse.elements[zaehler].value==0){
                       window.document.HerrenErgebnisse.elements[zaehler].style.backgroundColor="#F82811"; //Rot
                   }
                   else{
                        window.document.HerrenErgebnisse.elements[zaehler].style.backgroundColor="#11FE02"; //Gruen
                   }
               }
      }

Somit kann man sich CSS beim Färben der Formularfelder sparen, bzw. man muss es sich sogar sparen, da es bei den beiden Browsern anscheinend unterschiedliche Interpretaionen des CSS gibt.

So, ich hoffe, dass ich allen weiterhelfen konnte, die das gleiche Problem entdecken.

Viele Grüße,
nic1981

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

onchange: Checkbox in Abhängikeit eines Dropdown

Wert eines Dropdown Menüs in Textarea schreiben

Probleme mit Höhe bei background-image bzw. background-repeat

per dropdown gewisse elemente eines Formulars einblende

Problem mit hover- background ändern & Problem bei Reload

E-Mail:

Abonnieren Abbestellen