PDA

View Full Version : Disappearing background image bug in IE



mr e
Apr 27th, 2007, 08:38 AM
Alright, so I've run across the disappearing background image bug in IE, threw me at first until google at least told me what it was, problem is, every article I found on it was the same.

They all offered the same two fixes, add "position: relative;", which I did and now it flashes the background on load before it disappears, and add "height: 1%;" for IE, which doesn't change anything.

Here's my site http://www.ijphotography.com/photographarizona.com/

Is there anything else I can do to get this to work in IE? Or is there another way I need to go about this?

I'm gonna continue googling to see if I can find anything, but any help is very much welcome :)

Here's my CSS and HTML


#right_column
{
background: #f9f3fe;

color: #000;

float: right;

font-size: .9em;

line-height: 1.5em;

margin: 0 0 4px 4px;

width: 200px;
}

#right_column div
{
background: transparent url('../images/menu_right_top.gif') repeat-x top;

position: relative;
}

#right_column div div
{
background: transparent url('../images/menu_right_right.gif') repeat-y right;
}

#right_column div div div
{
background: transparent url('../images/menu_right_bottom.gif') repeat-x bottom;
}

#right_column div div div div
{
background: transparent url('../images/menu_right_left.gif') repeat-y left;
}

#right_column div div div div div
{
background: transparent url('../images/menu_right_top_right.gif') no-repeat top right;
}

#right_column div div div div div div
{
background: transparent url('../images/menu_right_bottom_right.gif') no-repeat bottom right;
}

#right_column div div div div div div div
{
background: transparent url('../images/menu_right_bottom_left.gif') no-repeat bottom left;
}

#right_column div div div div div div div div
{
background: transparent url('../images/menu_right_top_left.gif') no-repeat top left;
}

#right_column div div div div div div div div div
{
background: transparent;
}

#right_column div div div div div div div div div#inner
{
padding: 4px;
}




<div id="right_column">
<div><div><div><div><div><div><div><div>
<div><div id="inner">

<div class="right">{$month} {$date}, {$year}</div>
<div class="clear">&nbsp;</div>

<div class="title">Quick Fact #27</div>
<div class="indent">
The Grand Canyon is home to more than 450 species of animals, including 287 species of birds, 88 species of mammals, 26 species of fish, and 58 species of reptiles and amphibians
</div>

<br />

<div class="right">Edit</div>
<div class="title">My Cart</div>
<div>
<table id="cart">
<tr>
<td>8x10</td>
<td>South Rim, Grand Canyon</td>
<td>6.95</td>
</tr>
<tr>
<td>4x6</td>
<td>Flowing Water, Walnut Canyon</td>
<td>4.95</td>
</tr>
<tr id="total">
<td colspan="2">Total</td>
<td>$11.90</td>
</tr>
</table>
</div>

</div></div>
</div></div></div></div></div></div></div></div>
</div>

nolvorite
Apr 27th, 2007, 08:56 AM
If you will put a transparent background, don't put a url or bgcolor property.

koyama
Apr 27th, 2007, 03:29 PM
Is there anything else I can do to get this to work in IE? Or is there another way I need to go about this?

Are you aware that IE6 doesn't understand min-height?

From your code:


#main
{
background: #FFF;
min-height: 100%;
margin: 0 auto;
position: relative;
width: 80%
}
While IE6 does understand the height property, it is working incorrectly. In fact height works like min-height for IE6. Read about the IE6 expanding box problem (http://www.positioniseverything.net/explorer/expandingboxbug.html).

Usually, when one wants a min-height, one solves this by feeding IE6 with height and other browsers with min-height:


#main
{
background: #FFF;
min-height: 100%;
margin: 0 auto;
position: relative;
width: 80%
}
/* for IE6 and below */
* html #main {
height: 100%;
}

mr e
Apr 27th, 2007, 07:25 PM
If you will put a transparent background, don't put a url or bgcolor property.
What do you mean? I've tried removing the background color from the #right_menu div, but it didn't help any


Are you aware that IE6 doesn't understand min-height?

While IE6 does understand the height property, it is working incorrectly. In fact height works like min-height for IE6. Read about the IE6 expanding box problem.

Usually, when one wants a min-height, one solves this by feeding IE6 with height and other browsers with min-height:

Yeah I still need to work out IE6, I was trying to find a good way of testing IE6 (I have IE7 installed) before I started working on it, but I did know about the bug, thanks though, I really should get on that soon

Update: Alright I got my laptop up and running with IE6, and it doesn't show any of the background images on the right menu at all...now I'm really not sure what's going on

Oh, and I at least somewhat fixed the 100% issue with IE6 using conditional templates, it looks a little less retarded, not quite perfect though

mr e
Apr 28th, 2007, 07:45 PM
So are there any other suggestions for this?

I'm curious if I'm just going about this wrong and there's another way to avoid this bug.

koyama
Apr 28th, 2007, 07:52 PM
Sorry, I misread your post and was addressing another problem which was not your question.

I now see what you mean. You are talking about your right-floated box which has missing background images.

I am not sure what bugs you have googled up and what bug you think you are suffering from. As I see it, in this case the bug is not the bug that you think it is.

I have experienced that in IE, when you specify background-image: none for a nested div, then this (erroneously) causes that background images from the other divs are not shown. This still happens in IE7. Unfortunately, I haven't found a source describing this?

Example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Missing background image</title>
<style>
body {
background: green;
}
#one {
background-image: url('http://www.codingforums.com/img/logo.gif');
}
#two {
background: none;
}
</style>
</head>
<body>
<div id="one">
<div id="two">
Hello
</div></div>
</body>
</html>
I believe that this may be the problem. Note that it is possible to fix the problem by assigning zoom: 1 to either #one or #two above.

Although you are not using background-image: none. You are using it indirectly through the shorthand background property:


#right_column div div div div div div div div div
{
background: transparent;
}
It would be better to use this:


#right_column div div div div div div div div div
{
background-color: transparent;
}
Solution? Avoid having to reset the background properties for the innermost nested div. Rather than using those selectors I would assign id's to the div elements and target them through those. This will make sure that you are not targeting any of the further nested divs. In turn this means that you don't have to reset the background properties for the innermost nested div.

Also, drop that relative positioning. I don't think that they are solving any bugs in this case. Rather they may trigger other bugs in IE.