Blinddown IE7 problem

[drewB]

I develop using FF3 and have been testing my design on IE7. I have
noticed a big problem with using blinddown / blindup. When it blinds
down, the div overlaps the next div and at the end is shifted to the
left (overlapping the div to the right of it). Once I move the mouse,
things go back to normal. When I blind up the div often shifts to the
right and items from the next div disappear (things don't go back to
normal after moving the mouse).

You can see a demo of it at http://67.214.211.38/demosite/member/demos/blinddown.html.
Click on any of the "Show Plan" links to see the blind down and then
click "Hide Plan" to blind up.

I have found a hand full of posts about a similar problem but no
resolutions that work for me:
https://prototype.lighthouseapp.com/projects/8887/tickets/7-effect-blindup-and-effect-blinddown-not-rendering-properly-on-ie7
http://dev.rubyonrails.org/ticket/8710

Does anyone have advice about how to fix this?

[Rick.Wellman]

It seems to me that there is a comment somewhere that you need to put a
"container" div within the div you are applying the effect to. i.e.

<div>
<div>
... all of your stuff ...
</div>
</div>

Sorry I do not have time to find the original documentation and/or
confirm but I am pretty sure I have come across "undesired behavior"
with blindup/blinddown and this was necessary. HTH

--

You received this message because you are subscribed to the Google
Groups "Prototype & script.aculo.us" group.
To post to this group, send email to
prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to
prototype-scripta...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.

[drewB]

That was first thought as well but it didn't end up making a
difference.

On Dec 30, 2:04 pm, Rick.Wellman <Rick.Well...@kiewit.com> wrote:
> It seems to me that there is a comment somewhere that you need to put a
> "container" div within the div you are applying the effect to.  i.e.
>
> <div>
> <div>
> ... all of your stuff ...
> </div>
> </div>
>
> Sorry I do not have time to find the original documentation and/or
> confirm but I am pretty sure I have come across "undesired behavior"
> with blindup/blinddown and this was necessary.  HTH
>
> -----Original Message-----
> From: prototype-s...@googlegroups.com
>
> [mailto:prototype-s...@googlegroups.com] On Behalf Of drewB
> Sent: Wednesday, December 30, 2009 3:56 PM
> To: Prototype & script.aculo.us
> Subject: [Proto-Scripty] Blinddown IE7 problem
>
> I develop using FF3 and have been testing my design on IE7.  I have
> noticed a big problem with using blinddown / blindup.  When it blinds
> down, the div overlaps the next div and at the end is shifted to the
> left (overlapping the div to the right of it).  Once I move the mouse,
> things go back to normal.  When I blind up the div often shifts to the
> right and items from the next div disappear (things don't go back to
> normal after moving the mouse).
>

> You can see a demo of it athttp://67.214.211.38/demosite/member/demos/blinddown.html.

> Click on any of the "Show Plan" links to see the blind down and then
> click "Hide Plan" to blind up.
>
> I have found a hand full of posts about a similar problem but no
> resolutions that work for me:https://prototype.lighthouseapp.com/projects/8887/tickets/7-effect-blind

> up-and-effect-blinddown-not-rendering-properly-on-ie7http://dev.rubyonrails.org/ticket/8710

[Rick.Wellman]

Ok, well that is all I got. I did notice that you had an unordered list outside of the div. Until you find the actual problem, I highly suggest putting everything inside the container. Good luck.

<div style="overflow: visible;">
<div>
<div class="action_plan heading_container">
<h3 class="title">
Plan
<img class="clickable" src="../../images/add_button.png" alt="Add Task" style="margin-left: 0.45em;" title="Add Task"/>
<a class="clickable" style="font-size: 70%;">Add Task</a>
</h3>
</div>
</div>

<ul class="steps_chbx">
...
</ul>

</div>

[drewB]

Thanks. I went ahead and added it to the demo just in case (but no
luck).

[drewB]

I was able to fix the problem. Turns out it was related to the
hasLayout bug in IE7 (http://www.satzansatz.de/cssd/
onhavinglayout.html). Basically, the structure of the problem looked
like as follows:

--------------
<div id="main_page_container">
<div style="display:none" id="div_that_blinds_down">
.....
</div>

<div id="next_section" style="position: relative">
...
</div>

</div>
------------

Since div#next_section was set to position: relative, IE7 requires a
"layout" for the div that contains it (main_page_container). I added
"zoom: 1" to div#main_page_container which forces the div to have a
layout and that fixed the problem.

[doofus]

thanks for posting the fix! was exact same issue I was having ...