Ever been annoyed by Blackboard Vista’s (or Campus Edition 6+’s) rendering of your XHTML + CSS web pages? Yeah, me too–especially on Internet Explorer. This happens because Bb Vista triggers a browser’s quirks mode in spite of DOCTYPEs and validated markup.
More than just troublesome for pretty CSS-based pages, quirks mode, triggered on standards-compliant pages, can negatively affect the usability and functionality of the learning experience. For example, we use an inline quizzing Javascript that renders questions and answer choices and feedback based on standards mode CSS. In quirks mode this self-assessment tool is useless.
Blackboard Was Made For Quirks
Basically quirks mode means the browser thinks your web skills are not up to snuff, and the browser therefore renders your CSS in a non-standard fashion. Quirks mode is triggered when a DOCTYPE, e.g.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
…is missing, or invalid, or unknown, or not where it should be (i.e. the first line of the document).
But even if you’ve been careful to put a valid DOCTYPE into your web pages, once it’s loaded up into Bb Vista and linked to, either from a Folder or a Learning Module, the browser will go into quirks mode. Why does this happen? Simple: Bb Vista inserts XHTML and JavaScript at the beginning of all web pages onload. 140+ lines of it, to be exact. It’s an odious thing to do, but, what do you expect? It’s Blackboard.
It may (or may not) be important to note that this does not happen when viewing a page in the File Manager–only when a page is loaded from a link within the course.
What You Can Do
Not much. And yet this could be a big issue for Internet Explorer users (FireFox renders page in quirks mode [not "Almost Standards Mode" as I'd hoped], yet most standards-compliant XHTML and CSS still render well).
And though most users are still on IE 6 or 7 I had some hope for a way out with Internet Explorer 8. You see, Microsoft promised that “a page explicitly opts into standards mode” when it includes “a metatag in the page that specifies IE=8 or IE=EmulateIE8″. For example:
<meta http-equiv="X-UA-Compatible" content="IE=IE8" />
In practice, however, this META tag alone does not force IE8 into standards mode in Bb Vista–the misplaced XHTML is apparently too much for IE8 to ignore.
So the most practical solutions I can think of are:
-
Write custom CSS for Blackboard that renders (or re-renders) the page according to the quirks mode box model. This could be done using Internet Explorer conditional comments, for example:
<!--[if IE ]> <link href="ie-quirks.css" rel="stylesheet" type="text/css" /> <![endif]-->I haven’t yet considered what CSS rules would need to be written to accommodate this, but if it was possible this seem like the most robust and efficient solution.
- Rewrite the page with Javascript. After Bb has loaded (or begun to load) the page, Javascript triggers a full rewrite of the page, either wiping out or rewriting the Bb XHTML and Javascript in a more appropriate location (e.g. in a targeted, ID’ed element). I’ve asked one of my developers to try this out today, but already fear the additional load time it might put on the Bb-hosted page.
Any other ideas?
If this were only about appearance I wouldn’t be raising a fuss, but this can and does affect the usability of certain e-learning tools, and forces developers to ask, “How will this work in Blackboard?” yet again.
