homepage Welcome to WebmasterWorld Guest from 54.227.20.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
No fieldset padding top in IE8
Rain_Lover



 
Msg#: 4515434 posted 8:04 pm on Nov 3, 2012 (gmt 0)

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

WebmasterWorld Senior Member



 
Msg#: 4515434 posted 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#: 4515434 posted 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

WebmasterWorld Senior Member



 
Msg#: 4515434 posted 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#: 4515434 posted 5:30 pm on Nov 4, 2012 (gmt 0)

Thanks for the answer! It works. :)

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4515434 posted 6:15 pm on Nov 4, 2012 (gmt 0)

:)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved