IE7 doesn't display background..

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

I'm working on a site for my family (aurigema.com) 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?

SteveA
www.aurigema.com

Scripsit SteveA:

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.

I see no substantial difference between IE 7 and FF 2 renderings of your
page http://www.aurigema.com/ 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
BS."

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.

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

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.

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

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

SteveA wrote :

This is my first post here,

Your first post is appropriate and clear.


so please go easy on me.

I'm working on a site for my family (aurigema.com) 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

That's excellent.

(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?

SteveA
www.aurigema.com

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

body
{
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
print).
Use relative length units such as percent or (better) em
"

W3C Quality Assurance tip for webmaster: Care With Font Size
http://www.w3.org/QA/Tips/font-size#css

----------

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
http://developer.apple.com/internet/...estwebdev.html

"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
http://www.456bereastreet.com/lab/de...dards/css/#css

--
Using Web Standards in your Web Pages (Updated Apr. 2007)
http://developer.mozilla.org/en/docs...your_Web_Pages

Scripsit Gérard Talbot:

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

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")
http://www.cs.tut.fi/~jkorpela/