PDA

View Full Version : Choosing a DTD (with errors)



enderwiggin7
Jul 9th, 2009, 02:34 PM
So, I played around with implementing both HTML 4.1 transitional and strict, deciding that the XML and frameset DTDs weren't for me. (Yeah, i'm learning )

The problem is, the 4.01 transitional DTD caused my navbar to cease - the top-level links still work, but the secondary level won't drop down at all.

So I tried the 4.01 strict DTD - but hovering over the options with my mouse makes them disappear entirely, even though with them the secondary level does drop down as a blank box. The text is still there too - I can highlight it with my mouse, I just can't see it normally. You can see this link for the test page I did declared as strict.

How do I discover what docytype & javascript version to declare?

My site is www.bebetterdomore.com (http://bebetterdomore.com)

Thanks!

VIPStephan
Jul 9th, 2009, 02:48 PM
OK, first you should know that the doctype is not meant to be chosen at free will depending on your level of experience. There is no substantial difference in “classic” HTML 4 and XML based XHTML 1 except for a few general rules about how to write the code (the actual allowed HTML elements are all the same).

Now, the only reason why you would be allowed to use a transitional doctype is if you are transitioning from old, non-standard code to modern, standards compliant (strict) code. Looking at your site I’d even say this case applies here as your code looks pretty “old fashioned”. However, a transitional state is never meant to last eternally and eventually you should work on your code to make it semantic (http://boagworld.com/technology/semantic_code_what_why_how/) and standards compliant (and the “strict” rules are the actual standard).

Currently you are lacking a doctype which means your browser is in quirks mode and will render pages as if it was a ten year old browser. If you apply a doctype now the page will screw up because it renders it like a modern browser and shows you all the errors you have in your code (since you based your entire layout on erroneous code).

So, the only way to fix your issues is to apply a transitional doctype (for now), then go to the HTML validator (http://validator.w3.org/) and fix the errors it shows you.

And keep in mind: Never use Internet Explorer as primary measure! IE is crap and if you base your layout on what IE shows you you won’t make anything better. Use a standards compliant browser such as Opera, Safari, or Firefox and then check if IE displays it like those browsers (dureing development, not just afterwards).

As to JavaScript: JS versions are deprecated. Nowadays JS isn’t executed by versions (it never was) but by checking if certain objects or methods are supported. So rather than <script language="JavaScript1.2"> you should write <script type="text/javascript"> as the version number doesn’t matter at all anymore. And in that script you do some conditional statements to check if something is supported and execute the script upon this condition.

Progressive enhancement (http://en.wikipedia.org/wiki/Progressive_enhancement) and unobtrusive JavaScript (http://onlinetools.org/articles/unobtrusivejavascript/) are the keywords of modern web development.

enderwiggin7
Jul 9th, 2009, 04:59 PM
Thank you very much for your help, VIPStephan!

I've changed the DTD to transitional, and used the validator to identify and fix about 50 errors and warnings. I still have 11 left that I haven't been able to fix yet, though.

I hardly use IE at all - I should test on it once in a while, I suppose, but I typically only use Firefox (PC & Mac).

I implemented all of your changes, specifically those related to the javascript, but I am still getting errors in the navbar. You can see my test page here (http://www.bebetterdomore.com/index3.html).

Also, I'm still getting these errors (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bebetterdomore.com%2Findex3.html&charset=(detect+automatically)&doctype=Inline&outline=1&group=0&user-agent=W3C_Validator%2F1.654). Are any of these specifically interfering with how my navbar works?

Contrary to what the error report states, "Error Line 44, Column 7: end tag for element "HEAD" which is not open" the HEAD tag sure looks open to me. Thoughts?

Thanks again for your help! I've just begun to learn the more advanced levels of HTML, so bear with me.

abduraooft
Jul 9th, 2009, 05:16 PM
Also, I'm still getting these errors. Are any of these specifically interfering with how my navbar works?

Contrary to what the error report states, "Error Line 44, Column 7: end tag for element "HEAD" which is not open" the HEAD tag sure looks open to me. Thoughts?

Line 22, Column 58: NET-enabling start-tag requires SHORTTAG YES

<link rel="stylesheet" type="text/css" href="clarke.css" /> Start from the first one itself. That ending / is not required in HTML doctype

VIPStephan
Jul 9th, 2009, 05:56 PM
Well, as much as I respect brothercake, the script you are using for your menu is crap as it’s very outdated and – as we see – relies on JS to work. You can all do this with CSS nowadays and only use JS for IE 6’s lack of support for the :hover pseudo class on anything other than anchors. My favorite standalone script for this is Son of Suckerfish (http://htmldog.com/articles/suckerfish/dropdowns/).

As to the other errors there are some errors that are shown but not actually errors. The validator only thinks they are because you have some other erroneous code before which make the combination invalid. The first error shown is a simple one and directly related to the differences between HTML and XHTML: Since you are using an HTML doctype you should not write a slash at the end of standalone elements such as link or img so this: <link rel="stylesheet" type="text/css" href="clarke.css" /> must look like this: <link rel="stylesheet" type="text/css" href="clarke.css"> and I think by fixing this one error some of the others are gone as well.

Then remove all these non-standard attributes from the body element:

<BODY BGCOLOR="#FFFFFF" leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>

and write them as CSS in the stylesheet:


body {
margin: 0;
padding: 0;
background: white;
}


Furthermore a list is a blokc element and block elements cannot be in inline elements. So remove the span around the list and you’re fine. Lastly there is a missing closing table tag at the end.

Implement these changes and then let me know if there are any errors remaining.

enderwiggin7
Jul 9th, 2009, 06:11 PM
abduraooft - Thanks! Okay, down to just 7 errors now. But the navbar options still disappear when you hover over them, and the Home link is still inexplicably located at the very bottom of the page.

enderwiggin7
Jul 9th, 2009, 06:24 PM
VIPStephan - I removed the SPAN tags, which seems to remove an error, but I lose the bold-ness of the type. Thoughts?

The problem with this whole site, in all honesty, is that it was written by a hobbyist, edited by a temp, and then handed to me. I've had to learn this stuff from the ground up to take over. I'm learning though - slowly but surely. All errors, like the outdated navbar, are legacy that I'll have to replace at some point, but need to get working for now to satisfy my employer.

I removed the BODY attributes now as well, but I'm not sure where to put the CSS code you gave me. We have a style.js file, and a clarke.css file. Being brand new to both JS and CSS, I'm only beginning to understand how they work. I'm at the point now where I'm finally fairly comfortable tinkering with the code, even if I can't write anything from scratch yet.

I like the idea of doing the navbar entirely CSS, but I don't like the examples given at your link, (which abduraooft kindly provided as well in a previous thread). Is this just because it hasn't been 'fancied up' yet? If so, is there a way to discover how to do that, because I want to make it look as good (if not better) than the current navbar.

Thanks again to both of you - this is a tremendous help!

VIPStephan
Jul 9th, 2009, 08:04 PM
OK, you really got me. Since Iím having a good day Iíve attached a version with the suckerfish script implemented and all primary errors fixed. You only need the HTML file (you can copy and paste) and the clarke.css and menu.js files now (make sure the path to these files as well as to the images is correct in the HTML, it has changed them automatically when I saved your page).

Of course the original suckerfish demo is pretty unstyled. Iíve also just added basic styling so it looks almost similar. It can definitely be enhanced yet. Also, the colons in front of the main links are only showing up in modern browsers (that means not in IE 6 and 7) since itís using the :before pseudo class which IE lower than version 8 doesnít support. However, as this is not crucial for the functionality of the site we shouldnít care all that much. At least itís degrading gracefully.

For the list with bold items Iíve just added an ID to that list and changed the styling in the CSS from being applied to all span elements to being applied to the list.

Hope that helps.

enderwiggin7
Jul 9th, 2009, 08:22 PM
WOW. Thank you so much! I can't believe you did that for me.

Look, if you ever need some graphics help or something, just drop me a PM - i'm a freelance graphic designer by trade.

As for the files you just gave me, I have a kind of noob question for you - how do I implement this into the current site? Obviously, it will have to replace the code on all of my other pages as well, (so what lines of code do I need to be looking at) and all the graphics and everything still have to line up. What files did you change? That way I know which ones to replace. What files can I dispose of entirely, seeing as you said I only needed a few of them now? I just don't want to accidentally blow something away that I need.

Thanks again!

VIPStephan
Jul 9th, 2009, 08:57 PM
Remove everything inside the head section of the document except the title and meta elements. Then put the CSS link and the script reference there (changing the file paths to where your files actually reside Ė in the site root folder, as it looks like).

I havenít changed anything regarding (visible) images or whatever. The only things you need to change in the HTML are removing the white space image (which isnít necessary at all):


</TABLE>
<!-- End ImageReady Slices -->

</td></tr>
<tr><td colspan="3" align="center"><p><img src="images/whtspcr.gif" alt="" border=0 width=1 height=45></p></td></tr>
<tr>


Ö and replacing it with the navigation code and the script reference to menu.js in the very bottom of the document. That should do it.

enderwiggin7
Sep 16th, 2009, 08:07 PM
VIPStephan,

I was finally able to take the time and set up a test site and implement the CSS bar that you provided. (Thank you, once again.) The site is bebetterdomore.atspace.com (http://bebetterdomore.atspace.com).

The only significant error that I am getting with the new navbar is an unfortunate tendency to jerk the screen when hovering over the "Help" button. Also, the submenu disappears sometimes when you bring your cursor down from the main menu, and this must be repeated several times before it will stay up long enough to actually click something. Do you have any idea what might be causing this? Also, does everything else look right to you?

As soon as this is worked out, I'll be implementing the bar into all of my pages and posting to our main site.

Thanks again for all of your help!