I’m trying to get my fieldset to not indent the legend, and have the legend to appear as a stripe across the top of the form. I come close with IE6, the stripe appearing, but the indention still there. With Fx, the indention is gone, but the stripe will not appear; it’s treating the legend as inline, even with a display: block; setting. What do I need to change to make [url=”http://apps.cpe.ky.gov/temp_docs/prototypes/kyvc-2/default-2.htm”]this
[code]
<div id=”login”>
<ul>
<li class=”log”>
<form action=”loginValidate.asp” id=”form1″ name=”form1″ method=”post”>
<fieldset>
<legend>Log In</legend>
<div class=”row”>
<label for=”UserName”>User Name: </label><br />
<input type=”text” name=”UserName” id=”UserName” class=”textField” tabindex=”70″ />
</div>
<div class=”row”>
<label for=”pass”>Password: </label><br />
<input class=”textField” type=”password” name=”pass” tabindex=”71″ />
</div>
<div class=”row”>
<input type=”submit” name=”Submit” value=”Login” tabindex=”72″ class=”but” />
</div>
</fieldset>
</form></li>
<li><a tabindex=”75″ href=”/application/NewOrReturning.asp” class=”one”>Request Enrollment</a></li>
<li><a tabindex=”74″ href=”/need_account.asp” class=”two”>Set Up an Account</a></li>
<li><a tabindex=”73″ href=”/forgotPassword.asp” class=”three”>Retrieve Password</a></li>
</ul>
</div>
css
[code]
* {margin: 0; padding: 0;}
#login li.log {
display: block;
width: 215px;
font-size: 1.1em;
font-weight: bold;
line-height: 1;
text-decoration: none;
color: #fff;}
#login li.log form {
background: #8ea7af;
display: block;}
#login li.log form fieldset {
border-width: 0;}
#login li.log form legend {
color: #fff;
background: #b1c3c8;
display: block;}
#login li.log form input {
width: 100px;}
#login li.log form .row {
display: block;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;}
#login li.log form input.but {
width: auto;}
[I](Note: link displays a draft in process, not finished product)