|
Posted by SteveA on May 23, 2007, 10:55 pm
Please log in for more thread options
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
|
|
Posted by Jukka K. Korpela on May 24, 2007, 5:41 am
Please log in for more thread options
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/
|
|
Posted by =?windows-1252?Q?G=E9rard_Talb on May 24, 2007, 10:11 am
Please log in for more thread options
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/webcontent/bestwebdev.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/developing_with_web_standards/css/#css
--
Using Web Standards in your Web Pages (Updated Apr. 2007)
http://developer.mozilla.org/en/docs/Using_Web_Standards_in_your_Web_Pages
|
|
Posted by Jukka K. Korpela on May 24, 2007, 12:00 pm
Please log in for more thread options
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/
|
| Similar Threads | Posted | | Background images | January 25, 2005, 5:19 pm |
| with background image - what's the right way? | March 4, 2005, 5:51 pm |
| Cannot set background color (XML+CSS) | July 6, 2005, 12:16 am |
| How to make background img fit | June 28, 2006, 10:01 am |
| How are images best set as background? | August 26, 2006, 10:12 pm |
| CSS background-attachment | May 19, 2007, 12:36 pm |
| 2 layers fixed background ? | July 17, 2004, 5:20 pm |
| cell background color | February 15, 2005, 1:23 pm |
| How to unable background sound | June 7, 2005, 5:24 pm |
| CSS Bug?? background-image - Not Refreshing | October 25, 2005, 10:39 am |
|
XML Sitemap