Z-Index not working on IE8

[javedsai]

Hi everyone,

I'd uploaded web page on http://www.qadrienterpirses.com/upload_folder/

If you will see on firefox or chrome then, it works fine. You can see background Image on search engine but, same doesn't work on IE8. Background Image doesn't comes on Search engine. However, it works fine on localhost in IE8 also.

Kindly, help me. Thanks in Advance..

Regards,
Javed Sai

[javedsai]

Kindly, help me

[weekendrockstar]

I am not sure whether this is relevant or not because the page looked the same to me in FF and IE but then I am using IE9. Up through at least IE8 Explorer has been buggy with z-index. I found this posting online but again, I am not sure if it does any good: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

[dantinkakkar]

Buggy? Versions of Internet Explorer any lesser than 9 are all the anti-CSS types. And no, z-index does not work on IE8.

[javedsai]

Then, what is the solution. Background image on search engine is not coming. Background image is the beauty of my web page. However, it works on localhost then, what is the issue for live server.

[dantinkakkar]

It is coming up on my IE9 and Firefox and even Chrome! Give me a little more time, and I'll add something to this reply.

[dantinkakkar]

background:url(../images/bodybg.jpg) repeat-x 0 0;
	background-color:#1a3c4b;
	/*height:3000px;*/

The background-color might be interfering with the image. Try removing it, and then view it on IE8. Just a suggestion because IE8 does god-knows-what to perfectly valid CSS...

[javedsai]

If I will remove my background color then, if the document size increase vertically, then, bacground becomes white. Kindly, give me some alternative solution. Note:- Z-index is working fine for IE8 on localhost, the issue is only for live server.

[javedsai]

Now, it's working. You can cross check on IE8. Just I commented 'position:relative' from both div i.e. #left_search & #main_search and it started working. I don't know why position:relative was conflicting. Any way thanks for your help. You can find css below:-

#left_search
{   float:left;
    width:64px;
    height:132px;
    background:url(../images/left_search_optimised.jpg) no-repeat 0 0;
    /*position:relative;*/
    z-index:2;
    margin-left:15px;
    /**MOZILLA**/   
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-topleft: 10px;

    /**WEBKIT**/
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-top-left-radius:10px;

    /**OPERA & OTHERS**/
    border-bottom-left-radius:10;
    border-top-left-radius:10px;

}

#main_search
{

    float:left;
    width:871px;
    height:102px;
    background:url(../images/main_search_updated.jpg) repeat-x 0 0;
    padding:10px 9px 20px 9px;
    color:#fff;
    font-size:12px;
    font-family:Arial, verdana,"Time New Roman",Helvetica,sans-serif;
    z-index:2;
    /*position:relative;*/

    /**MOZILLA**/
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright:10px;

    /**WEBKIT**/
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;

    /**OPERA & OTHERS**/
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;   
}