can someone tell me, a newbie, why in code (A) the 'width' works, but
in code (B) it doesn't :
(A) :
#subForm .label {
float: left;
width: 230px; /* <------------------ WORKS */
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;
}
<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?</
label>
<input type="text" name="email" id="email" /></p>
<p>
<span class="label">Rate your apartment farming skills </
span> /* <------------------ WORKS */
<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>
</p>
<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>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
(B) :
#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;
margin-top: 10px;
}
.first_label {
width: 230px; /*
<------------------ NOT FUNCTIONING */
font-weight: bold;
text-align: right;
margin-right: 10px;
}
</style>
</head>
<body id="feature" class="col2">
<div id="wrapper">
<div id="banner">
<div id="background">
<p class="logo"> CosmoFarmer 2.0</p>
<div id="nav">
<ul>
<li><a href="index.html" id="homeLink">Home</a></li>
<li><a href="/features/index.html"
id="featureLink">Features</a></li>
<li><a href="/experts/index.html" id="expertLink">Experts</
a></li>
<li><a href="/quiz/index.html" id="quizLink">Quiz</a></li>
<li><a href="/projects/index.html"
id="projectLink">Projects</a></li>
<li><a href="/horoscopes/index.html"
id="horoscopeLink">Horoscopes</a></li></ul>
<br class="clear" />
</div>
<!-- end nav -->
</div>
<!-- end background -->
</div>
<!-- end banner -->
<div id="main">
<h1 id="lead"><span class="section">Sign Up:</span> Reader
Subscription Form </h1>
<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?</
label>
<input type="text" name="email" id="email" /></p>
<fieldset><span class="first_label">Rate your </
span> /* <------------------ NOT
FUNCTIONING */
<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>
( I would imagine 'fieldset' in B to be a block level element just
like 'p' in A, and 'span' in both A and B is inline element - but I
don't see why in A it works but in B it doesn't )
______________________________________________________________________
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/
