Hello,

I'm making a website that uses absolute positioned divs (inside a relative div, so as not to disturb the rest of the layout) to control the order of info that pops up on the site. Basically, I have a floating navigation bar with a few tabs to click (on z-index:15), and when you click on any of those tabs, it shows a different div with those same tabs, except the one you clicked on is now selected. It also shows an RSS feed underneath the tabs (positioned around z-index:4-9) so that the tabs appear to sit on the top bar of the RSS feed. I have it set up so the navigation bars are all positioned above the rss feeds in z space. This works beautifully in Firefox and Safari.

The problem is when I view it in IE, I get strange problems. In IE, the positions of the layers are all correct (that took some effort) but the layer order is messed up. On the rss box on the right side of the site, the rss boxes appear over the navigation bars, and on the other place for rss content, the navigation bar appears to be completely invisible, yet it is still there (you can rollover the space where the tabs should be, click on them, and the rss feed still updates below). I am not sure why this is happening.

The site to look at is http://www.hargray.com/portal/portalindex2.html

Please view in FF and then IE to see the difference in behaviors happening. Any help is greatly appreciated. I hope I can enter some IE exception code or move a couple of things around for a "quick" fix to this issue.

Thanks all for your help.

Nevermind,

I solved the problem by fixing the parent layers to reflect the layer order, not just the ap divs in those layers. And I moved the relative positioned parent layers to different parts of the website and gave each child layer its own parent layer. Not sure if I'm describing it correctly, but whatever I did worked.

Now I'm dealing with position issues between browsers, where some will just be off the mark in different browsers. Before the z-index issue, this was the issue, except Safari was perfect, FF was a little off and IE was way off. Now FF and IE agree and are off by the same amount, but are different from Safari.

This is frustrating. Fixing one problem causes another to emerge.

It is well known that IE6 has some egregious issues with absolute positioning, and it gets worse the more you nest AP divs. You're best bet is to avoid all that positioning in the first place as it's rarely necessary.

http://www.positioniseverything.net/posbugs.html
http://www.positioniseverything.net/abs_relbugs.html

It was necessary to me because I don't know how else to place content over a piece of script that loads a widget from another site.

It's ok though, I fixed the issue by moving stuff around until it worked.

Thanks for the links though.