✔ Innenabstand bei select

[namiro]

Hallo,

im Form habe ich bei "Anrede" und "Monat" und"Jahr" select eingesetzt.
Aber der Innenabstand sehr eng aus.

Also der Text fängt von ganz am Rand an.

bitte siehe hier.

Ich weiß nicht, wieso, weil ich eigentlich nichts besonderes gemacht habe.

Bei "Anrede" normal linksbündig,

<select name="Anrede" class="sl_wh1" id="Anrede">
          <option value="Frau" selected="selected">Frau</option>
          <option value="Herr">Herr</option>
        </select>

bei "Monat" und"Jahr" rechtsbündig sind es.

                          <select name="ZA_Anreise_Monat" size="1" id="ZA_Anreise_Monat" tabindex="1" class="sl_wh2">
                            <option value="Januar" class="slop">Januar</option>
                            <option value="Februar" >Februar</option>
                            <option value="M&auml;rz" >M&auml;rz</option>
                            <option value="April" >April</option>
                            <option value="Mai" >Mai</option>
                            <option value="Juni" >Juni</option>
                            <option value="Juli" >Juli</option>
                            <option value="August" >August</option>
                           <option value="September" >September</option>
                            <option value="Oktober" selected="selected">Oktober</option>
                            <option value="November" >November</option>
                            <option value="Dezember" >Dezember</option>
                  </select>

.sl_wh1{width:53px;}

.sl_wh2{width:100px; text-align:right;}

.kontakt select{
background:#fff;
border:#ececde 1px solid;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

Bitte, helfe!!

 

[Maik]

Hi,

und auch hier werden wir dir leider nicht weiterhelfen können, da es vom Browser abhängt, ob er denn text-align:right für das <select>-Element überhaupt unterstützt; im Opera sitzen die Auswahlpunkte (Januar,Februar,...) nicht so press an dem Steuerelement (Pfeil), wie im Firefox, und in den übrigen Browsern ist die Auswahlliste linksbündig ausgerichtet, wo auch kein Problem mit dem Innenabstand existiert.

Schau dir hierzu bitte mal die Browser-Schnappschüsse in http://www.456bereastreet.com/lab/form_controls/select/ genauer an, die für den Beispielfall #el12 genau diesen Unterschied dokumentieren. In deinem letzten Thema bzgl. der text-align:right-Formatierung für das <select> hattest du abschliessend doch noch geäußert, dass diese Seite dir bekannt sei :suspekt:

Mit CSS lässt sich da auch nicht entgegenwirken, denn padding-right hätte im FF lediglich zur Folge, dass das Steuerelement der Auswahlliste nach links verschoben wird, und sich ein Abstand zum rechten Rahmen ergibt.

mfg Maik

 

[namiro]

Hallo Maik,

vielen Dank für Deine Antwort.
Aber was ich nicht immer noch verstehen kann, ist folgendes.

Wenn du die Seite siehst,
oben gibt es noch eine SELECT für Anrede.

Die ist ja nun ganz normal, ohne CSS, also linksbündig.
Aber trotzdem siehen die Optionen, "Frau" udn "Herr" ganz linksbündig.

Ich habe diese HTML CODE auch andere Setien benutzt,

bitte siehe hier,

da scheinen die Anrede-Optionen aber alles ganz normal, also nicht so linksbündig aus.

Mir ist es einfach Rätschel.

 

[Maik]

Naja, ganz so ohne CSS-Formatierungen kommt dieses <select> aber auch nicht daher - blos ohne text-align:right.

.kontakt select { /*ktz.css (Linie 408)*/
background:#FFFFFF none repeat scroll 0;
border:1px solid #ECECDE;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}
.sl_wh1 { /*ktz.css (Linie 436)*/
width:51px;
}
* { /*ktz.css (Linie 8)*/
margin:0;
padding:0;
}

Das Rätsel lässt sich aber ganz bequem und einfach im Quervergleich der beiden Stylesheets http://hk.miokha.de/29/css/ktz.css und http://www.avantgardeners.de/css/ag.css lösen.

* { /* Der Universalselektor "*" umfaßt alle enthaltenden HTML-Elemente im Dokumentbaum */
margin:0;
padding:0; /* zeigt im Firefox Wirkung in den <option>-Tags der Auswahlliste */
}

Lösung in diesem Fall:

option { padding-left:3px; }

mfg Maik

 

[namiro]

Hi, Maik,



vielen, vielen Dank!!