Quirks mode for IE, standard for others

Forum Moderators: open

Message Too Old, No Replies

Quirks mode for IE, standard for others

Trigger quirks mode only in IE

ln_tora

5:35 pm on Oct 3, 2005 (gmt 0)

Hello. I've a quick (hopefully) question. Did a search but couldn't find exactly what I was looking for. Basically, I was wondering if there's a way to trigger quirks mode in IE, yet keep it in standard mode for all other browsers?

Robin_reala

7:15 pm on Oct 3, 2005 (gmt 0)

Whack an XML declaration above the DOCTYPE. Don't do this if you're not using XHTML though - you'll have to find some other method.

<?xml version="1.0" encoding="UTF-8"?>

encyclo

1:58 am on Oct 4, 2005 (gmt 0)

Robin_reala's method is dependent on exploiting a bug in IE6 where a full doctype which is not on the first line of a document or is proceeded by other content triggers quirks mode. Note that the bug will be fixedfor the upcoming IE7, so only IE6 will be affected by this (IE5.x obviously has only quirks mode anyway).

If you are using HTML - or XHTML also - you can use a standard HTML comment placed before the doctype:

<!-- this triggers quirks in IE6 only -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

I personally would favor this approach over using an XML declaration which has little relevance in the context of a document served as

text/html

, however the ideal solution would be to fix the underlying problem which is causing you to favor quirks mde in IE.

[edited by: encyclo at 2:02 am (utc) on Oct. 4, 2005]

ln_tora

2:01 am on Oct 4, 2005 (gmt 0)

Thanks for the advice. (It would be nice if IE7 supported the fixed position, then it wouldn't matter as much.)

Robin_reala

6:32 am on Oct 4, 2005 (gmt 0)

IE7 will support fixed.

Encyclo - yep, I'd forgotton that a comment will trigger quirks as well. Much better solution.

MatthewHSE

11:52 am on Oct 4, 2005 (gmt 0)

the ideal solution would be to fix the underlying problem which is causing you to favor quirks mde in IE.

I agree. Not only do you get much more dependable results cross-browser, but you also know your website is more future-compatible than if you depend on quirks mode. I would say its even better to include hacks in your CSS than to deliberately trigger quirks mode - the hacks can easily be removed from a single file at a later date, whereas the HTML comment would have to be removed from every page.

Does anyone know if the comments trick works in IE7? I haven't heard anything about that yet and can't get IE7 running on my W2K box.

ln_tora

2:36 pm on Oct 4, 2005 (gmt 0)

The reason for needing quirks mode is for a css hack on an ie only style sheet. IE6 and below does not support fixed position, but there is a work-around that depends on keeping IE6 in quirks mode. Since all other browsers that I test on support it, I use a separate stylesheet and keep them in standard mode. (With Opera I have to or some of the other styles behave oddly.)

I don't have IE7, and don't know if it's available for public download or still in beta testing, so I can't say what will happen there.

MatthewHSE

3:25 pm on Oct 4, 2005 (gmt 0)

Not to press the issue - it sounds like you understand what's going on here - but surely there's another workable hack that doesn't depend on quirks mode. If you have time, could you post a little bit of relevant code? You've got my curiousity up with this one and I'd be interested to see what's going on.

ln_tora

8:34 pm on Oct 4, 2005 (gmt 0)

There is in fact a workaround that calls for IE6 to stay in standards mode, but the disadvantages there outweighed the one that required quirks mode. It tended to be buggier, and killed the use of absolute positioning. So I went with the other.

The css I'm using is (ie only):


body { 
 margin: 0; 
 padding: 0; 
 background: #dbcbdf url(vine-bg01.gif) repeat-y fixed 100% 0%; 
 overflow: hidden; 
 } 
div#body { 
 height: 100%; overflow: auto; 
 } 
div.ivy-top { 
 position: absolute; top: 0px; left: auto; right: 80px; 
 padding: 0; margin: 0; 
 width: 705px; 
 }

The html I'm using looks as follows:


<body> 
<div class="ivy-top"><img src="ivy-top.gif" width="705" height="92" alt="" /></div> 
<div id="body">...

Cutting out some unnecessary to get to the point. But with the above, any absolute positioned div that falls outside of the #body div acts as a fixed position.