The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> No fieldset padding top in IE8
RainLover
post Nov 3 2012, 03:02 PM
Post #1


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
Sample form:

CODE
<!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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 3 2012, 04:03 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
Try this CSS to see better what's going on:

CODE
* {margin: 0; padding: 0;}

form {
background: pink;
padding: 1em;
}

fieldset {
border: 2px dashed #000;
background: lime;
padding: 15px;
}

legend {
background: yellow;
xdisplay: none;
}

p {background: fuchsia;}

Seems to me there is a FIELDSET padding in IE8 (and 9), but the LEGEND is positioned in front of it (hide the LEGEND and you'll see it). At the same time the LEGEND somehow pushes the green FIELDSET background out of its dashed border. wacko.gif

As a workaround, try removing the FIELDSET top padding and increase the P top margin instead.

This post has been edited by Christian J: Nov 3 2012, 10:56 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Nov 3 2012, 09:20 PM
Post #3


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(Christian J @ Nov 3 2012, 04:03 PM) *

As a workaround, try removing the FIELDSET top padding and increase the P top margin instead.

Perfect! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 3 2012, 10:11 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
Could someone post a screen shot of how that looks in IE8/9? Before the workaround, that is. IE7 handles this in a crazy way. blink.gif

Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Nov 3 2012, 10:18 PM
Post #5


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(pandy @ Nov 3 2012, 10:11 PM) *

Could someone post a screen shot of how that looks in IE8/9? Before the workaround, that is. IE7 handles this in a crazy way. blink.gif

Attached Image


Does it help:
http://dl.dropbox.com/u/4017788/Labs/screenshot3.jpg
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 3 2012, 11:21 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Nov 4 2012, 04:11 AM) *

Could someone post a screen shot of how that looks in IE8/9? Before the workaround, that is. IE7 handles this in a crazy way. blink.gif

Attached Image

That's what I meant, it looks like the same in IE8. I thought IE9 looked the same, but I had forgotten one of these on my test page:

CODE
<meta http-equiv="X-UA-Compatible" content="IE=5">

blush.gif

(IE9 is also strange: if you don't use any BODY tags, you don't see any background or border on the FORM element, even if you specify it. There seem to be even worse complications, but let's not stare too deep into the abyss. blink.gif )
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 4 2012, 08:38 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
But the padding is much larger than what it's set to AND it shows up outside the border. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 4 2012, 10:57 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,661
Joined: 10-August 06
Member No.: 7
Yes. smile.gif

And if you put a DIV around the FORM, and use no BODY tags, the DIV will clone itself into two in IE8. IE7 doesn't do that, instead the FORM background and border disappear.

CODE
<style type="text/css">
* {margin: 0; padding: 0;}

div {
border: 5px solid black;
background: gray;
margin: 1em;
}

form {
border: 2px solid red;
background: pink;
padding: 1em;
}

fieldset {
border: 2px dashed green;
background: lime;
padding: 15px;
}

legend {background: yellow;}

p {background: fuchsia;}
</style>

<div>
<form>beginning of form
    <fieldset>
      <legend>legend</legend>
      <p>paragraph</p>
    </fieldset>
</form>
end of div
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 5 2012, 07:35 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
OH MY GOD! It's a frankenform! ohmy.gif

Our shock smilie is sadly lacking. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 08:46 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC