homepage Welcome to WebmasterWorld Guest from 54.227.67.175
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
No fieldset padding top in IE8
Rain_Lover




msg:4515436
 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




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)

:)

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