DOCTYPE for HTML 5 Makes a DIV Disappear

Hi everyone,

I’m working on a little site for a class in school. This is the first time I’ve really worked with HTML5 and JavaScript, but I’ve managed to create a site (including CSS3) that validates with the W3C validators, but for some reason the first div nested in the bottom section of my navigation area disappears when I declare the HTML5 DOCTYPE, if I use 4.01 transitional, all is well. What’s going on? I can’t seem to figure this one out. Entering text into the divs shows the text at the correct positions, just the images and declared size of the divs seem to be missing?

As an aside, the JavaScript also doesn’t work in Safari (5.1.7), for some reason. I really just played with the script I found at this demo: http://jquerytools.github.com/demos/rangeinput/scrollbar.html so I’m not sure if this is playing a role, as it seems to be in Safari the update of the top element isn’t getting updated in real-time; I’m not sure if this is some kind of interaction. (Debugger in Safari gave no indication of a problem.)

Here are the links to the site:
Quirks-mode working
Validated HTML5

Any help here would be great.

Thanks,

Andrea

In your HTML, you have this:

<div id="Routes_[COLOR="#FF0000"]f[/COLOR]indgas_menu"></div>

but your style sheet targets this:


#Routes_[COLOR="#FF0000"]F[/COLOR]indGas_menu { ... }

This is the problem. Case matters … which is why you should never use capitals in code—as it just makes for potential problems you don’t need. :slight_smile:

Perhaps the lack of strictness in the older doctype lets you off the hook. But it’s not a good hook to be let off.

Well, that was refreshingly simple. I fixed the section in question and it works. Now I’ll clean that up everywhere! Thanks. I would never have noticed -that- as the culprit because it works with the old “sloppier” doctype.

Yes, that surprises me, actually, because CSS is meant to be pretty strict about this. But anyhow, I’ve just set myself a rule never to use capitals in code, and it saves me a lot of issues like this. There are plenty of other issues to worry about already. :slight_smile: