I am trying to use a fieldset legend as a label for a group of radio buttons. The HTML and CSS I have works fine in IE8&9, firefox and chrome. In IE7 the label appears over the radio buttons. In all other browsers the label appears to the left of the buttons. I am happy to add a conditional stle for IE7 but I cant figure out what would make this work.
The problem is replicated in the following markup
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.radiolegend {
display: inline; float: left; width: 300px;
}
.fieldsetstyle {
border: 0 none; clear: left; float: left;
}
</style>
</head>
<body>
<form>
<fieldset class="fieldsetstyle">
<legend class="radiolegend">legend</legend>
<input type="radio" name="r1" style="display: inline;" id="r1">
<label for="r1">r1</label>
<input type="radio" name="r2" style="display: inline;" id="r2">
<label for="r2">r2</label>
</fieldset>
</form>
</body>
</html>
If you want ie7 conditional, then do this:
CSS
.radiolegend {
float: left; width: 150px;
}
.fieldsetstyle {
border: 0 none; clear: left; float: left; width:300px;
}
.cb{
float:right;
margin-top:-20px;
}
HTML
<form>
<fieldset class="fieldsetstyle">
<legend class="radiolegend">legend</legend>
<div class="cb"><input type="radio" name="r1" style="display: inline;"/>r1</div>
<div class="cb"> <input type="radio" name="r2" style="display: inline;"/>r2 </div>
</fieldset></form>
Now, you need to change styling for the rest of the browsers too. Just remove margin-top:-20px;
from .cb
. You were wrapping text in <input>
tag, it's not correct. <input>
has to be self closing