Log in

View Full Version : IE7 Layout Problems: SquaredEye.com



inlikealion
04-07-2009, 08:13 PM
I'm the lead developer for SquaredEye.com, and I've got a few questions regarding IE7 positioning and stacking order:

First, IE7 stacking order:

On several pages we have a js slide scroller, and in IE7 the for/backward buttons display behind the main slide, instead of above it. The same is true for the preview images that popup when hovering the same buttons. A while ago when we discovered the issue I read through this blog post (http://aplus.rs/lab/z-pos/) but apparently did not comprehend it well enough to solve our particular problem. The affected pages can be seen here:

http://squaredeye.com/
http://squaredeye.com/work
http://squaredeye.com/work/featured

Second, quirky rendering/layout:

On pages with greater than 2 list items in the sub navigation, the third anchor isn't hoverable/clickable, though its background sprite does show. Example is here:

http://squaredeye.com/work/featured/

Any ideas or observations? I really appreciate any input. Thanks!

(note: I posted this here and over at the ExpressionEngine forums, wanting to utilize the diversity of the 2 communities)

bluewalrus
04-08-2009, 04:36 AM
Links don't work. Did you use z-indexes?

inlikealion
04-08-2009, 02:45 PM
Could you elaborate on the links not working? I just checked and they work for me, but I don't know if the forum would disable them for other users or something? Perhaps you could copy and paste them if you needed to, but I think they should be working.

Z-indexes - yes, I've used them, but it seems that maybe there is a quirk about how IE7 renders z-indexes and the order in which an element is placed in the markup.

For instance, the 2nd problem is because my #container div is rendering above #nav-sub ul, effectively blocking the lower 2 sub navigation links. However, the #nav-sub ul has z-index: 99998; and the #container div has z-index: 0;

This renders as expected in Safari and FireFox. If there is a fundamental concept I'm missing about this in regards to IE7, then I think it would be easy to fix both problems 1 and 2.