Page 1 of 1

Fieldsets Floating in IE7

Posted: Mon Feb 27, 2012 6:36 pm
by gr8dane
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: Select all

<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: Select all

#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/design ... tform.html. Any help would be greatly appreciated.

Re: Fieldsets Floating in IE7

Posted: Sun Mar 11, 2012 10:42 am
by Anthony Thomas
The link you provided doesn't seem to be working, but you could try adding 'display:block;' to the fieldsets, and also 'display:inline' to the floated columns which sometimes helps with IE. If you get the example link working I could try other options.

Re: Fieldsets Floating in IE7

Posted: Sun Mar 11, 2012 11:29 pm
by gr8dane
Anthony Thomas wrote:The link you provided doesn't seem to be working, but you could try adding 'display:block;' to the fieldsets
Sorry about the link; I had to remove the file a while after I found the solution to my problem. You're absolutely right. Setting the fieldsets to display:block did the trick, although I'm still curious about why that would be necessary.