Re: [css-d] IE7 and IE6 Problem with Background-Image property using .png

[Alan Gresley]

Timariane Thornewig wrote:
A user just sent over this website for IE bugs that I am grateful to have 
shared with me. I fear that I am suffering from the Escaping Background bug in 
IE7 and and overall background problem in IE6 because I'm using a .png in my 
background.


The user who sent you the link to a website (CSS-Class) is myself. The 
intimal IE7- bug that I saw on your page is one that I had not seen 
before so I added it as another IE7- bug.

To fully appreciate the many IE7- bugs that I have documented or the 
Pandora of other IE7- bugs on other website, one must be able to view 
such bugs test in the real IE7 or something that emulates IE7. This 
could be IE8 in IE7 emulation mode (misses some of the true IE7 bugs) 
or maybe IETester. Since your using Mac, you could also use virtual PC.

If your using something else to view a page to see what something is 
like in IE7-, it is much like shooting in the dark. A static 
screenshot can not show you what the IE peekaboo bug is nor show you 
how other IE7 bugs cause elements to move around.


Here's the link to the bug doc:
http://css-class.com/test/bugs/ie/escaping-background-image-bug1.htm


Poor naming. This bug displaces the background image in the above 
rendering band and scrolling causes the background image to get cut 
off at the first rendering band. Since you don't have something to 
emulate IE7, such things will not be understood.


Here's how you can see the problem I'm experiencing in IE7:
enter http://ipinfo.info/netrenderer/index.php 
(this site is particularly helpful for me because I'm on a mac)

at that site in IE8, Render: http://www.ashelighting.com/architectural3.html

then Render the same architectural3.html link  in IE7

It appears that I'm having the escape-background-image bug happening.

Here's my body style:
body {
    margin: 0;
    background-image: url(images/background2.png);
    background-color: #220000;
    background-repeat: no-repeat;
    background-position: center;
    }

Background2.png is the two horizontal lines at the bottom of the page. 

My questions are:
1) Is there any way around this Background-Image Bug that I can use to keep my 
image in place for IE7?


Yes. Not sure what is triggering it but all the absolute positioning 
may be a contributing trigger as well as all the hasLayout triggers 
[1]. There is a hacked fix below.


2) If so, can you help me figure out why my footer (1 2 3 4 5 6) is also moving?


IE7 doesn't like your default margin-top on the p with div#footer. 
There is a hacked fix below.


3) Is there any work around for using a .png in IE6 or earlier?
or... if all of those are thrown out the window


Yes, a GIF for IE6. Won't look the best but then it is IE6.


4) Can I implement code that will prompt users to download IE8 upon going to 
this site?


Not needed if you address what is bugging IE7 out.

Firstly add a vertical position (y-axis) for the background-image. For 
some reason, when the bottom of the viewport is dragged down, this 
image after at some point follows along. 9px seems to work in IE7 and 
FF 3.6.8.


body {
        margin: 0;
        background-image: url(images/background2.png);
        background-color: #220000;
        background-repeat: no-repeat;
        background-position: center 9px; /* add vertical position */
}


Secondly add this targeting IE7 hack to your style-sheet.


*:first-child+html #footer p { /* IE7 hack */
        margin-top:5px;margin-bottom:15px;
}


IE6 doesn't seem to have the bug.


I should add that I think that the flash menu can be done simply with 
CSS. Also you are using maybe a little to much absolute positioning. 
Also you are using z-index on non positioned elements.


#main {
        margin-left: 250px;
        border-top: none;
        border-bottom: none;
        border-left: none;
        border-right: none;
        padding-top: 95px;
        padding-right: 15px;
        padding-left: 0px;
        z-index: 500; /* This does nothing */
        }


Also, the below hack (star selector hack) is invalid.


*html #banner {
        height: 1px;
        }



Change to as below. Note the white-space between the star and the 
selector.


* html #banner {
        height: 1px;
        }


*html selector will also target IE7.


1. <http://www.satzansatz.de/cssd/onhavinglayout.html>


--
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/