CSS #banner{ ba...">
Have Geek Brain

IE 6.0 z-index problem

I'm having a problem with the Z-index CSS property 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 girl's forehead displayed in a banner at the top of the page. In other browsers, the line doesn't fit. How can I solve this problem?

Please help me.

Thanks Devesh M

0


a source to share


5 answers


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

Just use one image and then position it relative to the top right window of your cover.



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

Then make sure it's under your div header

+2


a source


Z-index doesn't affect statically positioned elements, so you'll need to set the css property position

to something else, for example relative

, but I don't think you should be using z-index in this case.

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



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

This trick above only applies to MSIE6.

+1


a source


Try to put the line markup in front of the girl markup and put it as css. It usually worked for me in such cases.

0


a source


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

If you are having problems with an element, try assigning the Position property to it and also giving the parent a position and Z-index.

0


a source


z-index only works on positioned elements.

Also, 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!

0


a source






More articles:


All Articles