Background Not Showing In IE7 and IE6

HTML & CSS
1

I have a #outer div that contains a background image which appears fine in IE8 but does not show in IE7 or IE6. It actually appears to have collapsed the div and moves everything up a bit.

Here is the link to view the page in question:
http://www.securehostserver.info/acec/contact/

2

Hi,
The extra space at the top of the #wrapper in IE6 is being caused by an assumed line-height on the h1.logo div. You have the height set to 1px but IE6 is stretching the container since it treats height as min-height.

You can fix it by setting font-size:0 or overflow:hidden;

[B]h1.logo[/B] {
    float: left;
    height: 1px;
    width: 924px;
    [COLOR=Red]/*display: block; h1 and float are blocks by default*/[/COLOR]
    margin: 0;
    [COLOR=Blue]font-size:0;[/COLOR][COLOR=DarkGreen]/*ie6*/[/COLOR]
    text-indent: -9999px;
}

And the #slider div does not appear correctly…
It does not load right for me in IE7 or 8 either when running your files locally.
It fixes all versions of IE when I set a height on it.

[B]#slider [/B]{
    float: left;
    width: 619px;
    [COLOR=Blue]height:269px;[/COLOR]
    position: relative;
    [COLOR=Red]/*margin: 0; unnecessary */[/COLOR]
    background: #202834 url(../i/loading.gif) no-repeat 50% 50%;
}
3

Rayzur,

Thank you so much! That fixes the background image. It now appears in all versions of IE. But, of course, I have spotted another mistake in IE6. It appears that the #wrapper div has extra padding or margin applied to it. Not the case in IE7 and IE8. Can you figure why this is happening?

4

Thank you so much Rayzur! These were right on point!
I really, really, appreciate it!

Todd

5

And the #slider div does not appear correctly…

6

Hi,
The problem looks like the 36px top margin on the #wrapper, move that top margin to the #outer div and get rid of the BG positions on the #outer BG image.

You need to clean up the #facebook anchor styles too. You don’t have to re-declare the widths and heights on the hover state of the a. Just declare the things that change, the only thing changing here would be the BG position. Set that BG image on the “a” and not the #facebook div. Then it changes position on hover.

[B]#outer[/B] {
    width: 969px;
    [COLOR=Blue]margin: 36px auto 0;[/COLOR]/[COLOR=DarkGreen]*set 36px top margin here*/[/COLOR]
    padding: [COLOR=Blue]13px[/COLOR] 0 0 0;
    position: relative;
    background: url(../i/gfx_bkg_top.png) [COLOR=Blue]no-repeat 0 0[/COLOR];[COLOR=DarkGreen]/*remove BG positions, let 13px top padding handle it*/[/COLOR]
}
[B]#facebook[/B] {
    width: 202px;
    height: 30px;
    position: absolute;
    [COLOR=Blue]top: -30px;[/COLOR][COLOR=DarkGreen]/*was 0*/[/COLOR]
    right: 21px;
    [COLOR=Red]/*background: url(../i/btn_facebook.png) no-repeat 0 0; move to #facebook a*/[/COLOR]
    text-indent: -9999px;
}
[B]#facebook a [/B]{ 
    width: 202px; 
    height: 30px; 
    display: block;
    [COLOR=Blue]background: url(../i/btn_facebook.png) no-repeat 0 0;[/COLOR]
}
[B]#facebook a:hover[/B] { 
    [COLOR=Blue]background: url(../i/btn_facebook.png) no-repeat 0 -30px;
}[/COLOR]
[B]#wrapper[/B] {
    [COLOR=Red]/*margin:36px 0 0; move to outer*/[/COLOR]
    background: url(../i/gfx_bkg_content.png) repeat-y 0 0;
    padding: 22px 0 22px 23px;
    overflow: hidden;
    height: 100%;
}