I knew the DOCTYPE tag was there to tell the browser something about the rule sets it should use to process the HTML. But I never realized how much it could muck things up, and I wonder if someone can explain what happened here.

I was on a few cool sites that lets you generate free navigation menus, some with javascript and some with CSS. One that was done 100% in CSS was on a site called "purecssmenu.com", and I really liked it. So I plugged in some menu data and let it generate some code for me, in a samle HTML file.

Well I have a pretty dated editor, Homesite 5.5 I think, and I used it to try my new menu, creating a default HTML document, then putting all the CSS style stuff in the <head> tag and the html stuff where I wanted the menu in my page.

Well it worked fine in Firefox, but in IE 8 or IE 9, the dropdown menus would not work. then i noticed that the sample HTML code created for me by the site had a DOCTYPE like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

When I put that into my rest page, everything worked perfectly in IE. But now, compare that to the default DOCTYPE generated by my Homesite...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

So the only difference is that the one that works actually contains a link to w3c.org. Well like I said, I never paid a huge amount of attention to the DOCTYPE tag, but now that i see the wrong one will break my navigation functionality if I don't get it right, I'm concerned! What if there's some kind of netsplit and a visitor gets to my page, but w3.org can't be reached? And what if I start using HTML 5 for the the new <video> or <audio> tags? Will changing the DOCTYPE to reference HTML 5 start causing problems too?

I guess I need to understand and pay more attention to this TAG!