Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Getting IE6 to recalculate absolute position after BlindDown

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #24893

    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

    #57824
    Chris Coyier
    Keymaster

    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?

    #57820

    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.

    #57822
    AshtonSanders
    Participant

    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.

    #57830

    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.

    #57834
    apostrophe
    Participant

    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!

    #57836

    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.

    #57837
    apostrophe
    Participant

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

    #57813

    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?

    #57851
    AshtonSanders
    Participant

    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.

    #57857

    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!

    #57913

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

    #62686
    nulle
    Member

    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.