Ämne: CSS & Forms
Visa ett inlägg
Oläst 2007-02-19, 11:41 #3
Aerpe Aerpe är inte uppkopplad
Medlem
 
Reg.datum: Oct 2006
Inlägg: 221
Aerpe Aerpe är inte uppkopplad
Medlem
 
Reg.datum: Oct 2006
Inlägg: 221
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;
}
Aerpe är inte uppkopplad   Svara med citatSvara med citat