IE and Div background image issue

Discussion in 'Web Design and Development' started by torndownunit, Dec 4, 2009.

Most Liked Posts
  1. torndownunit, Dec 4, 2009

    torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
    From looking at this CSS sample, can anyone tell me why a the background image in the #header would not be displaying in only IE (7 is the only version I have)? It displays fine in every other browser I have tried it in.

    Code:
    div#outer { width: 935px; background-color:#ffffff; margin: 50px auto; padding: 0; }
div#header { background-image: url(../media/sv_banner.png); background-repeat: no-repeat; background-position: left 0; padding: 6px 0; margin: 0 0 10px; text-align: center; }
div#main { color: #333; font-size: 0.9em; width: 925px; margin-top: 0; margin-right: auto; margin-left: auto; padding: 16px 0 10px; }
div#footer { color: #666; font-size: 0.75em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; text-align: center; width: 925px; padding: 15px 0 15px 15px; margin: 10px auto 0; border-top: 1px solid #ccc; }
    Code may be a bit sloppy, sorry :(. I am just in the initial stages of a layout when I had this problem.
     
    share
    + Quote Reply
  2. angelwatt, Dec 4, 2009

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    It may want quotes around the path for the image. Do you currently have any HTML tags inside #header that may have CSS attributed to them that could be interfering?
     
    share
    + Quote Reply
  3. A.list.face, Dec 4, 2009

    A.list.face macrumors newbie

    Joined:
    Jul 25, 2009
    #3
    Sometimes IE won't show an image for me if I preview it from a folder, but if I upload it to a server it is there.

    I always upload my CSS file here to double check my code if everything looks straight to my eye but there is still a problem.

    http://validator.w3.org/

    Also, this site is good to check the appearance in different IE versions....

    http://browsershots.org/
     
    share
    + Quote Reply
  4. JohnDoe8450, Dec 4, 2009

    JohnDoe8450 macrumors member

    Joined:
    Feb 3, 2009
    #4
    Make sure you specify a doctype in your html, or IE defaults to "quirk mode", which is a pain in the a$$ to deal with.
     
    share
    + Quote Reply
  5. torndownunit, Dec 5, 2009

    torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #5
    Ok, I found part of the problem, but fixing it has created another problem.

    The navigation menu doesn't display right in Explorer. It doesn't 'fit' into the area it does in all the other browsers, and it won't align correctly with the logo (see in non-IE browsers for correct look).

    I had attached a separate stylesheet for IE, and used:
    Code:
    	<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="../css/paintings_ie.css" />
<![endif]-->
    I took that line of code out to remove that ie specific stylesheet, uploaded the page again and now that background in the Div in the original post seems to work fine. But..the menu is messed up again.

    The page is here: http://www.stevenvolpe.ca/test/paintings.html

    Does anyone have any tips on how I should 'fix' that menu for just IE? Here is the CSS: http://www.stevenvolpe.ca/test/css/paintings.css

    Thanks

    p.s. the doctype my program set by default is:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    Is this ok?
     
    share
    + Quote Reply
  6. torndownunit, Dec 5, 2009

    torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #6
    Update: I just checked on browsershots.org and the menu appears to be correct in IE 8 as well now.

    So it's an IE 6 and 7 issue now. It appears ok in every other browser.
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page