dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: No fieldset padding top in IE8

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    82

    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
    Location
    Isfahan, Iran
    Posts
    82
    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
    Location
    Isfahan, Iran
    Posts
    82

    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