✔ Sendebutton Fehler im Kontaktformular

[emonem]

Hi,

ich bin dabei ein Kontakformular zu entwerfen.
Hab das Ding soweit fertig und im FF und im Opera siehts auch so aus wie es
soll.

Im IE dagegen hab ich das Problem das sobald ich einem Input Feld meine Daten eintrage die Kontur des Sende Button dicker wird.

Ich weiß nicht ob es jetzt ein HTML oder eher ein CSS Problem ist.
Hier mal ein Auszug aus dem Dokument für den Sende Buttton:

HTML:

<tr >
            <td height="35" ></td>
            <td align="left" valign="bottom" ><input type="submit" value="Senden" name="submit" class="submit"/>
              <input type="reset" value="Zurücksetzen" class="reset"/></td>
          </tr>

CSS:

.submit {
width:50px;
background:#E7ECF2;
border:1px solid #696D76;
font: 12px Arial, sans-serif;
color: #000000;
}

Hier ist der link zum Formular: link
und hier die Datei: link

Das Problem ist nur im IE.
Hoffe ihr könnte mir helfen.


Danke und Gruß

(PS: ich weiß hab den Doctype usw. nicht reingeschrieben, mailer wird später includet)

 

[Maik]

Naja, als einen Fehler würde ich dieses Verhalten des IE nicht bezeichnen

Lösung: den Rahmen auf null setzen und stattdessen eine Hintergrundgrafik (incl. Rahmen) verwenden.

 

[emonem]

Hi,

danke für die schnelle hilfe. Das Problem scheint wohl bekannt zu sein.

Vielleicht kannst du mir ja noch einen Tip geben, und zwar möchte ich den Input Feldern
noch eine Funktion geben. Wenn man in ein Feld klickt soll sich die Hintergrundfarbe oder die Rahmenfarbe ändern.
Hab den Feldern einzelne Klassenbezeichnungen zugewiesen, zB:

.input {
width:270px;
border:1px solid #696D76;
font: 12px Arial, sans-serif;
color: #000000;
}

 

[Maik]

Hierfür benötigst du zwei CSS-Klassen:

input.normal {
border: 1px solid #000;
background: #dfdfdf;
}

input.focus {
border: 1px solid #ff0000;
background: #afafaf;
}

und etwas Javascript, um sie zu tauschen:

<input type="text" class="normal" onfocus="this.className='focus'" onblur="this.className='normal'">

 

[Gumbo]

Das form-Element ist übrigens im table-Element nicht erlaubt. Außerdem solltest du die Dimensionen des Optionsauswahlmenü und die Schaltflächen nicht selbst bestimmen, da nicht jeder diese Elemente so darstellt wie der Internet Explorer in Windows.