• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Formular/ Select ignoriert css

Status
Für weitere Antworten geschlossen.
R

raphaelf

Mitglied
Hallo :=)

Mein Formular sieht gut aus bis auf meine Dropdownliste.

Kann mir jemand sagen warum sie nicht gleich wie das input aussieht? :(

Danke schön im Voraus.

Code: 
[SIZE=2]td, table{
font-family:verdana;
font-size:10px;
vertical-align:top;
line-height:12px;
color:#7F7F7F;

}
 
form { margin:0px; padding:0px}
body { margin:0px; padding:0px; background-color: #FFFFFF}
a { color:#E93400; text-decoration:none}
a:hover{ text-decoration:underline}
span a { color:#1569C7; text-decoration:underline}
span a:hover{ text-decoration:none}
.list ul{margin:0px; padding:0px; list-style:none; line-height:19px;}
.list ul li{ background:url(images/list_marker.gif) no-repeat left top; padding:0 0 0 12px}
.list ul li a{ color:#E93400; text-decoration:underline}
.list ul li a:hover{text-decoration:none}
.policy{ color:#7F7F7F}
.policy a{ color:#000000; text-decoration:none}
.policy a:hover{ text-decoration:underline}
span{ color:#000000}
strong a{ font-size:11px}
strong{ font-size:11px}
b{ color:#E93400}
.form input {
width:191px;
height:21px;
font-family:verdana;
font-size:9px;
color: #7F7F7F;
padding:2 0 0 6px;
border-color:#D5D5D5;
border-style:solid;
border-width:1px;
background-color:#F8F8F8
}
.form textarea {
width:191px;
height:102px;
font-family:verdana;
font-size:9px;
color:#7F7F7F;
overflow:hidden;
padding:2 0 0 6px;
border-color:#D5D5D5;
border-style:solid;
border-width:1px;
background-color:#F8F8F8
}
[/SIZE]

Code: 
[SIZE=2]<form name="Formular" action="anmeldung.php" method="POST" onSubmit="return chkFormular()">
<table cellspacing="0" cellpadding="0" class="form">
<tr>
<td style="width:198px; height:128px">
<table cellspacing="0" cellpadding="0">
<tr>
Kurs:
<select name="kurs" font-size: 12pt style="color:#7F7F7F" style="border-style:solid" style="border-width:1px;" size="1" onchange="doSubmit()">
<option>Eintieg in die Informatik</option>
<option>Internet Grundlagen</option>
<option>IT-Sicherheit (Sicher im Internet)</option>
<option>Effizient mit digitalen Fotos umgehen</option>
<option>Windows XP / Vista Grundlagen</option>
<option>Microsoft Office Grundlagen</option>
<option>Microsoft Powerpoint</option>
<option>Microsoft Excel</option>
<option>Microsoft Outlook</option>
<option>Microsoft Word</option>
<option>PhotoPaint</option>
<option>Corel Draw Einsteiger</option>
<option>Windows Fortgeschrittene</option>
<option>Homepage/Webdesign</option>
<option>Datenbank-Programmierung (SQL)</option>
<option>Programmieren (C++)</option>
</select>
<tr>
<td style="width:198px; height:27px">Firma:<input name="firma" type="text" ></td>
</tr>
<tr>
<td style="width:198px; height:27px">Name:<input name="name" type="text" ></td>
</tr>
<tr>
<td style="width:198px; height:27px">Telefonnummer:<input name="telefonnummer" type="text" ></td>
</tr>
<tr>
<td style="width:198px; height:27px">Email:<input name="email" type="text"></td>
</tr>
</table>
</td>
<td style="width:202px; height:128px">
<table cellspacing="0" cellpadding="0">
<tr>
<br><br><br>
<td style="width:198px; height:27px">Adresse:<input name="adresse" type="text"></td>
</tr>
<tr>
<td style="width:202px; height:139px">Bemerkung:<textarea name="bemerkung" cols="0" rows="0"></textarea></td>
</tr>
<tr>
<td style="width:202px; height:0px">

<input type="submit" value="Anmelden">

</tr>
</table>
</td>
</tr>
</table>
</form>
[/SIZE]
 
Code: 
<select name="kurs" font-size: 12pt style="color:#7F7F7F" style="border-style:solid" style="border-width:1px;" size="1" onchange="doSubmit()">
font-size steht außerhalb von style.
Die anderen For-Elemente haben font-size:9px und eine background-color:#F8F8F8
css
Code: 
.form select {
 color:#7F7F7F;
 font-size: 9px;
 border: 1px solid #7F7F7F;
 background-color:#F8F8F8;
}
html
Code: 
<select name="kurs" size="1" onchange="doSubmit()">
 
So sieht es im ff2.0 aus. Im Opera9.0 ähnlich.
formff.png

Farben angepasst:
Code: 
.form select {
 color:#7F7F7F;
 font-size: 9px;
 border: 1px solid #D5D5D5;
 background-color:#F8F8F8;
}
Für den IE6 habe ich keine gute wirklich gute Idee.
Den Submit-Button könntest du gegen eine Grafik austauschen.
Code: 
<input name="Anmelden" src="button-grafik.png" class="anmelde_button" type="image">
Ich finde so schlecht sieht es im IE6 gar nicht aus.

In der Website-Gestaltung sollte man mindestens in diesen Browsern testen können:
-IE6
- Mozilla (z.B. ff 2 oder ff 3)
-IE7
-Opera 9

Ich habe noch Safari3.1(win), IE5(win), ff2, ff3 und konqueror.
Andere Testen auch auf älteren Operas, ff1, IE5(mac) und diversen anderen.

In kürze muss man wohl auch unter IE8 testen können.
 
Zuletzt bearbeitet:
Hallo!!

Ok ich werde versuchen im Zukunft auf diese Browsern zu testen.

Doch was mich stört ist nicht das Resultat von IE 6 sonden von Firefox 3.

Dort sieht es so aus:

Weisst du wie ich das beheben kann?
 

Anhänge

  • firefox.GIF
    firefox.GIF
    2,7 KB · Aufrufe: 9
Zuletzt bearbeitet:
Wie die Eingabefelder aussehen, ist nicht nur abhängig vom Browser, sondern auch vom Betriebssystem. Ist ja auch legitim, gibt es doch keine Vorschriften, welche CSS-Eigenschaften mit welchem Wert per default gesetzt sein müssen.

Wenn einem die Eingabefelder nicht gefallen - sie zu ändern hat den Nachteil, dass Nutzer sie möglicherweise nicht mehr als solche erkennen! - soll sie einfach umformatieren, natürlich mit CSS. Es gibt aber auch einige Teile von Feldern, die sich nicht ändern lassen. Ich hatte z.B. nie Probleme damit, den border eines Eingabefeldes (was bei mir überall außer in Vista mit "inset" angegeben ist) zu ändern. Aber z.B. das Teil zum Draufklicken bei einem select, ist schon immer ein Element des Browsers gewesen und konnte nicht geändert werden, genauso wie der "Durchsuchen..." Button bei Eingabefeldern von Typ file.

Von daher ist es wahrscheinlich die beste Lösung, Formularfelder so zu lassen, wie sie der Browser darstellet, am einfachsten und benutzerfreundlichsten.

Gruß,
-Efchen
 
<input type="file"> ist aber auch eine Besonderheit.
Andere <input> kann man, je nach Browser / System schon verändern.

Teilweise kann man das Formular damit sogar Nutzerfreundlicher gestalten.
 
neuroleptika schrieb:
In der Website-Gestaltung sollte man mindestens in diesen Browsern testen können:
-IE6
- Mozilla (z.B. ff 2 oder ff 3)
-IE7
-Opera 9

Ich habe noch Safari3.1(win), IE5(win), ff2, ff3 und konqueror.
Andere Testen auch auf älteren Operas, ff1, IE5(mac) und diversen anderen.

In kürze muss man wohl auch unter IE8 testen können.
Zum Vergrößern anklicken....

für den kurzen Überblick reicht meiner Meinung nach auch sowas wie browsershots.org aus, dann sind auch gleich alle mit dabei.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben