I’ve got an odd problem. Well, I guess since it includes the letter I, E and the number 6 it’s not that odd, but whatever…
I have a form page that only shows a few options at first. Some of the options (select dropdowns) cause hidden divs to toggle between hidden and shown. (ie: when you change one to yes the div blinds down to reveal more options)
It works beautifully in all browsers incl. IE7 and IE8, but in IE6 there are a few absolutely positioned elements on the page that are left behind when the containing divs resize to show the previously hidden content. Some images to illustrate what I mean.
This is how it is supposed to look:
This is what I mean by left behind:
The image that makes that corner is an absolutely positioned div within a relatively positioned container. The content that expands is contained within another div that sits inside a another container within the outermost container. Just for an idea, this is roughly the idea…
Anyone else had to deal with this? Any ideas on how to get IE6 to recalculate the absolute position of those elements after the effect (BlindDown) is finished?
Making sure the element has "hasLayout" in IE 6 is pretty key with absolute positioning. Perhaps you can trigger it if it doesn’t have it already (zoom: 1; usually works). Or that might not be the problem at all. Is it something you could solve with an IE 6-only stylesheet?
Dang Chris, you are on it!
Already thought of hasLayout and that’s not it. I’ve tried to change a few different things about the layout / stylesheet for IE6 to no avail. It’s like the browser is just forgetting to move all items that are positioned absolutely. There is another little image on the page that is on the same level as the expanding content’s container which is also not moving anywhere…just getting run over by the expanding content.
I couldn’t absolute position to the body because I need it to stay relative to the content, not the whole body. And I’m reluctant to start moving things around in the markup because it works perfectly everywhere but IE6. I posted here in the JS forum because I thought it might be a known issue with IE6, JS transitions and absolute positioning. I’m using prototype and scriptaculous, by the way.
Sorry, can’t provide a link. It’s for a client project.
But here is the code. The markup is really simple, and I’m only posting the stuff that matters:
and here is the relevant CSS (by the way – for those that don’t know the underscore before the property targets IE6 the asterisk targets IE7):
background: url(../images/corner.jpg) no-repeat;
margin: 9px 0px 12px;
border-left: 1px solid #fff;
margin: 30px 50px 35px 50px;
_margin: 30px 30px 35px 30px;
_height: expression(this.scrollHeight < 251? "250px" : "auto"); /* hack for ie6 to get min-height*/
Still messing around with this… and still annoyed about it. I think I die a little inside each time I have to waste time getting something working for IE6.
Is that code copied and pasted direct from your project?
The reason I ask is:
LeftBottom is not the same thing as bottomLeft!
Sorry for ressing this post from the dead, but I had similar issue, not with BlindDown, but with simple self-made script that hides / shows divs, and in case someone else stumbles on this, hope it helps.
I solved this problem in IE6 by simply changing the absolutely positioned element’s positioning to relative and immediately changing it back to absolute. The change is not visible, but IE6 gets it.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".