I am using a Zen subtheme and when expanding a fieldset (for example "publishing options" when editing a node) it will overlap whatever is below it. This only happens in Internet Explorer, not Firefox or Opera. It does not happen using the Garland theme. I've verified and tried the following:
zen.css, mytheme.css and ie.css are showing up in Head on the page source in that order.
Tried disabling mytheme and using only zen with same effect
css files are referenced in mytheme.info
I have the rebuild theme registry on every page turned on

Any help or information would be appreciated.

Thanks in advance.

Comments

radman16’s picture

radman16 commented

After much searching and consternation I think I have finally figured out the problem. This issue is related to the IE background-color bug. I had set the background color in the content-area div which causes IE to do strange things with the layout. The fix is very simple. Just put the following rule in ie.css in your sub-theme and make sure it is in your mytheme.info file:
/** Background-color bug fix for IE7 **/
.node
{
min-width: 0;
}

A good discussion on this and other IE bugs with solutions can be found here:
http://www.satzansatz.de/cssd/onhavinglayout.html

3cwebdev’s picture

3cwebdev commented

Thanks for the tip. The min-width fix did not solve the problem for me but it led me in the right direction.

The fix to my ie6/ie7 collapsible fieldset overlaping was:

.node
{
	background:none;
}

in ie.css.

StevenWill’s picture

StevenWill commented

The min-width or background:none for node did not work for me, I used position: static on the class .collapsible.

/* Prevent fieldsets from shifting when changing collapsed state. */
html.js fieldset.collapsible {
position: static;
top: -1em;
}
html.js fieldset.collapsed {
top: 0;
margin-bottom: 1em;
}

place the above css in your ie7 style sheet.

Hope this helps some one else :-)

azraindog’s picture

azraindog commented

Apologies if this is outside the scope of Zen discussion. The above fix by sky_rivers also addresses this issue in any themes derived from Framework. Thank you!

crutch’s picture

crutch commented

o my. This finally fixed my issue. I'm jumping around like that old man from Charlie and the Chocolate Factory when they finally get the golden ticket. Thanks!!!

ducdebreme’s picture

ducdebreme commented

It worked for me!
Your solution solved me on IE6 .
:-) Thanks
Stefan

sunshinee’s picture

sunshinee commented

I can verify that IE7 does not display collapsible fieldsets properly, but they do not appear to overlap. The problem I have found is that they work fine unless there is a table in the fieldset. BTW, none of the fixes above worked for me, even after clearing caches, etc. I'll post back if I do get something working. (using the newly released Zen 6.x - 1.0)

ookello’s picture

ookello commented

i'm having a similar problem with the aboutpeople theme. none of the above fixes have worked so far. will post again if some magic happens...

jameswoods’s picture

jameswoods commented

I applied sky_rivers' #3 css code to my ie7 stylesheet and it fixed the fieldset/overlapping described in the original post. I'm using a 100% custom theme, not based on Zen or anything.

Thanks sky_river, you rock!!

-James

lindsayo’s picture

lindsayo commented

I don't get the overlapping fieldsets problem, instead the opened fieldsets extend the content of the div past the bottom of the div.

aaronelborg’s picture

aaronelborg commented

thanks, sky_rivers.

problem solved.

keesje’s picture

keesje commented

My problem was:

html.js fieldset.collapsible .fieldset-wrapper {
  overflow: hidden;
}

Removing "overflow: hidden;" solved this problem in my case.

gmh04’s picture

gmh04 commented

The solution from sky_rivers worked for me on IE 7.

thanks!

geerlingguy’s picture

geerlingguy commented
Version: 6.x-1.0-beta3 » 6.x-2.x-dev

I can confirm that the fix in #3 worked for me as well.

protoplasm’s picture

protoplasm commented

Thanks sky_rivers. That fix in #3 worked for me as well! Only wish I had found this post sooner.

FreeFox’s picture

FreeFox commented

The #3 fix is the one for me !!!

Big hug sky_rivers, you probably save me a couple of hours searching :)

Anonymous’s picture

Anonymous (not verified) commented

I had the same problem as rjoy, IE won't work properly if there is a table in the collapsed fieldset.
I solved adding a <p> and </p> tags around the table.
Now it works! :)

SchwebDesign’s picture

SchwebDesign commented

fix from sky_rivers helped me too (using acquia_prosper modified theme) thanks everyone for your contributions!

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Component: IE Problems » layout.css
Status: Active » Closed (fixed)