IE7 overflow:hidden not being applied to children

[faceleg]

Hi,
I am developing a plugin for Rapidweaver, a WYSISYG web development program for OS X.

I’m trying to get everything at least functional in IE.

I’ve run into two problems that have had me stumped for awhile:

(EDIT: first problem has been solved, I've shifted it and the solution to the bottom of this post)

http://pagesofinterest.net/code/of_interest/slider/ - please ignore the hideous colours. I *was* testing png support, but noticed some more severe problems in the process.

#2 - Line #69: class=portalpage0 style=overflow:hidden is being ignored. This should hide most of the class=tube’s text, which allows the effect of “cells” sliding into/out of view when an arrow is pressed.

The full CSS for the element is:

height:650px;
background:url(files/slider_bgpage0-trans.png) no-repeat;
overflow:hidden;
width:850px;

Does anyone have any ideas about what could be causing this horrible behaviour, and what I could do to fix it?

I'm really stuck with this issue - IE7 is not hiding child elements that are larger!

I’m very sorry for the inline CSS and the crazy class names, but it is necessary as this is a plugin, not a one-off site design. The plugin may be “imported” via Rapidweaver into a different plugin, which could result in it being spat into another div, meaning stylesheet linking would be illegal. The class names have “page0” appended to them for a similar reason. Sigh.

Thank you for taking the time to read my post.

SOLVED PART:

#1 - There should be two arrows, one on the left, one on the right of the coloured box. In IE 5 (I’m downloading IE7 now, but I’m quite sure the same thing happens) the arrows load, are visible for around one second, then disappear.

The classes for the two arrows are:

"leftpage0" & "rightpage0"

The CSS for the right arrow is:

position:absolute;
left:850px;
cursor:pointer;

And the left:

position:relative;
left:-35px;
cursor:pointer;

Obviously, they should remain visible.

Solution:

I've solved the image disappearing issue:

The <img/> tags needed both width="XX" and height="XX" in order to display correctly in IE7.

I still haven't found a solution for my overflow:hidden issue, however.

[Medyman]

First, do you have a test page where we can observe the problem. It's much easier to troubleshoot with an actual product.

Secondly, try and test in IE7 before we go further. IE 5 is no longer supported by Microsoft for a reason. IE7 is leaps ahead of IE 5 in terms of CSS support. If it ends up still not working in IE7, post back (with a test page or sample markup for a test page).

[faceleg]

Thanks for the reply!

http://pagesofinterest.net/code/of_interest/slider/

I've tried it in IE7, the problem persists

[Snookerman]

The link takes me to your 404 page.

[faceleg]

The link takes me to your 404 page.

That was stupid of me, sorry.

Here is the link:

http://pagesofinterest.net/code/of_interest/slider/

[faceleg]

Has anyone been able to find the problem/s?

Thanks for your patience

[faceleg]

Bump

Anyone?

[faceleg]

I've solved the image disappearing issue:

The <img/> tags needed both width="XX" and height="XX" in order to display correctly in IE7.

I still haven't found a solution for my overflow:hidden issue, however.

[Snookerman]

I'm not sure if I understand your problem correctly, but if I do, shouldn't you hide the parent div of nopage01. It doesn't have an id but maybe you could ad one? Or hide nopage01? Hope that helps.

[faceleg]

I understand what you mean, and I may have to resort to something like that.

The structure is supposed to work like this (and does, well, in Safari + FF):

wrapper* surrounds the entire structure, giving the arrows a reference point for their positioning.

Then the arrows are placed (fixed the crazy IE7 problem with those).

portal* then wraps the rest - its "overflow:hidden" is supposed to hide everything that ... overflows.

Then comes tube, which is a wrapper for the cells - each cell is a member of either "no*" or "yes*".

They are arranged horizontally, filling the length of the tube*.

The currently visible cell has the id "yespage0x", where x is the cell's position, starting from 0, left.

When one clicks on an arrow, the left/right cell's id is changed to "yespage0x", and the visible cell is changed to nopage0x". The cells are then animated to give the effect of one sliding out, and the other sliding in.

Firebug will allow you to see this in action.

If I make each "no*" class member hidden, then I don't think I'd get the effect I want.

Is there a way to make IE7 extend overflow:hidden to an element's children, as with the other browsers?

Thank you for your time!




* = page01