CSS Background Image Problem with IE7 and IE8: Gradient is a Solid Color?

HTML & CSS
1

I have the following design that I am trying to slice and code:
[COLOR=#4a6b82]http://www.astigmaproductions.com/ap.jpg[/COLOR]

After slapping some content together to get the layout to work, I checked it in Firefox, Chrome, IE6, IE7, and IE8. I didn’t see any issues with the layout, but I noticed that IE7 and IE8 take a graident background image and show it as a solid color. The background image is the gray shadow behind the bronze package buttons. The other browsers show a graident, but IE7 and IE8 show a solid gray line, like I did border-top:15px solid gray instead of the image. The image is a jpg that reapeats-x. It’s not even a fancy png or anything. Why would IE screw that up, and what do I do to fix it?

http://www.AstigmaProductions.com is the site.

Here is a screen shot showing the problem:

2

Hi,
For starters you do not have a proper doctype so all versions of IE are in quirks mode.

3

Hi,

Remove the br style="clear:both and use this instead:


            <div style="width:300px;float:left;background: url('http://www.astigmaproductions.com/images/apbronzebg.jpg');height:180px;margin-top:40px;">Package 1</div>
        [B]    <div style="clear:both;"></div>[/B]
        </div>

Or instead induce “haslayout” on the parent element.