HTML & CSS
I have the following design that I am trying to slice and code:
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:
For starters you do not have a proper doctype so all versions of IE are in quirks mode.
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]
Or instead induce "haslayout" on the parent element.