css z-index question?

Question

interview project

Hi guys,

I had to prepare the above site for an interview today. It isn't displaying properly in interenet explorer. I want the badge in the header/navigation bar to overlap the main content (as it does in firefox, safari etc).

Why is it different in IE? how can i fix this?

thanks alot, Peter

Answer 1

Set the z-index on the div that has the id "headerR" to something like 999. I just tried it and it seemed to work.

Answer 2

It doesn't work in Firefox 3.0 either. Try using Firebug to inspect the header. You'll see that there is no z-index defined for the image. Once you define a z-index on the image it will correctly pop out front.

Answer 3

It displays the same in IE6, IE7 and Firefox for me. What version are you having problems with?

Did you figure it out?

Answer 4

BTW - your "iehack.css" file is missing.

Since you've put the badge in a reltively positioned DIV, you can safely position it using absolute.

#badge {
position:asolute;
z-index:10;
top:-71px;

}

Answer 5

add z-index: 1 to your headerR class in the CSS.

Answer 6

brilliant; thats it fixed. thanks alot for the tips guys. How good is this site!?

Answer 7

another issue in IE...

I'll ask here rather than start a new question: the navbar link list has a border applied to the left side of each element. In fireforx/safari this matches up with the navbar background but in IE the border/element spills out below the navbar ( the border sticks out the bottom).

link

Any ideas? thanks again.