Warum ist die Darstellung nicht korrekt?

[Klaus]

Hallo,

ich habe ein kleines Eingabeformular erstellt und mit CSS aufhübschen wollen.
Aber einige von mir definierte Eigenschaften werden nicht korrekt dargestellt und ich sehe offenbar (mal wieder) den Wald vor lauter Bäumen nicht.
Zum Einen wird nur das zweite Eingabefeld vom Browser (FF 15.01) als Pflichtfeld markiert und zum Anderen soll der Button abgerundete Ecken haben, wird aber nicht angezeigt.

Hier der HTML-Teil:

  
<div id="form-wrapper">  
    <form method="post" action="#">  
        <label for="vorname">Vorname: <span class="required">*</span></label>  
        <input type="text" id="vorname" name="vorname" value="" required="required" autofocus="autofocus" />  
        <label for="nachname">Nachname: <span class="required">*</span></label>  
        <input type="text" id="nachname" name="nachname" value="" required="required" />  
        <label for="email">Email: <span class="required">*</span></label>  
        <input type="email" id="email" name="email" value="" placeholder="[e-mail]" required="required" />  
        <label for="telephone">Telephone: </label>  
        <input type="tel" id="telephone" name="telephone" value="" />  
        <label for="abteilung">Abteilung: </label>  
        <select id="abteilung" name="abteilung" size="1">  
            <option value="general">General</option>  
            <option value="sales">Sales</option>  
            <option value="support">Support</option>  
        </select>  
        <label for="message">Beaschreibung: <span class="required">*</span></label>  
        <textarea id="message" name="beschreibung" placeholder="Your message must be greater than 20 charcters" required="required" data-minlength="20"></textarea>  
        <input type="submit" value="Absenden" id="submit-button" />  
        <p id="req-field-desc"><span class="required">*</span> indicates a required field</p>  
    </form>  
</div>  

Und hier das dazugehörige CSS:

  
	#form-wrapper {  
		background-color:#F2F7F9;  
		width:465px;  
		padding:15px;  
		margin: 50px auto;  
		border: 6px solid #8FB5C1;  
		-moz-border-radius:15px;  
		-webkit-border-radius:15px;  
		border-radius:15px;  
		position:relative;  
	}  
	#form-wrapper h1 { font-size:42px; }  
	#form-wrapper h2 { margin-bottom:15px; font-style:italic; font-weight:normal; }  
	#form-wrapper input, #form-wrapper select, #form-wrapper textarea, #form-wrapper label { font-size:12px; margin-bottom:2px; }  
	#form-wrapper input, #form-wrapper select, #form-wrapper textarea { width:450px; border: 1px solid #CEE1E8; margin-bottom:5px; padding:4px; }  
	#form-wrapper input:focus, #form-wrapper select:focus, #form-wrapper textarea:focus { border: 1px solid #AFCDD8; background-color: #EBF2F4; }  
	#form-wrapper textarea { height:150px; resize: none; }  
	#form-wrapper label { display:block; }  
	#form-wrapper .required { font-weight:bold; color:#F00; }  
	#form-wrapper #submit-button {  
		width: 100px;  
		background-color:#333;  
		color:#FFF;  
		display:block;  
		float:right;  
		margin-bottom:0px;  
		margin-right:6px;  
		background-color:#8FB5C1;  
		-moz-border-radius:15px;  
		-webkit-border-radius:15px;  
	}  
	#form-wrapper #submit-button:hover { background-color: #A6CFDD;	}  
	#form-wrapper #submit-button:active { position:relative; top:1px; }  
	#req-field-desc { font-style:italic; }  
	::-webkit-input-placeholder { color:#CCC; font-style:italic; }  
	input:-moz-placeholder, textarea:-moz-placeholder { color:#CCC; font-style:italic; }  
	input.placeholder-text, textarea.placeholder-text { color:#CCC; font-style:italic; }  

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Zum Einen wird nur das zweite Eingabefeld vom Browser (FF 15.01) als Pflichtfeld markiert

Kann ich nicht nachvollziehen.

und zum Anderen soll der Button abgerundete Ecken haben, wird aber nicht angezeigt.

Firefox unterstützt seit Urzeiten border-radius präfixfrei und hat die Unterstützung dieser Eigenschaft mit -moz-Präfix eingestellt.

-moz-border-radius ist mittlerweile sinnfrei; der -webkit-Präfix eventuell noch für alte Androiden.

Qapla'

[Klaus]

Hallo,

Zum Einen wird nur das zweite Eingabefeld vom Browser (FF 15.01) als Pflichtfeld markiert

Kann ich nicht nachvollziehen.

Das 2. Feld wird direkt schon rot umrandet dargestellt, noch bevor der Submit-Button geklickt wird. Aber eben nur das 2. Eingabefeld. Nur erst beim Klick auf Absenden werden alle rot markiert.
Ich kann nur keinen Unterschied feststellen, warum das Feld Vorname und das Feld Nachname anders dargestellt werden.

und zum Anderen soll der Button abgerundete Ecken haben, wird aber nicht angezeigt.

Firefox unterstützt seit Urzeiten border-radius präfixfrei und hat die Unterstützung dieser Eigenschaft mit -moz-Präfix eingestellt.

-moz-border-radius ist mittlerweile sinnfrei; der -webkit-Präfix eventuell noch für alte Androiden.

Tatsächlich... Ist mir nicht aufgefallen, da ich sonst auch immer border-radius angebe, hier aber vergessen habe.
Die anderen -moz-... sind aber wohl noch notwendig, hab es eben mal mit transition und background-gradient versucht.

[Klaus]

Ergänzung:

Merkwürdigerweise wird alles korrekt dargestellt, wenn ich ein neues Feld zwischen Vorname und Nachname hinzufüge. Oder wenn ich die Reihenfolge ändere.
Oder andersherum gesagt, das Problem tritt nur dann auf, wenn das Feld Nachname an zweiter Stelle steht.

[Gunnar Bittersmann]

@@Klaus:

nuqneH

Das 2. Feld wird direkt schon rot umrandet dargestellt, noch bevor der Submit-Button geklickt wird.

Bei mir nicht.

Die anderen -moz-... sind aber wohl noch notwendig, hab es eben mal mit transition und background-gradient versucht.

Ja, natürlich.

Bei Gradienten aber die andere Syntax bei präfixfreien Werten beachten! (Firefox versteht auch schon 'to …' samt magic corners.)

Qapla'

[ChrisB]

Hi,

Das 2. Feld wird direkt schon rot umrandet dargestellt, noch bevor der Submit-Button geklickt wird. Aber eben nur das 2. Eingabefeld. Nur erst beim Klick auf Absenden werden alle rot markiert.

Kann ich ebenfalls nicht nachvollziehen.

Bitte stelle ein direkt testfähiges Beispiel bereit - als jsFiddle o.ä.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Bitte stelle ein direkt testfähiges Beispiel bereit - als jsFiddle o.ä.

Wenn kein JavaScript involviert ist, empfehle ich dabblet.

Qapla'

[Klaus]

Hallo,

Wenn kein JavaScript involviert ist, empfehle ich dabblet.

In dabblet wird auch alles korrekt angezeigt. Auch wenn ich den ganzen Quelltext CSS und HTML komplett reinkopiere.
Ich tue es jetzt mal als Bug ab und ignoriere es.

Vielen Dank für Eure Mühe.

[Tom]

Hello,

Firefox unterstützt seit Urzeiten border-radius präfixfrei und hat die Unterstützung dieser Eigenschaft mit -moz-Präfix eingestellt.

-moz-border-radius ist mittlerweile sinnfrei; der -webkit-Präfix eventuell noch für alte Androiden.

Es wird noch für den Iceweasel (auf Linux) benötigt!

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[Gunnar Bittersmann]

@@Tom:

nuqneH

[-moz-border-radius] wird noch für den Iceweasel (auf Linux) benötigt!

Be*nötigt*? Für **wen**?

Für einen Nutzeranteil kleiner als ε etwas einbauen, das rein kosmetisch ist? Kann man machen, muss man aber nicht.

Qapla'

[ChrisB]

Hi,

Es wird noch für den Iceweasel (auf Linux) benötigt!

“I see dead peo^w browsers!!!!1eleven”

MfG ChrisB