Member Avatar for javedsai

Hi everyone,

I'd uploaded web page on

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

  • 3 Contributors
  • 8 Replies
  • 514 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by javedsai

Dani AI

Generated

This is a classic IE stacking-context / compatibility mismatch rather than a “mystery” CSS bug. was right to point at IE z-index oddities, and ’s background-color hint is useful — but the core is how IE8 (and IE8 running in IE7/quirks mode) builds stacking contexts for positioned elements. That explains why removing the positioning on your two search divs made the background reappear: it changed which stacking context the browser used and let the background show through.

Why that differs between localhost and the live site

  • Localhosts are often served in a different document mode (or on Windows where filenames aren’t case-sensitive). Live servers can trigger IE’s Compatibility View, a different X-UA-Compatible header, or a strict case-sensitive filesystem — any of these can change rendering. Always confirm the actual Document Mode in IE’s developer tools (F12).

Quick, low-risk fixes to try (in order)

  • Confirm the page is in standards mode (use a proper DOCTYPE like <!DOCTYPE html>) and check Document Mode / Browser Mode via F12.

  • Force standards rendering if needed with a meta header (or server header) for X-UA-Compatible.

  • Create a single, predictable stacking context on the parent container instead of relying on children. For example:

    .search-wrap { position: relative; z-index: 0; }

    Then keep or remove z-index on the children so all z-index values are compared inside the same context.

  • If IE6/7 behaviors appear (or you still see strange overlaps), try triggering hasLayout (e.g., temporarily with zoom:1) only as a diagnostic.

  • Double-check image filenames/paths for case mismatches on the live server and clear IE’s cache.

Notes and caution

  • Removing positioning can “fix” the symptom but may break intended layout in other browsers. Prefer giving the parent the stacking context or explicitly ordering z-indexes than stripping positioning from elements that need it. Testing in real IE8 (not just IE9 compatibility) is essential.

Recommended Answers

All 8 Replies

Member Avatar for javedsai

Kindly, help me

Member Avatar for 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:

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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.

Member Avatar for 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...

Member Avatar for 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.

Member Avatar for 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 &amp; 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 &amp; OTHERS**/
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;   
}
Edited by Nick Evan because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.