No replies
steve_the_canuck
Offline
Regular
Last seen: 12 years 2 days ago
Timezone: GMT-4
Joined: 2009-01-23
Posts: 27
Points: 1

Hi,

I'm having a problem in FF with labels for radio buttons. The labels are dropping down another line. I've used floats throughout my css to help line things up, but I can't figure out how why these techniques are not working here.

I have a simple example below. Any help is appreciated.

Thanks,
Steve

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
ul
{
list-style-type: none;
}
.form_input ul.radio_list {
	float: left;
	width: 70%;
}
 
.form_row .form_input label {
	float: left;
	width: 60%;
	margin: 0;;
	text-align: left;
 
}
 
.form_input ul.radio_list li {
	float: left;
	width: 100%;
}
 
.form_input ul.radio_list li input {
	float: left;
	width: 1em;
	margin: 0;
	padding: 0;
}
 
.form_input ul.radio_list li label {
	clear: none;
	float: left;
	width: 10em;
	margin: 0 0 0 2em;
	padding: 0 0 0 0;
	margin: 0 0 0 4em;
	margin-right: 0;
	text-align: left;
}
 
</style>
</head>
<body>
<form method="post" id="register_form" action="/submit-registration.html"> 
 
 
<fieldset>
<div class="form_row">
<div class="form_input">
<label for="user_consumer_is_user_agreement">Please select whether you accept the terms above<sup class="required_item">*</sup></label>
<ul class="radio_list">
  <li>
    <input name="user[consumer][is_user_agreement]" type="radio" value="0" id="user_consumer_is_user_agreement_0" checked="checked" />&nbsp;
	<label for="user_consumer_is_user_agreement_0">I do not accept</label>
  </li>
  <li>
    <input name="user[consumer][is_user_agreement]" type="radio" value="1" id="user_consumer_is_user_agreement_1" />&nbsp;
	<label for="user_consumer_is_user_agreement_1">I accept</label>
  </li>
</ul>
</div>
</div> 
</fieldset>
</form>
</body>
</html>
[code]