Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

IE and Div background image issue

T

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.
 
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?
 
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/
 
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.
 
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?
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back