SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member RainFire's Avatar
    Join Date
    Aug 2006
    Location
    Bremen, Germany
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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/...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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,101
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    In your HTML, you have this:

    Code:
    <div id="Routes_findgas_menu"></div>
    but your style sheet targets this:

    Code:
    #Routes_FindGas_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.

    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member RainFire's Avatar
    Join Date
    Aug 2006
    Location
    Bremen, Germany
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    ---Beginner Forever---

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,101
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RainFire View Post
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •