www.webdeveloper.com
Results 1 to 6 of 6

Thread: No fieldset padding top in IE8

Hybrid View

  1. #1
    Join Date
    Nov 2009
    Posts
    80

    No fieldset padding top in IE8

    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?

  2. #2
    Join Date
    Oct 2012
    Posts
    55
    This is just a suggestion.
    Try it with a div and see if it still happens.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    #field{padding:20px 20px 20px 20px;background-color:#ff00ee;height:150px;width:600px;border:ridge 1px #cccccc;}
    </style>
    </head>
    
    <body>
    <div id ="field">
    <form>
     
      <legend></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>
     
    </form>
    </div>
    </body>
    </html>

  3. #3
    Join Date
    Nov 2009
    Posts
    80
    Quote Originally Posted by drunken_dev View Post
    This is just a suggestion.
    Try it with a div and see if it still happens.
    It doesn't help. Besides, I don't want to remove the fieldset and legend value.

  4. #4
    Join Date
    Oct 2012
    Posts
    55
    Quote Originally Posted by Rain Lover View Post
    It doesn't help. Besides, I don't want to remove the fieldset and legend value.
    For starters your CSS may need changing.

    It may or may not be the problem though I only ever write CSS shorthand with all the elements.
    Or I specify "padding-top"

    HTML Code:
    fieldset {padding: 15px;}
    HTML Code:
    fieldset {padding-top: 15px;}
    HTML Code:
    fieldset {padding: 15px 10px 15px 10px;}
    Might be worth a try.
    Good practice anyway.

  5. #5
    Join Date
    Oct 2012
    Posts
    9
    fieldset+legend padding-top is a mess in IE.
    All padding-top values appear ABOVE the legend, thus pushing the entire fieldset box down (i.e. just like margin-top)

    The easiest solution is to use <!--[if IE conditionals, and redefine the CSS for IE ONLY as:
    fieldset {padding-top: 0}
    legend {margin-bottom: 15px}

    ...yeah, I know, if IE conditionals are very ugly hacks, but the only way you'll get that space in the top of the box is adding it as margin-bottom to legend.

    OR, you can drop the padding for fieldset altogether, then wrap the contents in a div block with its own padding/margin. Haven't tried it that way, but it should work, and it should be cleaner.

  6. #6
    Join Date
    Nov 2009
    Posts
    80

    Thumbs up

    Quote Originally Posted by bundat View Post
    OR, you can drop the padding for fieldset altogether, then wrap the contents in a div block with its own padding/margin. Haven't tried it that way, but it should work, and it should be cleaner.
    Best solution! Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles