Welcome to WebmasterWorld Guest from 54.242.63.214

Forum Moderators: not2easy

Message Too Old, No Replies

No fieldset padding top in IE8

     

Rain_Lover

8:04 pm on Nov 3, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



Sample form:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
fieldset {padding: 15px;}
</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>


There's no padding top in IE8. Any cross-browser solution?

SevenCubed

8:52 pm on Nov 3, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

2:31 am on Nov 4, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



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

4:24 pm on Nov 4, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

5:30 pm on Nov 4, 2012 (gmt 0)

5+ Year Member Top Contributors Of The Month



Thanks for the answer! It works. :)

SevenCubed

6:15 pm on Nov 4, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



:)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month