Click to See Complete Forum and Search --> : stubborn fieldset & legend


KDLA
08-21-2007, 11:36 AM
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 this (http://apps.cpe.ky.gov/temp_docs/prototypes/kyvc-2/default-2.htm) appear consistent in both browsers, and as I want it to be?


<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

* {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;}


(Note: link displays a draft in process, not finished product)

Kravvitz
08-21-2007, 07:48 PM
Check out Legends of style (http://www.tyssendesign.com.au/articles/html/forms/legends-of-style/).

mactheweb
08-21-2007, 11:24 PM
Good luck. Fieldset does not display evenly across browsers and it's Firefox, not IE that's the odd man out this time. The easiest fix is a simple double box hack. Wrap the fieldset in a div and style that. Not totally semantic but it works.