SevenCubed
msg:4515447 | 8:52 pm on Nov 3, 2012 (gmt 0) |
Here's a quick fix as long as you don't need any more padding than 15px -- more than that and the word "form" gets left behind in FF. Breakdown the padding to exclude the top padding or else it will get added on in FF. Have a separate 15px margin for the bottom of the legend element.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
fieldset {padding: 0 15px 15px 15px;}
legend {margin: 0 0 15px 0;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Form</legend>
<p>
<label for="name">Name </label><input id="name" type="text">
</p>
<p>
<label for="email">Email </label><input id="email" type="text">
</p>
</fieldset>
</form>
</body>
</html>
|
Rain_Lover
msg:4515505 | 2:31 am on Nov 4, 2012 (gmt 0) |
| Here's a quick fix as long as you don't need any more padding than 15px |
|
And for more than 15px padding? Besides the FF problem, Opera doesn't understand legend margin bottom.
|
SevenCubed
msg:4515617 | 4:24 pm on Nov 4, 2012 (gmt 0) |
Then try simply padding your first <p>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
fieldset {padding:0 15px 15px 15px;}
.pad{padding:15px 0 0;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Form</legend>
<p class="pad">
<label for="name">Name </label><input id="name" type="text">
</p>
<p>
<label for="email">Email </label><input id="email" type="text">
</p>
</fieldset>
</form>
</body>
</html>
|
Rain_Lover
msg:4515626 | 5:30 pm on Nov 4, 2012 (gmt 0) |
Thanks for the answer! It works. :)
|
SevenCubed
msg:4515643 | 6:15 pm on Nov 4, 2012 (gmt 0) |
:)
|
|
