Dumb HTML question
With Firefox (but not IE), the text of some of my blog entries show up properly as Verdana and dark brown, while others use the Firefox default font and color. I can’t see a difference in the source. For examtple, the previous entry, Truth, Objectivity and Mitch is wrong while the next entry, Berkman Web of Ideas, is right. (This occurs on my blog’s main page, not on the page the permalink takes you to.) What’s the obvious thing that I’m missing?
Here’s Tim Bray’s quick response:
The first step in making display problems go away is fixing obvious markup problems. Check out the w3 validator and it reveals a host of problems, many of which can be fixed by fiddling the <!DOCTYPE> so it knows this is XML, for example steal the one I use: <!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.1//EN’ ‘http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd’>
But it also reveals a bunch of real problems, “slign=” where you mean “align=” and a ton of others. If you can make these go away not only will you be a cool, hip, standards-compliant kinda guy, but then your style issues will become comprehensible by mere mortals. Which currently they’re not.
There are also some useful suggestions in the comments to this post. I’ve done some fiddling and I’ve gotten the number of errors down to under 500. Woohoo! Most are not in the template, although the template sure has plenty. In fact, it has so many that I’ve given up trying to make it compliant.
Besides, I prefer unassertive browsers to rigid standards. (OTOH, if my code were valid, I wouldn’t be having the problem that started this thread.)
Categories: Uncategorized dw
Hmmm, confounding. I looked at your source code (ew), and it does seem that the last two entries are marked up exactly the same way (with the same yucky FONT tag specifications).
Then I looked at your styles. Why do you have four stylesheets linked to the document, all of which seem very similar, but not exactly the same? Maybe there’s some weird cascading/inheritance thing going on with them.
I’ll keep poking around. When I used the Edit Styles bookmarklet to delete all your styles, the whole site went to the same default black-looking text, which may be what the FONT tag is trying to do, but I’m not even sure about that. So it does seem that the variations stems somehow from the style sheets and the way Firefox is interpreting them.
Fearing your source code, but noticing a pattern, it looks like every post has an extra tag or a tag out of place. So, every other post is messed up, but, by it’s completion, it closes the problem started in the previous post.
This would explain why permalink pages don’t have the problem–it’s only obvious when there is more than one post on the page, because the first post renders OK.
And, Firefox is more revealing when it comes to these kinds of breaks, than IE.
With the Firefox Web Developer plugin, I can see that the correct style is specified in your style sheets (!!! egad, FOUR times !!!):
in http://www.hyperorg.com/blogger/MTStuff/blogstyle1.css
p (line 1)
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: rgb(102, 51, 0);
}
in http://www.hyperorg.com/blogger/MTStuff/blogstyle2.css
p (line 1)
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: rgb(102, 51, 0);
}
in http://www.hyperorg.com/blogger/MTStuff/blogstyle3.css
p (line 1)
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: rgb(102, 51, 0);
}
in http://www.hyperorg.com/blogger/MTStuff/blogstyledefault.css
p (line 1)
{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: rgb(102, 51, 0);
}
And, the incorrectly rendering posts are not getting any style information. I think this is a sign that some tag is making it impossible for Firefox to determine which style to apply on these posts.
Also, one really obvious thing that also explains the IE vs Firefox distinction: your page is declared as:
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
And, your code is not valid XHTML. (See http://validator.w3.org/check?verbose=1&uri=http%3A//hyperorg.com/blogger/ )
I believe Firefox takes these declarations way more seriously than IE, and reacts accordingly to errors.
You might try switching the declaration to:
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”
And just seeing if that quick-fixes the rendering issue. But, ultimately, it’d be best to clean up your HTML (because it’s maybe not valid HTML 4 either).
http://retecool.com/forum/threads.php?id=4859_0_14_0_C
a reel funny gallery of our PS-hero.
you know toch….
BTW, there are 4 style sheets because of the links at the top for people with poor vision or color blindness.
The different styles for different folks is cool. But, having the same styles listed more than once is not so cool.
You might put all of the styles that are the same (i.e., across all of the stylesheets) in one, initial, stylesheet, and then have four subsequent stylesheets that change only the minimal bits that need to change for accessibility kindness.
Actually, I think you should call upon the HTML / CSS boy/girl scouts to volunteer to rebuild your templates for you. Having looked at your templates and seen the list of errors counting into three digits, I’d recommend you start over from a clean, cruft-free, slate.
There’s nothing wrong with unassertive browsers. However, sticking to rigid standards means that your readers can spend more time on trying to get your original question answered, and have to spend less time wondering if the problem has anything to do with the 500 known problems.
Really, that’s the only reason to have these standards in the first place: to be able to spend less time on coding and more time on the important stuff. (The same goes for robust browsers, of course: the less they balk on our code, the more time we have for the important stuff.)
Some encouraging news: often when the validator finds an error, many of the following errors are dependent. For instance, if you fix error #1 for this page, errors #2 through #7 will disappear automatically.
Heya guys, I dont know if you can help me, but I use Frontpage 2003, and when I use a background picture with all the graphics on my homepage it gives me problems in Mozzilla FF. The problem is that when I want to link a layer over the background image, and I include a marquee in this layer with a hyperlink, Opera opens it, IE also, but Firefox not….any ideas why?