radio button and label not lining up

[darrenb]

Previously I made a thread asking how to get hovers to work and I got it going but my new problem is that the radio button and the label don't line up

html:
<label class="title">Are you attending school currently? <span class="req">*</span></label>

<label class="input-hover"><input class="radio" type="radio" name="schools" value="highschool" /> High School</label>
<label class="input-hover"><input type="radio" name="schools" value="cegep" /> CEGEP</label>
<label class="input-hover"><input type="radio" name="schools" value="college" /> College</label>
<label class="input-hover"><input type="radio" name="schools" value="university" /> University</label>
<label class="input-hover"><input type="radio" name="schools" value="noschool" /> Not in School</label>

"input-hover" class is for the hover...the "radio" class was just me messing with margins and line-height trying to get things to line up but no dice

 

[Pheno]

Hi Darren, this is a css problem. Do you have a link, or can you paste the CSS you are using?

 

[darrenb]

#form input[type="radio"] {
float:left;
margin:-3px 5px 0 0;
}

#form label.input-hover {
display:block;
float:left;
padding:3px 5px;
}
#form label.input-hover:hover {
display:inline;
background-color:#ffff13;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

 

[darrenb]

with this code it works now but I dont want to use a negative value for the margin...

making the "#form input[type="radio"]" float:left made them line up but then I made the font-size smaller (16px to 14px) and then it went out of line again so I needed the negative margin to fix it...I need a better way though

 

[darrenb]

forgot to include the styles for the label

#form label{
font-size:14px;
margin:0;
padding:0;
display:block;
}