/    Sign up×
Community /Pin to ProfileBookmark

stubborn fieldset & legend

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[/url] appear consistent in both browsers, and as I want it to be?

[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>
[/code]

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;}
[/code]

[I](Note: link displays a draft in process, not finished product)[/I]

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@KravvitzAug 22.2007 — Check out [url=http://www.tyssendesign.com.au/articles/html/forms/legends-of-style/]Legends of style[/url].
Copy linkTweet thisAlerts:
@macthewebAug 22.2007 — 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.
×

Success!

Help @KDLA spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...