CSS background color not behaving as expected

HTML & CSS
1

I don’t understand why the background color is not being applied as expected here. This might be a lack of understanding on my part as to the relationships between elements in CSS?

The page in question: Portfolio « Image Workshop

Replicating the issue

  1. First, open the above link in IE 7 or IE 8
  2. Click the PRODUCT filter, then press the PROMO & EDITORIAL filter
  3. White dots will have appeared on some of the images (this is a bug in IE which causes some pixels to be left transparent after a fade animation. if you don’t see them, do a little more filtering, they turn up fairly quickly.

CSS BACKGROUND COLOR PROBLEM

What works: If I set the background color for the gallery background to be red, then this red color shows throught the transparent spots on the images. (The inference here, is that a background color of black hides the ‘white spots’ bug).

#isotopegallery{background:red;}

What doesn’t work: Obviously, I don’t want to set the gallery background color to be anything but white. What I want to do is set the background color of the DIV that contains the images, for example:

.photo{background:red;}

however, when i do this, the red background color does not show up through the transparent pixels??

The simplified overview of the structure of the elements is as follows

<div id="isotopegallery" class="photos">
    <div id="ngg-gallery-18-71">
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
        <div class="photo"> <p><a>  <img />  </a></p>   </div>
    </div>
</div>

HELP!

I can’t figure out why this background color works for the #isotopegallery parent DIV, but not for the .photo DIV?

When i look in firebug, the color property is set for the .photo div, but does not show through the transparent pixels?

This is the last issue that his holding up go live for our website, and it is driving me nuts! I would really appreciate any help that you can provide to help me resolve this issue.

NOTE: there is info around that suggests that changing the blackpoint of the images in photoshop will fix this problem. We have tried this method, and have found it does not work.

2

I tried restarting IE7 a few times. Then I let it sit for as long as it wanted to… doing this, I eventually got things working.

I notice the exact same parts of the exact same images get the transparent thingies. Every time. Makes me wonder how IE manages that.

I also notice, IE also does not see any background colour applied to the divs. Where did you set this? Nobody I try to view in shows a background colour.

Did you remove the images first and add the background colour (to prove you have multiple coloured divs on the page)? Though without any content inside and being absolutely positioned you may not see anything anyway, so then try with transparent gifs with some dimensions just to have some filler.

3

I can’t get this to even run on my machines. They sputter and stall and die under the weight of code (I guess).

But I tried.
I don’t see a background-colour set on .photo, but even if one was set, I wouldn’t see the colour anyway, since the p inside is sticking out (rather than extending the div) and so none of the div I can see sticking out beyond the images.

If IE didn’t freeze I could probably get the transparent thingies you see, but I don’t have any.

4

IE seems to have issues loading this page (seems to struggle performance wize) - it should work fine in other browsers though?

as for the background colour, it appears that the javascript that does the filtering is picking up the whole element and flattens whatever you can see - and ignores the background color of the div.

A little more detail here on StackOverflow: http://stackoverflow.com/questions/7327569/css-background-color-not-behaving-as-expected

5

it should work fine in other browsers though?

I don’t have the latest and greatest of machines, which might be part of the problem on my end. Browsers are already resource hogs, so they may be butting up against machine limits while trying to do uber-complicated stuff on a web page.

Thanks for the link and the update; sorry I couldn’t help.