IE issue with HTML 5 doctype

341 views
Skip to first unread message

Roberto

unread,
Jun 1, 2012, 11:11:54 AM6/1/12
to intersys...@googlegroups.com
I placed this in the back burner and now I need to address it.

I am creating a doctype of HTML 5 for our pages but it seems that IE is not playing nice. Viewing the pages in IE, the layout is not properly aligned. Viewing it in Chrome, Safari (PC), Safari (iPad), Firefox, and Opera, everything looks the way the layout was designed.

Upon analyzing it, it seems that IE is going into some kind of "compatible mode". I'm still not clear as to what this is.

How can I fix this issue?

I know Dawn's been working with HTML 5 and the other day she had some conditional browser codes within her page...is this what I need to do with IE?

-Roberto




Dawn Wolthuis

unread,
Jun 1, 2012, 11:23:05 AM6/1/12
to intersys...@googlegroups.com
I learned a ton from html5boilerplate.com. There is a new one by these same (google) folks at  http://www.html5rocks.com/ 

I might be able to help a little on this one, but I have all but ditched IE6 at this point, ignoring the fact that my page has issues with two of the inline-blocks where the work-around doesn't seem to work. IE7 is better than IE6, but if the user is not running IE7 you do not want newer versions of IE to switch into compatibility mode (IE7), which is effectively keeping some of the bugs from IE6 in order to be backward-compatible. To keep the browser from going into compatibility mode, you can add something to a meta tag. We have the following snippets in our template page, including output of the <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />  tag. The IE=edge is the thing that tells IE to run in its highest mode, not in compatibility mode. 

/// Include a doctype
Parameter HTMLDTD = 1;

//Parameter HTMLDOCTYPE As STRING = "<!DOCTYPE html>";

/// Override the default doctype to get an html5 doctype
Parameter HTMLDOCTYPE As COSEXPRESSION = "..H5BPDocType()";

/// If defined, this string will be written as attributes within the html element at
/// the top of the page.
Parameter HTMLATTRS As STRING = "class=""no-js"" lang=""en""";

ClassMethod H5BPDocType() As %String
{
    lf = char(13)
    doctype="<!doctype html>" : lf
    doctype := '<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->' : lf
    doctype := '<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->' : lf
    doctype := '<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->' : lf
    doctype := '<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->' : lf
    return doctype
}

Method %OnDrawHTMLMeta() As %Status
{
    print '<meta charset="utf-8" />'
    print '<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />'
    return 1
}

/// Add the <meta>, <link>, and <script> tags to the head, others are in Component.endScripts
/// See html5boilerplate.com for more information
Method %OnDrawHTMLHead() As %Status
{
    print '<meta name="description" content="'
    print @ME->MetaDescription
    print '" />'
    * address viewport when working on mobile devices
    * print '<meta name="viewport" content="width=device-width" />'
    print '<meta name="msvalidate.01" content="23B6217D8FA57FA757CBA3E70FBE1011" />'
    * jQuery css for tabs
    print '<link href="smoothness/jquery-ui-1.8.17.custom.css" type="text/css" rel="stylesheet" />'
    * this is our primary css for all pages with each page having an additional option css document
    print '<link href="page-template.css" type="text/css" rel="stylesheet" />'
    * the following is to give rounded corners to buttons in ie9
    * In the future, should use html5boilerplate practice with conditional comments for IE
    ie9 = '<!--[if gte IE 9]>'
    ie9 := '<style type="text/css">'
    ie9 := '.button, .button.hover, .button.active { filter: none; }'
    ie9 := '</style>'
    ie9 := '<![endif]-->'
    print ie9
    moreCSS = %page->MoreCSS()
    if moreCSS # "" then
        print moreCSS
    end
    * From the html5boilerplate, modernizr must be in the head section, other scripts at the end
    print '<script src="modernizr-2.0.6.min.js"></script>'
    return 1
}


-Roberto




--
You received this message because you are subscribed to the Google Groups "InterSystems: Zen Community" group.
To post to this group, send email to InterSys...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-Z...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/InterSystems-ZEN?hl=en
Zen Community Terms and Conditions: http://groups.google.com/group/InterSystems-ZEN/web/community-terms-and-conditions



--
Dawn M. Wolthuis

Take and give some delight today

Bill McCormick

unread,
Jun 1, 2012, 12:31:04 PM6/1/12
to <intersystems-zen@googlegroups.com>
We have had to force IE 9 to render in IE 9 mode as well in some of our pages. 

Dawn Wolthuis

unread,
Jun 1, 2012, 12:51:15 PM6/1/12
to intersys...@googlegroups.com
Yes, I have not had to do that yet, but at some point we will add this in the http header, I just don't know how to do that yet (on the to-figure-out list).  --dawn

X-UA-Compatible: IE=edge,chrome=1

Derek Day

unread,
Jun 1, 2012, 12:57:24 PM6/1/12
to intersys...@googlegroups.com
You should be able to access the %response object (an instance of %CSP.Response) any time during page processing, because all of Zen's server runtime occurs prior to the HTTP headers being output.

In other words %OnPreHttp method or %OnAfterCreatePage should be fine (the former is probably more appropriate). 

~Derek

Dawn Wolthuis

unread,
Jun 1, 2012, 5:31:43 PM6/1/12
to intersys...@googlegroups.com
Ah, great. I added 

Great! I added the line

     %response->SetHeader("X-UA-Compatible", "IE=edge,chrome=1")

to the %OnPreHTTP() method in every page and it works like a charm!

So now I also know how to set the Expires valud. Someday I'll figure out if Expires should go on the page and all of the resources. At this point I am ignoring that "F" I get from YSlow on that front.

Have a great weekend!  --dawn

Roberto

unread,
Jun 12, 2012, 9:31:33 AM6/12/12
to intersys...@googlegroups.com
Hi everybody,

Thanks for the responses. I haven't been able to respond back because I've been so busy.

Dawn - we can't use HTMLATTRS yet because we are still using 2011 in our development server (although our production server that will house these pages is currently now on 2012).

Also, I started analyzing HTML5BOILERPLATE to see how we can incorporate this in our pages.

So much technology...so little time!

-Roberto
~Derek


X-UA-Compatible: IE=edge,chrome=1

To post to this group, send email to InterSystems-ZEN@googlegroups.com
To unsubscribe from this group, send email to InterSystems-ZEN-unsubscribe@googlegroups.com

--
You received this message because you are subscribed to the Google Groups "InterSystems: Zen Community" group.
To post to this group, send email to InterSystems-ZEN@googlegroups.com
To unsubscribe from this group, send email to InterSystems-ZEN-unsubscribe@googlegroups.com
--
Dawn M. Wolthuis

Take and give some delight today

--
You received this message because you are subscribed to the Google Groups "InterSystems: Zen Community" group.
To post to this group, send email to InterSystems-ZEN@googlegroups.com
To unsubscribe from this group, send email to InterSystems-ZEN-unsubscribe@googlegroups.com

--
You received this message because you are subscribed to the Google Groups "InterSystems: Zen Community" group.
To post to this group, send email to InterSystems-ZEN@googlegroups.com
To unsubscribe from this group, send email to InterSystems-ZEN-unsubscribe@googlegroups.com

Dawn Wolthuis

unread,
Jun 12, 2012, 9:52:08 AM6/12/12
to intersys...@googlegroups.com
I have HTMLATTRS in 2010.2.1. I do have a couple of ad hocs, so maybe it came in one of those (but I don't think so).

I did make one change to the delivered abstractPage after loading the ad hocs so that immediately following the head it does the callback that is in 2012. That is the only change I have made to any of the delivered code in Cache'.

    Set tSC = ..%OnDrawHTMLMeta()
     
Yes, there is a ton in here. It took me a while, but we now have a lot of the boilerplate into our pages including modernizr, the conditional comments on the html tag (which we are now using in our css with .ie6 and .ie7 in front of some rules, thereby avoiding some of the ugly css hacks), the %OnPreHTTP() statement (in mvbasic) 

%response->SetHeader("X-UA-Compatible", "IE=edge,chrome=1")

Plus jQuery libraries. Yes, it was quite a trip to this point, but I really do think it will pay off for mobile as well as maintainability across browsers. It is also easier to work with a web designer who knows css now that we have a doctype and have removed the tables from our template (we still have many within individual pages, but that is working). 

I'm happy to share anything I can. Good luck!  --dawn

To post to this group, send email to InterSys...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-Z...@googlegroups.com

Roberto

unread,
Jun 12, 2012, 9:57:38 AM6/12/12
to intersys...@googlegroups.com
Ooops, I meant to say HTMLDOCTYPE!

I need that to do the conditionals for IE.

I'm going on vacation in 2 weeks...I'll fully check out HTML5BOILERPLATE then!

Yes lots of technology out there...on a personal project, I'm learning a couple of things outside of Cache/Zen - node.js, require.js, CouchDB, CodeIgniter...too much technology!

Help!!!!! LOL...

-Roberto

Dawn Wolthuis

unread,
Jun 12, 2012, 10:41:13 AM6/12/12
to intersys...@googlegroups.com
You can either request an ad hoc or add in the code from 2012 (I started with the latter then got the former) for the doctype parameter.  

I'd suggest ignore couchdb for now as it lacks the maturity of cache' unless you know of some feature you need that is lacking in cache but found in couchdb. node.js is if interest to me too but everything on that front looks like reinventing the wheel at this point. When the wheel is there it might be just the right one, however.  I would like to do our pages with an MV data model and js in the middle and front-end.  --dawn

Typed on a mobile keyboard
To post to this group, send email to InterSys...@googlegroups.com
To unsubscribe from this group, send email to InterSystems-Z...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages