IE and Div background image issue

torndownunit · Dec 4, 2009

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.

angelwatt · Dec 4, 2009

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?

A.list.face · Dec 4, 2009

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/

JohnDoe8450 · Dec 4, 2009

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.

torndownunit · Dec 5, 2009

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?

torndownunit · Dec 5, 2009

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.

Search

Search

IE and Div background image issue

torndownunit

macrumors regular

angelwatt

Moderator emeritus

A.list.face

macrumors newbie

JohnDoe8450

macrumors member

torndownunit

macrumors regular

torndownunit

macrumors regular

Similar threads

Our Staff