Radio Button Vertical alignment?

HTML & CSS
1

I could do with some help tidying up some table free forms.
Most of the form is in a nice sorted two collum layout, I have ajusted the lable text so it aligns up with the centre line of the text entry boxes, nice and neat. The problem I am having is with the Radio buttons, the text always shares the same baseline as the radio button, which looks untidy. I have tryed adding pading or margin to the input.radio class, with which I can move it side to side but adding it to the top or bottom doesn’t move it up or down. I also added the class ‘radio-lab’ in an attempt to move the text up, but that didn’t work ether. Any ideas?

CSS


input.radio {
	padding: 0 10px 0 0;
}
form p .formx  {
  float: left;
  margin: 0 0 0 10px;
  text-align: right;
}
form p .radio-lab {
  margin: 0 6px 10px 0;
}
form p .widetitle {
	text-align: right;
	float: left;
	width: 340px;
}

HTML


<form>
<p><span class="widetitle">Question for the button section?</span>
		  <span class="formx"><span class="radio-lab">No</span><input type="radio" name="Title" value="No" class="radio" />
		  <span class="radio-lab">Yes</span><input type="radio" name="Title" value="Yes" class="radio" /></span></p>
</form>
2

Hi,

usually you should use vertical-align properties to line up inline elements. However I have noticed that mozilla and ie differ in how they align some of these form elements anyway.

What you could do is use a bit of brute force and put the button where you want.

e.g.


input.radio {
 padding:0 10px 0 0;[b]position:relative;top:-2px;
[/b]}

I couldn’t see in the snippet you gave which way you were trying to go as the snippets is all aligned on the same line anyway.

Paul

3

Thanks, that works. I forget about the ‘top’ value for stuff.