www.webdeveloper.com
Results 1 to 3 of 3

Thread: Fieldsets Floating in IE7

  1. #1
    Join Date
    Jan 2012
    Posts
    7

    Fieldsets Floating in IE7

    I've got a really weird situation happening in IE7, and I can't figure out what I could possibly be doing wrong. I've got two divs on a page - one floating left, the other right. Each div contains two fieldsets, none of which are floated. This is the general setup:

    HTML
    Code:
    <div id="colRight">
      <fieldset id="serviceArea">
        ...
      </fieldset>
      <fieldset id="defineArea">
        ...
      </fieldset>
    </div>
    <div id="colLeft">
      <fieldset id="profile">
        ...
      </fieldset>
      <fieldset id="profileBio">
        ...
      </fieldset>
    </div>
    CSS
    Code:
    #colLeft {
      float:left;
      margin-right:15px;
      }
    #colRight {
      float:right;
      }
    fieldset {
      padding:0 1em 1em 1em;
      margin-bottom:1em;
      }
    fieldset#defineArea,
    fieldset#serviceArea {
      float:none;
      width:230px;
      padding:0 10px 10px 10px;
      }
    Everything lines up perfectly in IE8, FF3.6 and Chrome, but in IE7 (actually, IE8 in Compatibility Mode) #serviceArea floats to the left of #defineArea (or vice-versa) in #colRight, and #colLeft gets pushed down below the now-too-wide #colRight. Since fieldsets are block-level elements, how can they be floating, especially when I explicitly set them to float:none?

    There's a stripped-down version of the page at http://www.weddingpastorsusa.org/des..._editform.html. Any help would be greatly appreciated.

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Specify a width on the columns (display: inline-block might do it, but I'm thinking IE7 needs a width).
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Jan 2012
    Posts
    7
    Yeah, that works. I was trying to avoid that because I couldn't find any info about how wide a fieldset actually is. After some experimentation, though, it looks like it's width + padding + 4px, at least in the browsers I'm able to test in. So I added a width to both column divs and removed the margin-right on #colLeft. Thanks for the help.

    It's still weird that the fieldsets would float, though. I wouldn't have thought that would be normal behavior for a block-level element.

Thread Information

Users Browsing this Thread

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

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