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:<sup>*</sup></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