Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 34
  1. #1
    New Coder
    Join Date
    Jan 2006
    Location
    South Central, KS
    Posts
    81
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Removing DOCTYPE hoses my CSS - Having DOCTYPE hoses my Javascript

    Hey all, running into an oddity.

    For one of my sites, i am trying to make a script which works fine in all of my other sites, work... however, it turns out that it doesn't because of the DOCTYPE (i will track down why that is at some point.) This is the only site that uses a DOCTYPE as i am only just now attempting to make my sites W3 complient...

    here is the problem that i wan't to figure out first.
    When i remove the doctype 1/2 of the CSS in my external stylesheet seems to stop working (fonts, positioning, etc) why would this happen? Is there something in CSS that requires DOCTYPE? all of my other sites use external CSS and they work just fine. I am at a loss on this one.

    ( the site in question is www.lowencertified.com please be nice, it's unfinished but had to go live due to time issues )

  • #2
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Loose//EN"
    "http://www.w3.org/TR/html4/loose.dtd">	<html xmlns="http://www.w3.org/1999/xhtml">
    1) You're pointing to an unknown DOCTYPE "Loose", which is invalid. You need to use "Transitional".
    2) You're using an XML Namespace and not using XHTML
    3) The first "HTML" is traditionally lowercase, although I've never tested to see if it matters.

    A simple trip to the W3 Validator would have answered your questions.

    It's important to specify a proper DOCTYPE in all your documents. I suggest using HTML STRICT, being consistent, and testing often for valid markup.

    Recommended list of DOCTYPE definitions
    Last edited by bdl; 04-28-2009 at 02:44 PM. Reason: Added link

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by bdl View Post
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Loose//EN"
    "http://www.w3.org/TR/html4/loose.dtd">	<html xmlns="http://www.w3.org/1999/xhtml">
    1) You're pointing to an unknown DOCTYPE "Loose", which is invalid. You need to use "Transitional".
    2) You're using an XML Namespace and not using XHTML
    3) The first "HTML" is traditionally lowercase, although I've never tested to see if it matters.

    A simple trip to the W3 Validator would have answered your questions.

    It's important to specify a proper DOCTYPE in all your documents. I suggest using HTML STRICT, being consistent, and testing often for valid markup.

    Recommended list of DOCTYPE definitions
    There's some good info in there that I won't argue with, however I would recommend XHTML 1.0 Strict (rather than HTML 4 strict). It's often said that you should use the most strict doc type possible for your application and only downgrade to lower doc types if you must (e.g. if you are using frames you should use a frameset doc type to code validly). That's just my 2 cents though...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Jan 2006
    Location
    South Central, KS
    Posts
    81
    Thanks
    2
    Thanked 2 Times in 2 Posts
    damn it, wouldn't you know i would flub something up and de-rail the answer in the wrong direction...

    the doctype loose and xmlns where the results of my attempt at finding a solution, these shouldn't have been uploaded (but i was attempting to make sure the live code was the most current, and forgot to backtrack that)

    in fact, it doesn't matter what i put in DOCTYPE if it's there, the CSS works, and the JS doesn't...

  • #5
    New Coder
    Join Date
    Jan 2006
    Location
    South Central, KS
    Posts
    81
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Incidentally. My Dev Environment is behind a firewall and not available to any outside validators. It would be nice to be able to validate on dev code rather then uploading to live and then validating... could anyone recommend a validation program that can be installed locally - which is regularly updated?

  • #6
    Senior Coder CFMaBiSmAd's Avatar
    Join Date
    Oct 2006
    Location
    Denver, Colorado USA
    Posts
    3,044
    Thanks
    2
    Thanked 316 Times in 308 Posts
    Did you actually go to the w3.org validator site? You can copy/paste HTML and CSS.
    If you are learning PHP, developing PHP code, or debugging PHP code, do yourself a favor and check your web server log for errors and/or turn on full PHP error reporting in php.ini or in a .htaccess file to get PHP to help you.

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Is your javascript entered like this:
    Code:
    <script>
    ...blah blah blah...
    </script>
    Or like this:
    Code:
    <script type="text/javascript">
    ...blah blah blah...
    </script>
    It should look like the second example. If that's not how it is that might be the problem when a doctype is concerned.

    P.S. And which script is breaking? All of them? Just one? If just one please specify.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #8
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Quote Originally Posted by voxecho View Post
    damn it, wouldn't you know i would flub something up and de-rail the answer in the wrong direction...

    the doctype loose and xmlns where the results of my attempt at finding a solution, these shouldn't have been uploaded (but i was attempting to make sure the live code was the most current, and forgot to backtrack that)

    in fact, it doesn't matter what i put in DOCTYPE if it's there, the CSS works, and the JS doesn't...
    I don't think my answer was directed wrongly; if you fix your DOCTYPE and work on using valid code, then your CSS and JS problems should go away.

    Make sure you're NOT using the "language" attribute of the SCRIPT tag, and either omit the "type" attribute or have it set to "text/javascript". CSS should be external if at all possible and override some behavior in a proper CSS tag in the document HEAD.

  • #9
    bdl
    bdl is offline
    Regular Coder
    Join Date
    Apr 2007
    Location
    Camarillo, CA US
    Posts
    590
    Thanks
    4
    Thanked 83 Times in 82 Posts
    Quote Originally Posted by Rowsdower! View Post
    There's some good info in there that I won't argue with, however I would recommend XHTML 1.0 Strict (rather than HTML 4 strict). It's often said that you should use the most strict doc type possible for your application and only downgrade to lower doc types if you must (e.g. if you are using frames you should use a frameset doc type to code validly). That's just my 2 cents though...
    Using XHTML is not a more strict doc type if you have to serve it as "text/html", which must be done because stupid IE doesn't recognize "application/xhtml+xml". Until everyone is using a browser that recognizes the proper XHTML mime type, use HTML STRICT. My two cents.

    XHTML media types

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by bdl View Post
    Using XHTML is not a more strict doc type if you have to serve it as "text/html", which must be done because stupid IE doesn't recognize "application/xhtml+xml". Until everyone is using a browser that recognizes the proper XHTML mime type, use HTML STRICT. My two cents.

    XHTML media types
    I think it's at least a little more strict:
    The Most Important Differences:
    XHTML elements must be properly nested
    XHTML elements must always be closed
    XHTML elements must be in lowercase
    XHTML documents must have one root element
    from w3schools.

    Maybe we'll agree to disagree?

    I think if nothing else that the proper nesting is important enough to warrant the switch.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    New Coder
    Join Date
    Jan 2006
    Location
    South Central, KS
    Posts
    81
    Thanks
    2
    Thanked 2 Times in 2 Posts
    I have validated it (ignoring the incorrect doctype when first i sent you to the site) It validates fine. Still, if i remove the doctype, the CSS goes wonky.


    Quote Originally Posted by CFMaBiSmAd View Post
    Did you actually go to the w3.org validator site? You can copy/paste HTML and CSS.

  • #12
    New Coder
    Join Date
    Jan 2006
    Location
    South Central, KS
    Posts
    81
    Thanks
    2
    Thanked 2 Times in 2 Posts
    I do try to put the type into the script tags. but that's not an issue as other then short inline scripts 99% of all JS in my site is external... the code in question is external... and the script tag that loads it uses the type...

    there are two scripts that i have found that don't act as usual... they are fairly large class objects so posting them here would be fairly long and involved.

    Quote Originally Posted by Rowsdower! View Post
    Is your javascript entered like this:
    Code:
    <script>
    ...blah blah blah...
    </script>
    Or like this:
    Code:
    <script type="text/javascript">
    ...blah blah blah...
    </script>
    It should look like the second example. If that's not how it is that might be the problem when a doctype is concerned.

    P.S. And which script is breaking? All of them? Just one? If just one please specify.

  • #13
    New Coder
    Join Date
    Jan 2006
    Location
    South Central, KS
    Posts
    81
    Thanks
    2
    Thanked 2 Times in 2 Posts
    My code validates under Transitional - i still have issues with either the script or the css depending on the existance of a DOCTYPE tag.

    Can we talk theory here... why would removing the doctype change the way the CSS loads?

    also, i am interested in your comment about not putting language in the script tag, this is something that i do... do. why would i not want to?

    -Echo

    Quote Originally Posted by bdl View Post
    I don't think my answer was directed wrongly; if you fix your DOCTYPE and work on using valid code, then your CSS and JS problems should go away.

    Make sure you're NOT using the "language" attribute of the SCRIPT tag, and either omit the "type" attribute or have it set to "text/javascript". CSS should be external if at all possible and override some behavior in a proper CSS tag in the document HEAD.

  • #14
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by voxecho View Post
    I do try to put the type into the script tags. but that's not an issue as other then short inline scripts 99% of all JS in my site is external... the code in question is external... and the script tag that loads it uses the type...

    there are two scripts that i have found that don't act as usual... they are fairly large class objects so posting them here would be fairly long and involved.
    So you're saying it's two of these that are not working?
    Code:
    <script src="/assets/js/dynamicJSFiles/e64f9ce2470a3e033c453ba1fa4fe7b6.js" type="text/javascript" language="javascript"></script>
    <script src="/assets/js/pageObjects/layout.js" type="text/javascript" language="javascript"></script>
    <script src="/assets/js/pageObjects/default.js" type="text/javascript" language="javascript"></script>
    And all of these are presumed to be working as desired?
    Code:
    <script>
    	swfobject.embedSWF("/assets/media/lowenFlash.swf?cFor=newItem", "FrontPageFlashObjectLayer", "500", "300", "8.1.1", "/inc/swf/expressInstall.swf");
    </script>
    <script type="text/javascript">
    	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    	document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    	var pageTracker = _gat._getTracker("UA-7015191-2");
    	pageTracker._initData();
    	pageTracker._trackPageview();
    </script>
    Am I understanding you correctly?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #15
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    @vox: Removing a Doctype forces a browser into "quirks" mode, sort of like a legacy compatibility mode, if you will. It will then render your code as if it came from the depths of the web long before the web standards movement gained some ground.

    @bdl: Technically, the root identifier should match letter to letter the way you've written it, so [icode]<!DOCTYPE HTML ...>[/code] and <html> is slightly wrong. In practice, it makes no difference.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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