3 Replies Latest reply on Sep 6, 2012 12:57 PM by Rik Ramsay

    Can I use HTML5 and XHTML Transitional on the same website?

    jl2000 Level 1

      Hi -

      I inherited a website here where some of the pages are valid html5 and some are xhtml transitional.  It is OK to leave them like that or should they all be one doctype.  I'm running into a LOT of ugly anomalies on IE9 and I'm wondering if the multiple doctypes are causing them.

      TIA your input.


        • 1. Re: Can I use HTML5 and XHTML Transitional on the same website?
          Rik Ramsay Level 4

          Your index page seems to be using HTML 4 Strict although the DOCTYPE on that page is incomplete. See here for a list of DOCTYPE usages.



          As for the other pages being in HTML5, the DOCTYPE says so but there are no HTML5 tags so there shouldn't be much of an issue. You said you are finding a lot of "ugly anomalies". Can you explain this further and maybe direct us to one of the problem pages? I briefly checked 2 pages in IE9 and they seem to look similar to that of Chrome on OSX.


          But yes, it is normally good practice to have all pages of the site in the one DOCTYPE. Normally this is never an issue as the site is built either using a template or includes for that section of the document which keeps everything consistent.

          1 person found this helpful
          • 2. Re: Can I use HTML5 and XHTML Transitional on the same website?
            jl2000 Level 1

            Thanks for the reply Rik -

            I'm surprised that the index page's DOCTYPE is incomplete.... It was made by HTML Tidy at the W3C's HTML validation page.


            As far as the anamolies the 2 big ones are:

            1-The videos on the home page and the video gallery would not launch.  I'm guessing there was a problem with fancy-box jquery but it is an issue exclusive to IE. 

            2-If you looked at the home page and didn't see this one then join the club (only 2 Win7 IE-using members of the LVA Board saw it) - all of the images that make up the slide show are displayed at once - stacked down the page oblitherating the rest of the content.


            If you bounce around the site (especially to this page and then back to the home page - that's when things start to get shakey.  Page loads slow down and more.  That's when I started to suspect the DOCTYPE.


            What about compatibility mode?  Since that's an IE exclusive meta - maybe that's causing problems because it's being misused. Do I want to use that at all?  How should I use it? (it's very confusing).


            Thanks for your input.


            • 3. Re: Can I use HTML5 and XHTML Transitional on the same website?
              Rik Ramsay Level 4
              1. Viewing through my Virtual Box IE9 I get no issues with your videos - everything works fine. If I turn ON compatibility mode, I get a Flash error but the fancybox is working as it should. What do you see when you click on one of the video links?
              2. I can't see this one and I even turned on compatibility mode etc. Normally this happens when a script hasn't loaded in time. You have a LOT of scripts throughout this site and are placed all over the page - some top, some middle, some bottom. You also have the _js/jquery.js mentioned twice although one is in comments. Try removing that.
              3. I can't replicate that issue either but it is using Flash and the scripts are quite heavy. Your nancy.swf is over 300kb and the jquery ui on the page is 160kb. Using the HTML5 DOCTYPE, I would advise against using any Flash as the iDevices can't see this.


              In general, the pages could do with a lot of tidying up and consistent scripts/css/DOCTYPES on each page. All CSS should be at the top of the page. All JS generally at the bottom but in order - jquery, then jquery ui first and the rest follow. Your direct script actions should always be last on the page (the $(".fancybox").fancybox() etc) but before the ending </body></html>


              Also, try removing the comments from your compatibility meta tag:

              <!--<meta http-equiv="X-UA-Compatible" content="IE=9">-->