No replies
gearu
gearu's picture
Offline
newbie
Last seen: 11 years 21 weeks ago
Timezone: GMT+12
Joined: 2011-09-08
Posts: 1
Points: 2

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: http://www.preview.imageworkshop.com/portfolio/

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"> <a>  <img />  </a>   </div>
        <div class="photo"> <a>  <img />  </a>   </div>
        <div class="photo"> <a>  <img />  </a>   </div>
        <div class="photo"> <a>  <img />  </a>   </div>
        <div class="photo"> <a>  <img />  </a>   </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.