Grow your CSS skills. Land your dream job.

Getting IE6 to recalculate absolute position after BlindDown

  • # May 19, 2009 at 5:11 pm

    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:
    [attachment=1]Picture 1.png[/attachment]

    This is what I mean by left behind:
    [attachment=0]Picture 2.png[/attachment]

    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…

    Code:

    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?

    Thanks!
    Jeff

    # May 19, 2009 at 5:18 pm

    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?

    # May 19, 2009 at 5:23 pm

    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.

    # May 19, 2009 at 7:46 pm

    Can you position (absolute) the corner image in relation to the <body> instead of the div?

    I’d love to get a link and/or see the CSS you’re using.

    # May 20, 2009 at 7:57 am

    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:

    Code:
    This is the div that contains the corner image that isn’t moving.
    This is the stuff that expands.

    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):

    Code:
    #wrapper {
    background-color: #fff;
    padding: 20px 67px;
    width: 721px;
    margin: 0 auto 50px;
    position: relative;
    }

    #bottomLeft {
    background: url(../images/corner.jpg) no-repeat;
    width: 98px;
    height: 101px;
    text-indent: -9999px;
    position: absolute;
    bottom: 0;
    *bottom: -1px;
    left: -50px;
    }

    #contentCol {
    width: 541px;
    _width: 505px;
    margin: 9px 0px 12px;
    padding: 0;
    float: right;
    display: inline;
    border-left: 1px solid #fff;
    position: relative;
    }

    #innerContentCol {
    margin: 30px 50px 35px 50px;
    _margin: 30px 30px 35px 30px;
    line-height: 25px;
    font-size: 14px;
    min-height: 250px;
    _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.

# May 20, 2009 at 9:11 am

Is that code copied and pasted direct from your project?

The reason I ask is:

Code:
This is the div that contains the corner image that isn’t moving.

and

Code:
#bottomLeft {
background: url(../images/corner.jpg) no-repeat;
width: 98px;
height: 101px;
text-indent: -9999px;
position: absolute;
bottom: 0;
*bottom: -1px;
left: -50px;
}

LeftBottom is not the same thing as bottomLeft!

# May 20, 2009 at 9:49 am

no the markup is vastly shortened to get rid of all the inbetween stuff that doesn’t matter. you’re right, those are different – but they are supposed to be (and in the real code they are) the same.

# May 20, 2009 at 9:59 am

Have you tried Dean Edwards script? http://dean.edwards.name/weblog/2008/01/ie7-2/

# May 20, 2009 at 12:50 pm

No, but I’d like to stay away from adding more scripts.. I guess I’ll resort to that last…

Anyone else out there have any ideas?

# May 20, 2009 at 1:56 pm

Yea, I’ve got another one:

Move the bottomleft div to the below the rest of the divs. (Probably won’t handle it; but check)
I’d scratch position absolute, and test it out with a float:left and margin-top: -**px; to get it in place.

# May 20, 2009 at 3:36 pm

I gave that a go as well.. it opens an entirely new problem with both IE6 and 7, I think I’ll stick to the first on… thanks for all the help though!

# May 21, 2009 at 9:34 am

Just an update. That Dean Edwards script didn’t work.

# August 25, 2009 at 5:21 am

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.

Code:
// here you do whatever you do to expand / shrink stuff
// ..
x = document.getElementById(“absolutely_positioned”);
x.style.position=”relative”;
x.style.position=”absolute”;
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".