IE8 Doctype?

[zenthoef]

I believe IE8 requires a different doctype, and that previous doctypes are now legacy in IE8. I suspect I am having problems with my site due to a legacy doctype. But I am uncertain what that doctype is.

Can someone tell me what it is or where to find information about it? I've been looking all over the place with the limited amount of time I have and have not found anything...

Thanks!

[Jeff Mott]

There's no new doctype, but there is a compatibility mode META tag. See http://blogs.msdn.com/ie/archive/200...mulateie7.aspx

[zenthoef]

Well, I'm clearly showing my ignorance on this issue...

Is there a proper doctype to use then? I am using the .htaccess method to emulate IE7. However, I'd really prefer for my site to work in IE8 without the compaibility mode view. The only thing that is not working on it is some JavaScript. Are there are any good resources that talk about how to implement JavaScript in IE8 so that the site can run in IE8 without compatibility mode view?

Thanks!

[felgall]

The HTML 4.01 strict doctype is still the latest one.

Most JScript should run the same in IE8 as it did in IE7 or IE6 so if you have something that is not working in IE8 but does work in other browsers then it is that particular code that would need fixing and exactly what the fix would be would depend on what it is supposed to be doing.

[TheBearMay]

Javascript in IE8 does seem to generate more errors than before. Most of them appear to be things that FF didn't allow though, so if you were coding for FF compatibility there are a lot fewer. There are a few errors that FF is fine with though, and I'm trying to get a handle on what the pattern there is.

[zenthoef]

Maybe someone can tell me what, if anything, is wrong with this JavaScript and associated HTML. This is basically a rollover for the titleX.jpg image and is coupled with the imagemenu at http://www.phatfusion.net/imagemenu/. I have made changes from the imagemenu code, but the bulk of what I am doing (especially from a JavaScript perspective) is below:

Here is the HTML from my site for the relevant part:

<div class="floatArea">
	<div class="genericBorder" style="overflow:hidden; width:480px; height:280px;">
		<div id="imageMenu">
			<ul>				
				<li class="featured1">
					<a href="/index.php?act=1" onmouseover="activate1('title')" onmouseout="deactivate1('title')">
						Item One
					</a>
				</li>								
				<li class="featured2">
					<a href="/index.php?act=2" onmouseover="activate2('title')" onmouseout="deactivate1('title')">
						Item Two
					</a>
				</li>
				<li class="featured3">
					<a href="/index.php?act=3" onmouseover="activate3('title')" onmouseout="deactivate1('title')">
						Item Three
					</a>
				</li>
				<li class="featured4">
					<a href="/index.php?act=4" onmouseover="activate4('title')" onmouseout="deactivate1('title')">
						Item Four
					</a>
				</li>
				<li class="featured5">
					<a href="/index.php?act=5" onmouseover="activate5('title')" onmouseout="deactivate1('title')">
						Item Five
					</a>
				</li>
			</ul>
		</div>
		<div>
			<img src="featured/title0.jpg" alt="Title Bar" name="title" width="480" height="50"/>			
		</div>
	</div>
	<script type="text/javascript">
		window.addEvent('domready', function(){var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:300, border:2, onOpen:function(e,i){window.location=(e);}});});
	</script>
</div>

Here is the associated javascript file:

if(document.images){
	title0 = new Image();
	title0.src = "featured/title0.jpg";
	title1 = new Image();
	title1.src = "featured/title1.jpg";
	title2 = new Image();
	title2.src = "featured/title2.jpg";
	title3 = new Image();
	title3.src = "featured/title3.jpg";
	title4 = new Image();
	title4.src = "featured/title4.jpg";
	title5 = new Image();
	title5.src = "featured/title5.jpg";
}

function activate1(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "1.src");
	}
}

function activate2(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "2.src");
	}
}

function activate3(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "3.src");
	}
}

function activate4(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "4.src");
	}
}

function activate5(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "5.src");
	}
}

function deactivate1(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "0.src");
	}
}

[TheBearMay]

Looks like addEvent is no longer supported, could try something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
if(document.images){
	title0 = new Image();
	title0.src = "featured/title0.jpg";
	title1 = new Image();
	title1.src = "featured/title1.jpg";
	title2 = new Image();
	title2.src = "featured/title2.jpg";
	title3 = new Image();
	title3.src = "featured/title3.jpg";
	title4 = new Image();
	title4.src = "featured/title4.jpg";
	title5 = new Image();
	title5.src = "featured/title5.jpg";

}

function activate1(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "1.src");
	}
}

function activate2(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "2.src");
	}
}

function activate3(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "3.src");
	}
}

function activate4(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "4.src");
	}
}

function activate5(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "5.src");
	}
}

function deactivate1(image_name){
	if (document.images){
		document[image_name].src = eval(image_name + "0.src");
	}
}

</script>
</head>
<body>
<div class="floatArea">
	<div class="genericBorder" style="overflow:hidden; width:480px; height:280px;">
		<div id="imageMenu">
			<ul>				
				<li class="featured1">
					<a href="/index.php?act=1" onmouseover="activate1('title')" onmouseout="deactivate1('title')">
						Item One
					</a>
				</li>								
				<li class="featured2">
					<a href="/index.php?act=2" onmouseover="activate2('title')" onmouseout="deactivate1('title')">
						Item Two
					</a>
				</li>
				<li class="featured3">
					<a href="/index.php?act=3" onmouseover="activate3('title')" onmouseout="deactivate1('title')">
						Item Three
					</a>
				</li>
				<li class="featured4">
					<a href="/index.php?act=4" onmouseover="activate4('title')" onmouseout="deactivate1('title')">
						Item Four
					</a>
				</li>
				<li class="featured5">
					<a href="/index.php?act=5" onmouseover="activate5('title')" onmouseout="deactivate1('title')">
						Item Five
					</a>
				</li>
			</ul>
		</div>
		<div>
			<img src="featured/title0.jpg" alt="Title Bar" name="title" width="480" height="50"/>			
		</div>
	</div>
	<script type="text/javascript">
		if (window.attachEvent) {
			window.attachEvent('ondomready', function(){var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:300, border:2, onOpen:function(e,i){window.location=(e);}});});
		} else if (window.addEventListener) {
			window.addEventListener("DOMContentLoaded", function(){var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:300, border:2, onOpen:function(e,i){window.location=(e);}});}, false);
		} else alert("Can't add event listener");
	</script>
</div>
</body> 
</html>