IE7/IE8 z-index not cooperating. Suggestions?

EDIT: Solution found. The pink block had overflow:visible !important, which in Internet Explorer invalidated z-index. After removing it, the logo came to the top.

See: http://bit.ly/i7ER3e

See logo "**" (beside top menu) with Firefox/Chrome, it correctly appears above left-content block (the block with pink background).

In IE7开发者_Python百科/IE8 the logo, it becomes hidden behind the pink block.

I've been messing with this for 2 hours now. Tried a lot of stuff. Can't get it to appear right in IE7/IE8.

Any suggestions?

(Note: I'm working in a really restrictive framework where I cannot simply float the logo before the menu. I have to use position:absolute to place it.)

---

The problem is not z-index in your case

your body has some line height which is not sufficent...

line-height:180%

change this to 200 or so it works, but still that is not good approach

but just found the issue....

---

Try using:

z-index: -1;

for the elements that should be below the logo.

---

try setting position:relative; as well as the z-index.

The default position style is position:static;, and IE has bugs around the z-index handling when combined with static positioning; setting position:relative can solve some of them, without affecting too much else.

See this page for more info. (the link is for CSS3Pie, which is an IE hack to help it support some CSS3 features like border-radius, but the info on the z-index bug is general and likely covers your issue as well)