SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Without changing the HTML markup and introducing a new element, you could do it like this:

    Code css:
    fieldset {
    	padding: 15px;
     	position: relative;
     	display: table;
    }
     
     
    legend {
    	display: block;
    	position: absolute;
    	top: -10px;
    	left: 20px;
    	background: #fff;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    Without changing the HTML markup and introducing a new element, you could do it like this:

    Code css:
    fieldset {
    	padding: 15px;
     	position: relative;
     	display: table;
    }
     
     
    legend {
    	display: block;
    	position: absolute;
    	top: -10px;
    	left: 20px;
    	background: #fff;
    }
    Thanks! That's not a bad workaround. And how do you achieve it with changing the HTML markup and introducing a new element?

  4. #4
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hi Rain Lover,

    you could add a div inside your form and then apply different styling to that instead, but I actually think that in this case, keeping the markup lean is the better alternative.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Tags for this Thread

Bookmarks

Posting Permissions

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