- Doctype Blues In IE6
-
Posted by oVan on Friday, September 16, 2005 | PermaLink | 0 commentsSo you're going to validate your old table-based website with a good HTML validator to make it a bit standard compliance.
First thing you notice is that somehow you didn't set your doctype... No problem, you think, we just paste this suggested doctype declaration and we're all set:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Omg! Your whole layout is screwed up in Internet Explorer 6! Although you clearly specified an old html standard (4.01) and specifically pointed at the "loose" specification at the W3C, it changes the output totally in IE6. Why is that?
Apparently IE6 sometimes switches to standards compliance mode, depending on the doctype specified. The solution for your old table-based website (which you'd better rewrite with proper CSS layout someday anyway) is to use this declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
The subtle difference is that you sometimes shouldn't specify the url of the W3C-dtd if you don't want IE switching into standards compliance mode.
Here's an overview of when IE6 switches to standards compliance mode:DOCTYPE URL Present URL Not Present No DOCTYPE present off off HTML (no version) off off HTML 2.0 off off HTML 3.0 off off HTML 4.0 on on HTML 4.0 Frameset on off HTML 4.0 Transitional on off HTML 4.0 Strict on on XHTML on on XML on on Unrecognized DOCTYPE on on
(Table source: MSDN)
- HOWTO: Resize popup window to fit image
-
Posted by oVan on Thursday, September 15, 2005 | PermaLink | 1 commentsThe following code is my optimized version of a popup script you can find all over the internet (and for which I don't take credit). It mainly fixes two issues: it now better separates between IE, Netscape/Mozilla/Firefox and Opera, and it also fixes a problem with IE6 that behaves strangely when using body.clientWidth and body.clientHeight.
<html>
<head>
<title>AutoSize Browser To Image</title>
<script language='javascript'>
var arrTemp=self.location.href.split("?");
var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
var NS = (navigator.appName=="Netscape")?true:false;
var NS = ((!document.all)||window.opera)?true:false;
function AutoSize() {
var iWidth = (NS)?window.innerWidth:document.documentElement.clientWidth;
var iHeight = (NS)?window.innerHeight:document.documentElement.clientHeight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
self.focus();
};
</script>
</head>
<body bgcolor="#000000" onload="AutoSize();" style="margin:0;padding:0;">
<script language='javascript'>
document.write( "<img src='" + picUrl + "' border='0'>" );
</script>
</body>
</html>