IE7 doesn't display background..

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

This is my first post here, so please go easy on me.

I'm working on a site for my family ( and after designing
and redesigning the layout I finally got to the point where I felt OK
putting up a design prototype.

Before uploading I checked it against the browsers I had available
(IE6,Opera9,FF2) and everything looked exactly like I expected. Once I
loaded it up in IE7 though, everything broke. The background image and
various other images on the site do not load, and I cannot for the
life of me figure out the issue. The HTML + CSS are W3C complaint
(with the exception of a behavior .htc to account for IE6's butchery
or :hover) so I'm not sure where the problem lies.

I've googled both the groups and net and have yet to find a similar
issue. Any suggestions?


Re: IE7 doesn't display background..

Scripsit SteveA:

Quoted text here. Click to load it

I see no substantial difference between IE 7 and FF 2 renderings of your
page on my computer.

The copy text font size is intolerably small, and particularly frustrating
since the browser window is almost empty. May I quote a recent note by "Ben
C" in comp.infosystems.www.authoring.stylesheets? Well, I'll quote anyway:

"A tiny font gives a superficial impression of importance and "high
tech", which is why it's used on corporate websites, which are often
content-free anyway. Big fonts look too much like children's books. Also
if you make the actual words easy to see it's too obvious they're just

Quoted text here. Click to load it

They load here. By the way, background images set in CSS are a stylesheet
issue, not HTML.

Quoted text here. Click to load it

On IE 7, I see the scripting error indicator set. Error at line 11,
character 1.

Jukka K. Korpela ("Yucca")

Re: IE7 doesn't display background..

SteveA wrote :
Quoted text here. Click to load it

Your first post is appropriate and clear.

so please go easy on me.
Quoted text here. Click to load it

That's excellent.

I see no differences between Firefox and MSIE7.
The images/header_bg.jpg loads as expected in MSIE 7.


What you really should correct is the font-size

body, h1, h2, h3, form {
    font: 10px tahoma, arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #5C5C5C;

An h1 heading that has no margins and uses 10px has to be an error.
Please reconsider the above CSS rule. It makes no sense to be using
anything smaller than 12px or 13px for body element. I recommend you use
something like

    font: 100% Tahoma, Arial, sans-serif;
    color: #5C5C5C;

That way you let user default values for h1, h2, etc. prevail

Also, it is best to
- use a relative font-size: relative to what? you may ask. Relative to
the default or set font-size by the user. So, if a visitor has set 14px
as a minimum in his browser preferences, then the font-size will be 100%
of 14px when visiting your webpage
- never use absolute font-size unless you have a very good reason to do so

"Size: respect the users' preferences, avoid small size for content

   As a base font size for a document, 1em (or 100%) is equivalent to
setting the font size to the user's preference. Use this as a basis for
your font sizes, and avoid setting a smaller base font size
   Avoid sizes in em smaller than 1em for text body
Do not specify the font-size in pt, or other absolute length units for
screen stylesheets. They render inconsistently across platforms and
can't be resized by the User Agent (e.g browser). Keep the usage of such
units for styling on media with fixed and known physical properties (e.g
Use relative length units such as percent or (better) em

W3C Quality Assurance tip for webmaster: Care With Font Size


I'd say that your markup code may be over-using <div>s a bit. It's not
clear in my mind that you need a <div id="wrapper"> because it may be
duplicating the role/function of what the body element is doing already.

"Classitis and Divitis
A common error of beginning CSS coders is to use far too many <div> tags
Web Page Development: Best Practices

"Superfluous elements and classes
When starting out with CSS, it’s common to make the mistake of using
unnecessary XHTML elements, superfluous classes, and extra <div>
elements. This doesn’t necessarily mean that the code will be invalid,
but it counteracts one of the reasons of separating structure from
presentation; to get simpler, cleaner markup."
Developing With Web Standards
Recommendations and best practices

Using Web Standards in your Web Pages (Updated Apr. 2007)

Re: IE7 doesn't display background..

Scripsit Gérard Talbot:

Quoted text here. Click to load it

I wouldn't normally comment on issues like this, especially when off-topic,
but I think that if we suggest corrections, the corrected code should be
correct in a practical sense. The code above lacks a background setting, and
it uses Tahoma, which is not a good choice as a copy font, since it is too
condensed (too little horizontal spacing) - almost like condensed Verdana.

Besides, if you use #5c5c5c as text color, what background you would use?
Such a gray text doesn't really work well against _any_ background.

Jukka K. Korpela ("Yucca")

Site Timeline