Skall prova med display:block.
Precis, problemet är att checkboxen är för högt upp i Mozilla, för långt ner i IE och förmodligen olika i de andra webläsarna som finns.
Måhända att jag skrivit överflödig kod men är fortfarande i inlärningsfasen, kanske effektiviserar koden när jag är mer erfaren
Har bara 6månaders erfarenhet av sitekodning överhuvud taget.
Har ingen hostad server för tillfället så lägger in koden här.
HTML
Kod:
<div id="rfplaceholder">
<form id="rf" name="rf">
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="rfname">Firstname:</label>
<input id="rfname" name="rffname" type="text" />
</div>
<div>
<label for="rfemail">Email:</label>
<input id="rfemail" name="rfemail" type="text" />
</div>
<div>
<label for="rfcemail">Confirm Email:</label>
<input id="rfcemail" name="rfcemail" type="text" />
</div>
</fieldset>
<fieldset>
<legend>User Details</legend>
<div>
<label for="rfuname">Desired Username:</label>
<input id="rfuname" name="rfuname" type="text" />
</div>
<div id="vrfuname">
<a href="#">Verify username</a>
</div>
<div>
<label for="rfpass">Password:</label>
<input id="rfpass" name="rfpass" type="password" />
</div>
<div>
<label for="rfcpass">Confirm Password:</label>
<input id="rfcpass" name="rfcpass" type="password" />
</div>
</fieldset>
<div id="rflicense">
<label for="rfaccept">I accept the <a href="#" target="_blank">user license agreement</a>.</label>
<input id="rfaccept" name="rfaccept" type="checkbox" />
</div>
<div id="rfsubmit">
<input value="Submit" type="submit" />
</div>
</form>
</div>
CSS
Kod:
input,textarea,label {
font-size:1.1em;
}
input {
padding:0 0 0 1px;
}
input:focus {
background:#eee;
}
#checkuname {
float:left;
display:block;
width:100%;
}
#vrfuname {
float:left;
width:300px;
margin:10px 0;
}
#vrfuname a {
display:block;
width:100px;
background:#ddd;
height:20px;
border:1px solid #000;
line-height:20px;
text-align:center;
margin:0 0 0 100px;
}
#vrfuname a:hover {
background:#ccc;
color:#000;
}
#rferror {
border:red;
}
#rfplaceholder,#lfplaceholder,#ffplaceholder,#sfplaceholder {
width:300px;
margin:50px auto;
}
#rf fieldset,#lf fieldset,#ff fieldset, #sf fieldset {
border:none;
border-top:1px solid #000;
margin:5px 0;
}
#rf legend,#lf legend,#ff legend, #sf legend {
color:#000;
border:1px solid #000;
background:url(/images/ORANGE_GRAY_Gradient/Background/gray_item_header_1x20.png) repeat-x;
padding:3px;
}
#rf label,#lf label,#ff label, #sf label {
float:left;
width:150px;
text-align:right;
margin:5px 0 0;
}
#rf fieldset input,#lf fieldset input,#ff fieldset input, #sf fieldset input {
float:left;
width:100px;
border:1px solid #000;
margin:5px 0 0 5px;
}
#rfsubmit,#lfsubmit,#ffsubmit, #sfsubmit {
width:300px;
text-align:right;
margin:10px 0 0;
}
#rfsubmit input,#lfsubmit input,#ffsubmit input, #sfsubmit input {
background:#ddd;
border:1px solid #000;
width:50px;
color:#000;
}
#rfsubmit input:hover,#lfsubmit input:hover,#ffsubmit input:hover, #sfsubmit input:hover {
background:#ccc;
}
#lfsubmit p,#ffsubmit p,#sfsubmit p {
font-size:10px;
margin:2px 0;
}
#lfsubmit a,#ffsubmit a, #sfsubmit a {
text-decoration:underline;
}
#rflicense {
text-align: center;
height: 30px;
width: 100%;
}
#rflicense a {
color: blue;
text-decoration:underline;
}
#rflicense label {
font-size: 0.8em;
width: 200px;
}
#rflicense input {
position:relative;
left: -40px;
top: 4px;
}