Forum Moderators: not2easy
I have a simple DIV to which I would like to apply a background image. It shows up in my HTML/CSS editor and it shows up in IE/WinXP. However, the background image does not show up in Mozilla or Firefox.
When I remove it as a background image and place the image directly into the DIV, it displays fine in Mozilla and Firefox but IE adds a 4 or 5 pixel transparent margin underneath the image. I changed the DOCTYPE! from transitional to strict, but it changed nothing.
Following is the HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
(misc code here)
<div id="head"></div>
And here is the style from the stylesheet:
#head {
width: 780px;
height: 225px;
background-image: url(Main Header.jpg);
vertical-align: middle;
}
Can someone help?
The next thing that strikes me is that the file name for your image uses a space - that's not a good idea on the web. Does it work for you if you rename the image to, say, mainheader.jpg?
I am still fairly new to CSS, though I have been using embedded stylesheets for the past year or two. I used to just apply the same styles and modify them depending on the page I was designing. On top of that, I was using them in conjunction with tables.
Now, I am in the process of building two sites using CSS across the board... no tables! This is a huge step for me, and I am now running into small problems here and there.
Thanks so much for your help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">If you prefer not renaming the file, you can replace the space with a %20:
background-image: url(Main%20Header.jpg);However, I can't really recommend it: it is good practice to keep all file names lower-case and using hyphens for spaces for maximum compatibility.
because you are using a partial DTD, browsers will be in quirks mode whether you are using transitional or strict mark-up.
Hesitate to correct you, tedster, but Strict "half-doctypes" for HTML 4.0 and 4.01 also trigger standards-compliance mode - it is only the Transitional half-doctypes (for 4.0 and 4.01 again) which trigger quirks mode. It's still better to use the full version though!
