Learn VBA & Macros in 1 Week!

JavaScript - Div Widths And Doctype

Full Excel VBA Course - Beginner to Expert

Div Widths And Doctype	View Content

So I didn't know whether to put this in HTML & CSS or here. So I'm just going to put it here and the mods can move it if needed.

So I had this script working for auto width of a DIV, then I added DOCTYPE to the top of my document, now it won't change the width ha ha. I have tried with all DOCTYPE's and same thing.

The JS I am using is:

Code:

window.onload=function(){
document.getElementById("right").style.width= + screen.width - 193;
}

As I said this worked before I added DOCTYPE to the top of the HTML. But when I add any one of the DOCTYPES it stops working.

Any ideas?

Full Excel VBA Course - Beginner to Expert

Syncing Table Column Widths

Similar Tutorials

View Content

I am attempting to sync the column widths of two tables. Currently, I have a working method that uses the DOM to traverse each cell of a given row of two tables and set the style.width element to the largest offsetWidth of the the two cells. However, when the divs my tables are in are given an overflow: auto property, causing scrollbars, the widths no longer sync. They style.width elements are still being set (I'm using a debugging method to check the style.width elements for their values), but no sizes are changing. Ideas?

ASPX
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@language = "C#" inherits="APTEIT.Default"%>
<!--
Default.aspx
Author: Steven T. Norris	Created: 2/28/2012
Last Updated:	Updated By: 
Default page of APTEIT
-->
<link rel="stylesheet" type="text/css" href="CSS/APTEIT.css"/>
<script type="text/javascript" src="Utilities/Javascript/Utilities.js"></script>
<script type="text/javascript" src="Utilities/Javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	HtmlLoggerControlInstance.getInstance().setLevel("debug",HtmlLogger.ALL);
	syncColumnWidths("headers",null,"data",null);
});
</script>
<html>
	<head>
		<title>APTEIT</title>
	</head>
	<body>
		<!--#include file="Utilities/Debug.aspx"-->
		<img src="Images/logo.png" />
		<div id="headersDiv">
			<table class="tbl" id="headers">
				<tr>
					<td>head1</td>
					<td>head2reallyreallylong</td>
					<td>hd3</td>
					<td>4</td>
				</tr>
			</table>
		</div>
		<div id="dataDiv" onscroll="syncScrolling('dataDiv','headersDiv');">
			<table class="tbl" id="data">
			<tr>
				<td>alsdja;lksdjaljkdf</td>
				<td>kdki</td>
				<td>k39</td>
				<td>lsjdl</td>
			</tr>
			<tr>
				<td>alsdja;lksdjaljkdf</td>
				<td>kdki</td>
				<td>k39</td>
				<td>lsjdl</td>
			</tr><tr>
				<td>alsdja;lksdjaljkdasdfaf</td>
				<td>kdki</td>
				<td>k39</td>
				<td>lsjdl</td>
			</tr><tr>
				<td>alsdja;lksdjaljkdf</td>
				<td>kdki</td>
				<td>k39</td>
				<td>lsjdl</td>
			</tr><tr>
				<td>alsdja;lksdjaljkdfs</td>
				<td>kdki</td>
				<td>k39</td>
				<td>lsjdl</td>
			</tr><tr>
				<td>alsdf</td>
				<td>kdki</td>
				<td>k39</td>
				<td>lsjdl</td>
			</tr>
			</table>
		</div>
	</body>
</html>

CSS
Code:

/*
APTEIT.css
Author: Steven T. Norris     Created: 2/28/2012
Updated By:					 Last Updated:
Copyright 2012

CSS stylesheet for default page of APTEIT
*/

/*Utilities Styles*/
.debug
{
	display:block;
}
.LOG_INFO
{
	color:blue;
}

.tbl
{
    border-collapse:collapse;
}
.tbl tr td
{
    border-width:1px;
    border-color:black;
    border-style:solid;
}

#headersDiv
{
    max-width:200px;
    overflow:hidden;
}
#dataDiv
{
    max-width:200px;
    overflow:auto;
}
#headers
{
    table-layout:fixed;
}
#data
{
    table-layout:fixed;
}

Javascript
Code:

/*
Utilities.js
Author: Steven T. Norris     Created: 3/2/2012
Updated By:					 Last Updated:
Copyright 2012

Utility functions
Logs to debug window if using Debug.aspx or a logger named 'debug' with the HtmlLoggerControlInstance
*/

/*
Syncs column sizes between two tables. 

@param string table1 : First table to sync
@param int table1HeadRow : Row to use as column width sync for table1 (if null, uses first row)
@param string table2 : Second table to sync
@param int table2HeadRow : Row to use as column width sync for table2 (if null, uses first row)
*/
function syncColumnWidths(table1, table1HeadRow ,table2, table2HeadRow){
	UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths-")
	if((typeof table1 == "string" ||table1.constructor == String) && (typeof table2 == "string" ||table2.constructor == String)
		&& (typeof table1HeadRow == "number" || table1HeadRow == null) && (typeof table2HeadRow == "number" || table1HeadRow == null)){
		tableOne = document.getElementById(table1);
		tableTwo = document.getElementById(table2);
		
		//Set row to check and get row
		if(table1HeadRow == null){
			t1Start = 0;
		}
		else{
			t1Start = table1HeadRow;
		}
		if(table2HeadRow == null){
			t2Start = 0;
		}
		else{
			t2Start = table2HeadRow;
		}
		t1Row = tableOne.rows[t1Start];
		t2Row = tableTwo.rows[t2Start];
		
		//Get end number
		if(t1Row.cells.length < t2Row.cells.length){
			tEnd = t1Row.cells.length;
		}
		else{
			tEnd = t2Row.cells.length;
		}
		
		//Sync widths
		for(i = 0; i < tEnd; i++){
			UtilLogger.log(HtmlLogger.CONFIG,"syncColumnWidths:t1 width:"+t1Row.cells[i].offsetWidth+"   t2 width:"+t2Row.cells[i].offsetWidth);
			if(t1Row.cells[i].offsetWidth > t2Row.cells[i].offsetWidth){
				t2Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
				t1Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
				UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t2 width to t1");
				UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+"    t2 style width:"+t2Row.cells[i].style.width);
			}
			else{
				t1Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
				t2Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
				UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t1 width to t2");
				UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+"    t2 style width:"+t2Row.cells[i].style.width);

			}
		}
		
	}
	else{
		alert("syncColumnWidths takes parameters (string, int|null, string, int|null)");
	}
	UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-");
}

/*
Syncs scrolling of two divs. Meant to be part of onscroll event for primary div 

@param string div1 : primary div. normally the div who's onclick event houses this method
@param string div2 : secondary div
*/
function syncScrolling(div1,div2){
	if((typeof div1 == "string" || div1.constructor == String) && (typeof div2 == "string" || div2.cosntructor == String)){
		$("#"+div2).scrollLeft($("#"+div1).scrollLeft());
	}
	else{
		alert("syncScrolling takes parameters (string, string)");
	}
}

Doctype With Js

Similar Tutorials

View Content

Hey, might be a stupid question, but which is the best DOCTYPE to use with JavaScript?

Just validating now and its telling me that the<body onLoad="startclock()"> onLoad attribute is not supported....

Anyone understand what it's asking me to do?

Thanks

Doctype Killing Js In Ie

Similar Tutorials

View Content

I was roughing out a feature I want to add to my site in notepad with no doctype declared.

I got it just how I wanted, then realized it didn't work in IE. I added a doctype, it validates at xhtml strict, but it killed IE, while it started adding round corners in IE which wasn't working with no doctype...but now my JS isn't working...

So I lost functionality of the JS while adding the round corner style that wasnt working when the JS was mostly working...

FF works fine every damn way of course....

I uploaded it to http://pugetsoundtraining.com/Portfolio/spriteTest.html

Also when it was functioning, the lower set of icons background wasn't showing.

You can load that link ^^ in FF to see exactly what I'm going for....it works in ff

css:
Code:

body {
  margin: 0px;
  font-family: "Georgia", serif;
} 
/* Give headings their own font */ 
h1, h2, h3, h4 {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
 
/* Main content area */ 
#content {
position:absolute;
top:70px;
left:500px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
 
/* Header/footer boxes */ 
.wideBox {
  clear: both;
  text-align: center;
  border: 1px solid #333;
}
 
.wideBox h1 {
  font-weight: bold;
  margin: 0px;
  color: #666;
  font-size: .5em;
} 
/* Slots for final card positions */ 
#cardSlots {
  margin: 50px auto 0 auto;
  background: #ddf;
} 
/* The initial pile of unsorted cards */ 
#cardPile {
 // margin: 0 auto;
 background: #ffd;
}
 
#cardSlots, #cardPile {
  width: 250px;
  height: 120px;
  border: 3px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;   
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8); 
}
 
/* Individual cards and slots */ 
#cardSlots div, #cardPile div */
  float: left;
  -moz-width:35px;
  -moz-height:35px;
  width: 35px;
  height: 35px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 5 5 5 5px;
 // background: #fff;
} 
#cardSlots div:first-child, #cardPile div:first-child {
  margin-left: 0px;
}
#cardSlots div.hovered {
  background: #aaa;
}
#cardSlots div {
  border-style: dashed;
} 
#cardPile div {
  background: #666;
  color: #fff;
  font-size: 5px;
  text-shadow: 0 0 3px #000;
}   
#cardPile div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  opacity:0.5;
  filter:alpha(opacity=50); /* For IE8 and earlier */
}
 
#card1.ui-draggable{background:url(iconSprite2.png) 0px 0px no-repeat;}
#card2.ui-draggable{background:url(iconSprite2.png) -36px 0px no-repeat; }
#card3.ui-draggable{background:url(iconSprite2.png) -73px 0px no-repeat; }
#card4.ui-draggable{background:url(iconSprite2.png) -108px 0px no-repeat; }
#card5.ui-draggable{background:url(iconSprite2.png) -143px 0px no-repeat; }
#card6.ui-draggable{background:url(iconSprite2.png) -178px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -213px 0px no-repeat; }
#card7.ui-draggable{background:url(iconSprite2.png) -250px 0px no-repeat; }
#card8.ui-draggable{background:url(iconSprite2.png) -285px 0px no-repeat; }
#card9.ui-draggable{background:url(iconSprite2.png) -319px 0px no-repeat; }
#card10.ui-draggable{background:url(iconSprite2.png) -353px 0px no-repeat; }
 
/* "You did it!" message */
#successMessage {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

#displayCardNum {
	height:400px;
	width:500px;
	position:absolute;
	top:80px;
	right:25px;
}
#score {
	width:200px;
	font-size:25px;
	height:50px; 
	position:absolute;
	top:300px;
	right:300px;
}
#status {
	width:300px;
	font-size:25px;
	height:50px; 
	position:absolute;
	top:150px;
	right:200px;
}

html:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>XHTML 1.0 Strict validated</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />

<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="game.js"></script>
 
<script type="text/javascript"> 
</script>
</head>


<body>
<div id="content">
  <div id="cardPile"> </div>
  <div id="cardSlots"> </div>
 
  <div id="successMessage">
    <h2>You did it!</h2> 
    <button onclick="init()">Play Again</button>
  </div>

  <div id="reset">
    <h2>Reset</h2>
    <button onclick="init()">Reset?</button>
  </div>
</div>
<div id="displayCardNum">Error Msg: </div>
<div id="score">Sco  <span id="myTextToShow"></span>
 </div>
<div id="status"></div>
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
  
</body>
</html>

javascript:
Quote:
var correctCards = 0;
var points = 0;
$( init );

function init() {
// Hide the success message
$('#successMessage').hide();
$('#successMessage').css( {
left: '580px',
top: '250px',
width: 0,
height: 0
} );

//Card Game Below
// Reset the game
correctCards = 0;
points=0;
document.getElementById('score').innerHTML = "Sco "+ points;
var status;

$('#cardPile').html( '' );
$('#cardSlots').html( '' );

// Create the pile of shuffled cards
var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
numbers.sort( function() { return Math.random() - .5 } );

for ( var i=0; i<10; i++ ) {
$('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
containment: '#content',
stack: '#cardPile div',
cursor: 'move',
revert: true
} );
}

//Create sprite background offset for card slots
var pos = [ '0px 0px', '-36px 0px', '-73px 0px', '-108px 0px', '-143px 0px', '-178px 0px', '-250px 0px', '-285px 0px', '-319px 0px', '-353px 0px' ];

// Create the card slots
var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
for ( var i=1; i<=10; i++ ) {
$('<div style="background:url(iconSpriteGrey.png)' + pos[i-1] +' no-repeat;>"' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
}

//Handle the card drop
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );

// If the card was dropped to the correct slot,
// change the card colour, position it directly
// on top of the slot, and prevent it being dragged
// again

if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
win();
//alert('you just dropped ' + cardNumber + " in the correct spot, slot number: " + slotNumber);
}
else if(slotNumber != cardNumber){
updateCards();
fail();
};

function updateCards() {
document.getElementById('displayCardNum').innerHTML = "Sorry but you tried to place a<b> " + cardNumber + " </b>into a<b> " + slotNumber + "</b> socket";}

function win() {
points+=5;
status=' Win 5 points!';
showScore();
$('#status').fadeIn("slow");
$('#status').fadeOut("slow");
}

function fail() {
points-=3;
status=' lose 3 points!';
showScore();
$('#status').fadeIn("slow");
$('#status').fadeOut("slow");
}
function showScore() {

if(points < 0) {points = 0;}
document.getElementById('score').innerHTML = "Sco "+ points;
document.getElementById('status').innerHTML="Status: <b>" + status + "</b>";

}
// If all the cards have been placed correctly then display a message
// and reset the cards for another go

if ( correctCards == 10 ) {

$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
}
}

Doctype Causes Form To Fail

Similar Tutorials

View Content

Greetings,

I had to add the following DOCTYPE to a webpage in order for IE to parse my page design properly, and this caused the form on the page to fail in FireFox (which works fine without the doctype). The form works fine in IE.

Here is the DOCTYPE I added to the top of the page;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The error log in FireFox says;

frmTest is not defined - Line 30

Here is the block of code it is referring to;

function MoveForward(ipage)
{
if(TestAnswers())
{
frmTest.action.value = 'next';
frmTest.p.value = ipage;
frmTest.submit();
frmTest.cmdNext.disabled = true;
try
{
frmTest.cmdBack.disabled = true;
}
catch(err)
{

}
}

}

Line 30 is: if(TestAnswers())

The opening form code further down the page is;

<form action="stress_test.asp" method="post" name="frmTest" id="frmTest">

I have been up against this for a couple days, any help would be very (very) appreciated.

Regards,
Ross

Doctype Stops This Js From Functioning In Ie

Similar Tutorials

View Content

This <div> layer positioned always at bottom left of the screen on scrolling (and calling some code from labpixies) works well in non-ie browsers, but in ie it requires the omission of the doctype declaration. Why?

Is it possible to fix it so that it works with the doctype in ie?

Code:

<!doctype html>
<html lang="en">

<head>
<title></title>
</head>

<body>

<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
	<div id="menu" style="position: absolute; left: 117px; top: 12px">
		<table border="0" width="18" cellspacing="0" cellpadding="0">
			<tr>
				<td width="100%">
				<a href="javascript:expand();" onfocus="this.blur()">
				<img name="menutop" border="0" src="images/translate.gif" width="23" height="152"></a></td>
			</tr>
		</table>
	</div>
	<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
		<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;">
			<tr>
				<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
				<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
				Gadget by LabPixies.com</a></td>
			</tr>
			<tr>
				<td>
				<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
				</iframe></td>
			</tr>
		</table>
	</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
	screenWidth = screen.width;
	if (screenWidth == 1024)
	{
		var yside = 390;
	}
	else if (screenWidth == 1152)
	{
		var yside = 400;
	}
	else if (screenWidth == 1280)
	{
		var yside = 400;
	}
	else
	{
		var yside = 450;
	}
	if(document.body.scrollTop != "undefined")
		sidemenu.style.top = document.body.scrollTop+yside+'px';
	else
		sidemenu.style.top = window.pageYOffset+yside+'px';
}
setInterval("FixY()",100);
</script>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</body>

</html>

Iframe/doctype Problems In Mozilla

Similar Tutorials

View Content

This is a problem that i have googled for hours and can't find an answer so i resort to asking on here because i found similar question on here.

I have a page i use, It has an iframe on it but it is not regular iframe, The iframe has a resizing script that resizes the height of the iframe to the height of the page being viewed. Using this script it eliminates scrolling!

This has all been working out great but then i realise for it to function properly in IE i need to add a doctype, When i add a doctype to it it functions properly in IE but it doesn't work in firefox. In firefox the frame doesnt resize and it is like 50px height.
I have tried a bunch of different doctypes and they don't work.

This is the problem page (with doctype - works properly only on IE):
http://ww-chat.com/games.php

This is the page without a doctype (Works properly only on FIREFOX - not IE):
http://ww-chat.com/games-nodoctype.php

This is the code that i use for the iframe:

Quote:
<iframe id="games" name="games" src="http://ww-chat.com/games/" frameborder=0 scrolling=no width="990" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('games');}"></iframe>

This is the script that it uses to resize the frame:
http://ww-chat.com/iframeresize.js

I have other iframes on my website which don't use the resize script and they work perfectly fine (with doctype!).

Thanks,
Worldwideebm

Xhtml Doctype And Form Name Attribute In Javascript?

Similar Tutorials

View Content

Hi, I have been attempting to transition to use of xhtml strict doctype and
my text editor, BBEdit (on Mac) tells me, when I ask it to check syntax,
that the attribute 'name' is not allowed in form object, as in any other
form element that I tried to use it in. This begs the question, how do
I script forms with javascript in the context of this doctype? None of
the javascript texts I have address this issue (O'Reilly Rhino book and
others).

I could figure it out, but it appears to be a complicated process, just
doing getElementById() and sorting it out.
Does anyone have a reference to material that deals with this issue?
Or do I just abandon xhtml strict doctypes?

Thanks for time and attention
JK

Script Fails On Firefox With This !doctype Declaration

Similar Tutorials

View Content

<!doctype Html Public "-//w3c//dtd Xhtml 1.0 Strict//en" "http://www.w3.org/tr/xhtml1

Similar Tutorials

View Content

All,
So I have the following code. It works great. When I add this:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It doesn't work. I need it for some aspects of my CSS to work. The code that works without that is:
Code:

<html>
 <script>
function resizeAll( )
{
    var divs = document.getElementsByTagName("div");
    for ( var d = 0; d < divs.length; ++d )
    {
        var div = divs[d];
        if ( div.className == "fn-area" )
        {
			divid = divs[d].getAttribute("id");
			imgid = "Img" + divid;
			var Div1Width, Div1Height;
    		Div1Width = document.getElementById(divid).offsetWidth;
            Div1Height = document.getElementById(divid).offsetHeight;
            document.getElementById(imgid).style.width = Div1Width;
            document.getElementById(imgid).style.height = Div1Height;
        }
    }
}
 </script>
<head>

</head>
<body onLoad="resizeAll()">
<div id="Div1" class="fn-area" style="width:100px;height:100px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv1').style.display='block';" onmouseout="document.getElementById('ImgDiv1').style.display='none';">
<img id="ImgDiv1" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/>
 </div>
 
<div id="Div2" class="fn-area" style="width:300px;height:300px; border:1px solid black;" onmouseover="document.getElementById('ImgDiv2').style.display='block';" onmouseout="document.getElementById('ImgDiv2').style.display='none';">
<img id="ImgDiv2" src="fnclientlib/styles/artwork/creep_stamp5.gif" style="display:none"/>
</div>
</body
</html>