1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

css Problem beim IE

Dieses Thema im Forum "CSS" wurde erstellt von Don_Pazo, 31. Juli 2006.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Don_Pazo

    Don_Pazo Erfahrenes Mitglied

    Hallo,
    ich habe ganz böses Problem.
    Ich habe eine PHP Web-Seite erstellt. Als Test-Explorer habe ich Firefox benutzt.
    Ich habe Button´s erstellt mit eine CSS Datei:
    Code (Text):
    1.  
    2. /*==========    BUTTON MEILENSTEIN EINFÜGEN    ==========*/
    3. input.buttonMeilensteinEinfuegen {
    4.     width: 200px;
    5.     height: 35px;
    6.     border: 0;
    7.     color: #0000FF;
    8.     text-decoration:none;
    9.     background: #FFF url(../bilder/meilensteinEinfuegen_aus.gif) no-repeat;
    10.     outline: none;
    11.  
    12. }
    13.  
    14. input.buttonMeilensteinEinfuegen:hover {
    15.     border: 0;
    16.     color: #FF0000;
    17.     text-decoration: none;
    18.     background: #FFF url(../bilder/meilensteinEinfuegen_ein.gif) no-repeat;
    19.  
    20. }
    21.  
    Also damit sich das Bild ändern kann wenn man mit dem Maus-Zeiger über den Button läuft.

    Dies geht aber blöder weise mit Internet Explorer gahr nicht.

    Gibt es eine möglichkeit, das CSS zu umschreiben
    Damit es auch beim IE alles funktioniert
  2. Maik

    Maik Gast

    Der IE wendet die :hover-Pseudoklasse nur auf das a-Element an. Von daher wirst du auf Javascript zurückgreifen müssen, um die Hintergrundgrafiken für das input-Element zu tauschen:

    Code (Text):
    1.  
    2. /*==========    BUTTON MEILENSTEIN EINFÜGEN    ==========*/
    3. input.buttonMeilensteinEinfuegen_normal {
    4.     width: 200px;
    5.     height: 35px;
    6.     border: 0;
    7.     color: #0000FF;
    8.     text-decoration:none;
    9.     background: #FFF url(../bilder/meilensteinEinfuegen_aus.gif) no-repeat;
    10.     outline: none;
    11.  
    12. }
    13.  
    14. input.buttonMeilensteinEinfuegen_hover {
    15.     border: 0;
    16.     color: #FF0000;
    17.     text-decoration: none;
    18.     background: #FFF url(../bilder/meilensteinEinfuegen_ein.gif) no-repeat;
    19.  
    20. }
    21.  
    Code (HTML5):
    1.  
    2. <input class="buttonMeilensteinEinfuegen_normal" onmouseover="this.className='buttonMeilensteinEinfuegen_hover'" onmouseout="this.className='buttonMeilensteinEinfuegen_normal'">
    3.  
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen