IE 6.0 z-index issue

Question

Hi,

I am facing an issue with Z-index property of CSS in IE 6.0

HTML

<div id="banner"></div>

CSS

#banner{
  background:url(pix/banner.PNG) top no-repeat;
  z-index = -1;
}

URL: http://www.whizlabs.com/examprep/

In IE 6.0, it shows a line on the forehead of girl, showing in the banner on the top of the page. In other browsers, line is not coming. How can i resolve this issue ?

Please help me.

Thanks Devesh M

Answer 1

Try puting the markup of the line before the markup of the girl, and place both using css. It usually worked for me in similar cases.

Answer 2

There is really no reason to break the girl up into separate images.

Just use a single image and then position it relative to the top right of your wrapper

#banner{
    background:url(pix/girl.PNG) top no-repeat; /* where girl is the whole girl */
    position:relative;
    top:0;
    right:150px;
}

Then make sure that the is just under your header div

Answer 3

Z-index has no effect on statically positioned elements, therefore you would need to set the css position property to something else, like relative, but I don't think that you should use z-index in this case.

For a quick fix though you can try something like this:

   * html #banner { margin-top: -1px; }

This above trick only applies to MSIE6.

Answer 4

Try to add this code into your CSS file: http://cse-mjmcl.cse.bris.ac.uk/blog/2006/08/17/1155842931525.html

Answer 5

Also with Z-Index make sure to use numbers starting at 1.

If you are having trouble with an element, try giving it a Position property as well as give its parent a Position and a Z-Index.

Answer 6

z-index only works on positioned elements.

Plus, you can only swap the depths of elements that are all contained by the same element - nested elements (one inside the other) cannot jump out of their nesting!