IE 7 Z-Index and positioning issues

HTML & CSS
1

Hello everyone,

Have a bit of a nightmare with IE7 and z-index.

I have the layout of a header working how I want in IE8/9, chrome, firefox etc, but the layout breaks in IE7 and I can’t work out why.

If anyone can point me in the right direction I would be so grateful.

I have put the content up on a test server to illustrate: http://dev2.pelli.co.uk/ie7zindex/

In IE7 the log nav and phone div sits behind the feature fade, even though I have set the z-index. And for some reason the h2 is sitting to the right of the hpFeature div.

Any help would be fantastic.

Many thanks

2

Hi,

There are 2 issues here. Firstly you can’t set a stacking context or position accurately from an element that doesn’t have haslayout in ie7 and under.

The second problem is that with absolute elements the auto position is dependent on the text-align of the parent and other factors so you often need to tell IE7 explicitly where to go.

Fixes below:


#headerInt {
	position:relative;
	z-index:15;
	[B]zoom:1.0;[/B]
}
#hpFeatureFade h2 {
	position:absolute;
	top:270px;
[B]	left:0;[/B]
	padding:0 25px;
	z-index:20;
}
3

Perfect! Thanks so much Paul :slight_smile:

4