Floatbox-- quirk mode ...

Page: 1

Author Post
Registered: Apr 2009
Posts: 28
First, please know that I'm a guy who has "zero" knowledge
of doc types.

I've read your position on quirk mode and the doc type
requirement. None of the (4K) pages on our site contain a doc type.

In testing, I found that a "HTML 4.01 Transitional" displayed most of our
pages accurately-- a few pages within our content manager do not
display properly. Unknown what that issue is.

I removed the 'alert' and found that floatbox does work in FF3, IE6 and IE7
-- although IE7 seems a bit slower.


1. What are the risks of running floatbox like this (quirk mode)?

2. Assuming I can get all pages to display with a doc type...
If I were to install a doc type, 100+ errors are revealed (!)
How much should I be concerned about these errors?

Thanks much.
« Last edit by jmueller0823 on Fri Apr 03, 2009 5:52 pm. »
Registered: Aug 2008
Posts: 3285
When I allow floatbox rendering on quirks mode pages some browsers render ok and some screw up. In particular, IE lays the box out poorly with the content shifted horizontally off-center and the caption and controls too close to the bottom border. IE7 fails to display the translucent overlay.

There are additional layout problems with the upcoming new release that has round corners. For that, the display falls apart more seriously under quirks mode.

So, I don't want people to think floatbox is a piece of crap because it does not layout properly, and I don't want to spend the time or add the code bulk to handle quirks mode layout. Hence the refusal alert on quirks mode pages.

There's probably a plus side to moving all your pages to a proper doctype. That plus would be more reliably consistent rendering and layout across all browsers. But maybe your pages aren't doing anything that would be affected by the layout differences.

When you say 100+ errors, do you mean validation errors or errors encountered by the site visitors? If we're talking validation errors, I wouldn't be overly concerned. Don't get me wrong, I think validation is a very useful tool and having properly validated pages goes a long way towards ensuring that you really are sending the instructions you think you are sending to the browser, and it gives the best chance for browsers to render consistently. I'm all in favour of taking the time to test against a validator and fixing the reported problems. But in the real world, the bottom line is how the site's pages behave in the visitor's browsers. From this perspective, it's an individual choice as to the priority you place on properly validated pages on your site.
Registered: Apr 2009
Posts: 28
Exactly the info I need, thanks.

When you say 100+ errors, do you mean validation errors or errors encountered by the site visitors? If we're talking validation errors,

Not user errors; these would be validation errors.

I found the following doc type to be the "most forgiving"...
would you agree?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Registered: Aug 2008
Posts: 3285
For bringing in old pages to the 21st century, the XHTML 1.0 Transitional is a good choice. But if you're using that, you really should be coding your pages to the xhtml spec (lower case attributes, properly closed) and using the html tag modifiers:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
If the pages are coded to the html spec, the HTML 4.01 Transitional doctype would be a better fit.
(More on html vs. xhtml here.)

But that's just pre-amble to my real recommendation. It may sound odd, but I strongly recommend the new HTML5 doctype declaration. It is simply <!DOCTYPE html>. That's it. Nothing else.

The reason for this recommendation is this:
A valid doctype declaration does only two things, and nothing more. One is, it causes browsers to render in standards mode. The second is, it describes the document to validators so they know how to parse it. But note what it does NOT do: it does not tell browsers how to parse the document. The content-type header sent by your server does that.

The html5 doctype puts all browsers into standards mode, your existing pages weren't coded to any particular doctype from a validation perspective, and you can pick doctype overrides when validating if you like. The simple html5 doctype does the job you want it to, and makes no further statements about the content or structure of your pages - statements which are always ignored and often false.
Registered: Apr 2009
Posts: 28
Great. I appreciate your time on this.
My webshop provider users quirk mode. Is there no way to get floatbox to work?

I tried this:
<a href="4.swf" class="floatbox" rev='theme:black scrolling:no width:350px height:350px padding:0 outerBorder:0 innerBorder:0 caption:`test` shadowType:none hideFlash:true hideJave:true roundCorners:none'>Testlink</a>

And there is no visible layoutproblems, other than IE not fading down the background.
Is there a fix to change the doctype or something :|
Registered: Aug 2008
Posts: 3285
How badly quirks mode breaks depends on which browser you use. Here's fb from a quirks mode page in IE6.

User posted image

Not good. Not good at all. I'm afraid floatbox and quirks mode pages are are oil and water.

But if you turn off all the decoration like you did (no borders, no round corners, no shadows, no padding) you can get a satisfactory, if plain, display. I certainly don't want to recommend this and am a little reluctant to post this hack, because I think it makes floatbox look crappy, and that's bad PR. But you can turn off the quirks mode check by removing or hiding the following lines from near the bottom of floatbox.js:
if (document.compatMode === 'BackCompat') {
alert('Floatbox does not support quirks mode.\nPage needs to have a valid doctype declaration.');

I hope I don't live to regret this suggestion.

Page: 1