IE and Div background image issue

torndownunit

macrumors regular
Original poster
Jan 4, 2009
242
0
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

Moderator emeritus
Aug 16, 2005
7,857
7
USA
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

macrumors newbie
Jul 25, 2009
28
0
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

macrumors member
Feb 3, 2009
61
0
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

macrumors regular
Original poster
Jan 4, 2009
242
0
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

macrumors regular
Original poster
Jan 4, 2009
242
0
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.
 

Similar threads

Replies
0
Views
518
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.