IE-Problem mit mehreren <label> TAGS hintereinander

[Josch]

Moin zusammen,

ich habe ein Formular komplett in CSS ohne Tabellen erstellt. Jetzt habe ich ein einziges Problem - und das latürnich ausschließlich im Internet Explorer ;-)

(Getestet mit WIN: IE 6.0, FF 1.5, Moz 1.7.12, Netscape 7.1, Opera 8.5; Mac: Safari 2.0.4, FF 1.5, Moz 1.7.12, Netscape 7.1, Opera 9.0, Camino 1.0.2)

Es handelt sich um dieses Formular:

http://www.cws-ev.de/mitglied_werden2.php

Das einzige Problem liegt in der Zeile "Geb.-Datum". In sämtlichen Browsern - bis auf den IE - sieht es so aus:

"Tag" selectfeld1, "Monat" selectfeld2, "Jahr: 19" selectfeld3 selectfeld4

Nur der IE macht das:

"Tag" selectfeld1 selectfeld2 selectfeld3 selectfeld4
"Monat" "Jahr: 19"

wobei "Monat" linksbündig unter selectfeld1 steht und "Jahr: 19" linksbündig unter selectfeld2.

Der entsprechende Abschnitt im Formular sieht so aus:

<label for="geburtsdatum" class="left">Geb.-Datum:^*</label>
     <label for="geb_tag" class="reihe">Tag</label> <select name="geb_tag" id="geb_tag" class="feld2">
    <option selected>--</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
    <option>24</option>
    <option>25</option>
    <option>26</option>
    <option>27</option>
    <option>28</option>
    <option>29</option>
    <option>30</option>
    <option>31</option>
   </select> <label for="geb_monat" class="reihe">Monat</label> <select name="geb_monat" id="geb_monat" class="feld2">
    <option selected>--</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
   </select> <label for="geb_jahr1" class="reihe">Jahr: 19</label><select name="geb_jahr1" id="geb_jahr1" class="feld2">
    <option selected>-</option>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
   </select> <label for="geb_jahr2" class="reihe"></label><select name="geb_jahr2" id="geb_jahr2" class="feld2">
    <option selected>-</option>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
   </select><br />

Das CSS dazu:

label.left
{
    float         : left;
    text-align    : right;
    width         : 12em;
    margin-right  : 1em;
    display       : inline;
}

label.reihe
{
 float         : left;
 margin-right  : 0.3em;
    display       : inline;
    position      : relative;
}

input[type=text],
select
{
    float         : left;
 margin-right  : 1em;
    display       : inline;
}

input.right
{
    float         : left;
    width         : auto;
    clear         : both;
    margin-left   : 5.3em;
    margin-right  : .3em;
    display       : inline;
}

input[type=checkbox].right,
input[type=radio].right,
input[type=submit].right
{
    margin-left   : 6.3em;
}

form br
{
    clear         : both;
}

label,
select,
input[type=checkbox],
input[type=radio],
input[type=button],
input[type=submit]
{
    cursor         : pointer;
}

form
{
    line-height    : 140%;
}

form p
{
    line-height    : 120%;
}

fieldset
{
 display: block;
 clear: both;
 border-color: #900;
 border-width: 1px;
 border-style: dashed;
 font-size: 0.9em;
 padding: 10px;
}

form legend
{
 background-color: #ffe7c4;
 font-weight: bold;
 padding: 0 5px 0 5px;
}

Wo liegt das Problem im IE? Zu viele floats hintereinander?

Vielen Dank im voraus für Eure Mithilfe und Gruß

Josch

[Gunnar Bittersmann]

Hello out there!

ich habe ein Formular komplett in CSS ohne Tabellen erstellt.
http://www.cws-ev.de/mitglied_werden2.php

Verweise einbinden, danke.

Das sind durchaus tabellarische Daten. Warum nutzt du nicht das 'table'-Element?

Die Datumeingabe in deinem Formular mittels mehrerer Auswahllisten ist auch nicht nutzerfreundlich; besser wäre ein Datumeingabefeld.

See ya up the road,
Gunnar