background-image display problems with IE

Discussion in 'CSS' started by tommyhopscotch, Oct 13, 2010.

  1. #1
    Hi!

    I'm having difficulties getting some CSS to display properly in IE. Here's the code from my stylesheet:

    #banner-custom {
    	background-image: url("images/banners/head_f.jpg");
    	background-repeat: no-repeat;
    	border: 10px solid #000000;
    	height: 230px;
    	margin-bottom: 20px;
    	width: 530px;
    }
    Code (markup):
    This displays just fine in Opera. To wit:

    [​IMG]

    But in IE it places the image twice, which is really annoying. Example:

    [​IMG]

    And here's the actual page if anyone wants to look: http://www.bigracistfriday.com/ (I'd link but can't due to user restrictions.)

    Does anyone know how to fix this? I've tried using "background: url(...)" instead of background-image, but no dice. At one point I was able to get IE to display it only once, but then it put an empty image frame over the banner (i.e. a little gray border and an image icon in the upper left). Can't remember how I changed the CSS for that, but it wasn't an acceptable fix.

    Any help would be greatly appreciated.
     
    tommyhopscotch, Oct 13, 2010 IP
  2. GWiz

    GWiz Peon

    Messages:
    359
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    0
    #2
    First try adding a float:left; to #banner-custom, if that doesn't work. You can replace that div to an image, I don't see the need to use a background image.
     
    GWiz, Oct 13, 2010 IP
  3. tommyhopscotch

    tommyhopscotch Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Float:left didn't work, but changing to img did. Thanks!
     
    tommyhopscotch, Oct 14, 2010 IP