many thanks for those responses, I have added the fieldset with
clear:left and border:0 for the styling for radio buttons.
But was wondering how I could fine tune the layout, for the fieldset
(radio buttons), like that achieved by the descendent selector,
'subForm .label' which allows the form elements to :
a. move the label or the text to the left side of window,
b. right align them in a column 230px wide,
c. have a gap of 10px between the label/text and the form element in
my case the set of three 'radio buttons'
etc.
and also apply the same styling as the id selectors below where the
form elements are nudged up 2px by the margin-top: -2px
thanking in advance, Naz.
........
}
#subForm .label {
float: left;
width: 230px;
margin-right: 10px;
text-align: right;
font-weight: bold;
clear: left;
}
......
#name, #email, #comments {
background-color: #FBEF99;
font-family: "Lucida Console", Monaco, monospace;
font-size: .9em;
width: 300px;
margin-top: -2px;
}
.......
fieldset {
clear: left;
border:0;
}
.......
<form id="subForm" name="subForm" method="post" action="">
<p><label for="name" class="label">What is your name?</label>
<input type="text" name="name" id="name" /></p>
<p><label for="email" class="label">What is your email address?
Information collected at this site is limited to our network of 9,872
partner affiliates. Your information will only be shared among
them...</label>
<input type="text" name="email" id="email" /></p>
<fieldset><span class="label">Rate your apartment farming
skills</
span>
<label>
<input name="skill" type="radio" value="novice" />Novice</label>
<label>
<input name="skill" type="radio" value="intermediate" /
>Intermediate</label>
<label>
<input name="skill" type="radio" value="advanced" />Advanced</
label>
</fieldset>
<p>
<label for="refer" class="label">Where did you hear about us? </
label>
<select name="refer" id="refer">
<option value="null">Select One</option>
<option value="1">Friend</option>
<option value="2">Herban Jungle</option>
<option value="3">Compost Today</option>
<option value="4">Vanity Fair</option>
</select>
</p>
<p>
<label for="comments" class="label">Any additional comments? </
label>
<textarea name="comments" cols="35" rows="4" id="comments"></
textarea>
</p>
<p>
<input type="submit" name="Submit" id="subscribe"
value="Subscribe" />
</p>
</form>
........
>
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
