1,105,633 Community Members

Z-Index not working on IE8

Member Avatar
javedsai
Junior Poster in Training
70 posts since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
javedsai
Junior Poster in Training
70 posts since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

Kindly, help me

Member Avatar
weekendrockstar
Junior Poster in Training
71 posts since Dec 2010
Reputation Points: 12 [?]
Q&As Helped to Solve: 16 [?]
Skill Endorsements: 0 [?]
 
0
 

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/

Member Avatar
dantinkakkar
Junior Poster
174 posts since Aug 2011
Reputation Points: 19 [?]
Q&As Helped to Solve: 22 [?]
Skill Endorsements: 4 [?]
 
0
 

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

Member Avatar
javedsai
Junior Poster in Training
70 posts since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
dantinkakkar
Junior Poster
174 posts since Aug 2011
Reputation Points: 19 [?]
Q&As Helped to Solve: 22 [?]
Skill Endorsements: 4 [?]
 
0
 

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.

Member Avatar
dantinkakkar
Junior Poster
174 posts since Aug 2011
Reputation Points: 19 [?]
Q&As Helped to Solve: 22 [?]
Skill Endorsements: 4 [?]
 
0
 
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...

Member Avatar
javedsai
Junior Poster in Training
70 posts since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
javedsai
Junior Poster in Training
70 posts since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
1
 

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;   
}
Question Answered as of 2 Years Ago by dantinkakkar and weekendrockstar
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: