Legend and fieldset

hello , please i cant figure out why in fire fox my legend boundry is running out of the fieldset , and its not behaving like that in the safari
this is the mark up


  <div>
<form action='relogin.php' method='post' class='rl'>
<fieldset>
<legend>Login</legend>
	<div>
	<label for='username' class='fixedwidth'>Username</label>
	<input type='text' name='username' id='username'/>
	</div>
	
	<div>
	<label for='password' class='fixedwidth'>Password</label>
	<input type='password' name='password' id='password'/>
	</div>
<div class='buttonarea'>
	<input type='submit' value='Log in'/>
	</div>
<p>
<a href='reregister.php'>Register </a>
</p>
</fieldset>
</form>
</div>

and the css


form.rl,form.slistbar{
	padding:0;
	margin:0;
	margin-top:-15px;
	line-height:150%;

}

form.rl ,form.slistbar label {
	font-weight:bold;
	font-size: small;
}

form.rl,form.slistbar label.fixedwidth{
	display:block;
	width: 240px;

}

form.rl,form.slistbar .buttonarea input{
colour: white;
font-weight; bold;
padding: 5px;
border: 1px solid white;
}

form.rl,form.slistbar fieldset{
border:2px solid navy;
padding:10px;
width: 150px;
margin-top:30px;
}

form.rl,form.slistbar legend{
font-weight:bold;
font-size: small;
width: 150px;
color: navy;
}

thanks

Browsers have different defaults so try resetting them and then set your own specific values:



fieldset,
legend   {border:0 margin:0; padding:0; line-height:1.42em}


That code doesn’t make much sense :slight_smile:

There is no form element called .slistbar in the code above which leaves us with all these conflicting rules.


form.rl {
	padding:0;
	margin:0;
	margin-top:-15px;
	line-height:150%;
}
form.rl {
	font-weight:bold;
	font-size: small;
}
form.rl {
	display:block;
	width: 240px;
}
form.rl{
	colour: white;
	font-weight:bold;
	padding: 5px;
	border: 1px solid white;
}
form.rl {
	border:2px solid navy;
	padding:10px;
	width: 150px;
	margin-top:30px;
}
form.rl {
	font-weight:bold;
	font-size: small;
	width: 150px;
	color: navy;
}


You’ve defined form.rl over and over again for some reason. The input and label width will be wider than the last applied width of those rules (150px) and therefore the input and fieldset will push outside the border.

thanks paul , i was able to use the advice to sort the problem