SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    81
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    I have the following design that I am trying to slice and code:
    http://www.astigmaproductions.com/ap.jpg

    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:
    http://www.astigmaproductions.com/im...ifferences.jpg

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    For starters you do not have a proper doctype so all versions of IE are in quirks mode.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Remove the br style="clear:both and use this instead:
    Code:
                <div style="width:300px;float:left;background: url('http://www.astigmaproductions.com/images/apbronzebg.jpg');height:180px;margin-top:40px;">Package 1</div>
                <div style="clear:both;"></div>
            </div>
    Or instead induce "haslayout" on the parent element.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •