Radiobuttons horizontal ausrichten mit Text
phi
- css
0 phi
Hallo ich habe eine Frage bezüglich Radiobuttons in Verbindung mit Text.
Konkret möchte ich zwei Buttons horizontal nebeneinander ausrichten. Neben jedem Button soll ein bestimmter Text stehen, wie z.B. "ja" oder "Nein".
Mein Problem besteht in der Ausrichtung mit Stylesheets, so dass in möglichst vielen Browsern eine große Übereinstimmung herrscht (Mozilla Firefox, Opera, IE 6+7, Safari...)
Mein letzten Code-Versuche sehen wie folgt aus:
<input type="radio" name="mfgender" class="radioinput1" value="male" />
<label for="male">männlich</label>
<input type="radio" name="mfsex" class="radioinput3" value="female" />
<label for="male">männlich</label>
Das führte in einigen Browsern aber zu totalen Verzerrungen bzw. Fehlpositionierungen. Daraufhin habe ich die labels durch <p>-Tags ersetzt, die ich speziell anpassen wollte. Aber auch damit sahen meine Ergebnisse nicht wirklich gut aus.
Wie kann ich das Problem optimal lösen - am liebsten in Verwendung mit <p> und nicht <label>?
Anbei noch meine CSS-Definitionen,damit es einfacher ist meine Probleme nachzuvollziehen.
label {
font-family:Arial, Tahoma, Sans-Serif;
color:#4A453B;
font-size: 11px;
margin-left:10px;
margin-top:5px;
margin-bottom:5px;
display:block;
float:left;
width:110px;
vertical-align:baseline;
letter-spacing:normal;
}
.col1 {
font-family:Arial, Tahoma, Sans-Serif;
color:#4A453B;
font-size: 12px;
margin-top: 00px;
margin-left: 00px;
margin-bottom: 00px;
margin-right: 00px;
display: block;
float: left;
width: 90px;
vertical-align: baseline;
letter-spacing: normal;
}
.col2 {
font-family: Arial, Tahoma, Sans-Serif;
color: #4A453B;
font-size: 12px;
margin-top: 00px;
margin-left: 00px;
margin-bottom: 00px;
margin-right: 00px;
display: block;
float: left;
width: 90px;
vertical-align: baseline;
letter-spacing: normal;
}
Die folgende Tabelle war nur ein Versuch:...
<label for="Geschlecht">Gender:*</label>
<div class="radiogrp" id="radiobox1" name="radiobox1">
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td align="left" valign="middle" width="10"><input type="radio" name="gender" class="radioinput1" value="male" /></td>
<td align="left" valign="middle"><p class="col1">male</p></td>
<td align="left" valign="middle" width="10"><input type="radio" name="gender" class="radioinput3" value="female" /></td>
<td align="left" valign="middle"><p class="col2">female</p></td>
</tr>
</table>