doctype kills firefox layout

**wkrieger** · 07-27-2010 11:28 AM

i've got some simple javascript drag and drop boxes with hover effects. it has mouse event support for both firefox and internet explorer. everything works fine in firefox, but the css :hover effects were not working in ie. after some searching, i found that i needed to specify doctype for :hover to work in ie, so i did. then everything worked great in internet explorer, but the layout is messed up in firefox. specifically, they are not receiving positioning, and it looks like they just stack at the default location.

Code:

<html>

<head>
<style type="text/css">  
div.draggable, div.fixed {
	position:absolute;
	width:270px;
	height:70px;
	padding:10px;
	border:0px;
	color: #ffffff;
	background-color:#313C6F;
}
div.draggable:hover, div.fixed:hover {
	border:2px solid #333333;
	padding:8px;
}
div.fixed {
	background-color:#444444;
}
#follow {
	background-color:#772727;
}
#me {
	background-color:#28682E;
}
#where {
	
}
</style>
<title>Follow Me</title>
<script type="text/javascript"> 
var z = 1; //set initial z-index
onload = init; //run function INIT on load

function init() { //set initial parameters
	boxes = document.getElementsByTagName('div'); //get all divs on page
	var x = 10; //inital position x
	var y = 10; //initial position y
	for (i=0; i<boxes.length; i++) { //loop through all divs
		box = boxes[i]; //set current div
		box.left = x; //store position x
		box.style.left = box.left; //set position x
		box.top = y; //store position y
		box.style.top = box.top; //set position y
		y = y + 100; //next position y
		if (box.className == "draggable") { //if draggable
			if (navigator.appName == "Microsoft Internet Explorer") {
				box.onmousedown = followMeIE;
			}
			else {
				box.onmousedown = followMeFF; //run function FOLLOW ME on mousedown
			}
		}
	}	
}

function followMeFF(e) { //allows draggable divs to follow cursor
	box = this; //set current div
	box.leftLoc = e.clientX-box.left; //locate relative mouse position x
	box.topLoc = e.clientY-box.top; //locate relative mouse position y
	box.style.zIndex = z++; //bring to top
	document.onmousemove = moveBoxFF; //run function MOVEBOX on mousemove
	document.onmouseup = freezeFF; //run function FREEZE on mouseup
} 
function followMeIE() { //allows draggable divs to follow cursor
	box = this; //set current div
	box.leftLoc = event.clientX-box.left; //locate relative mouse position x
	box.topLoc = event.clientY-box.top; //locate relative mouse position y
	box.style.zIndex = z++; //bring to top
	document.onmousemove = moveBoxIE; //run function MOVEBOX on mousemove
	document.onmouseup = freezeIE; //run function FREEZE on mouseup
} 
function freezeFF(e) { //return div to stationary
	document.onmousemove = ''; //clear div positioning function
	document.onmouseup = ''; //clear div freeze function
	box.left = e.clientX-box.leftLoc; //set final position x
	box.top = e.clientY-box.topLoc;	 //set final position y
} 
function freezeIE() { //return div to stationary
	document.onmousemove = ''; //clear div positioning function
	document.onmouseup = ''; //clear div freeze function
	box.left = event.clientX-box.leftLoc; //set final position x
	box.top = event.clientY-box.topLoc;	 //set final position y
}
function moveBoxFF(e) { //set div position to follow cursor
	box.style.top = e.clientY-box.topLoc; //set position y
	box.style.left = e.clientX-box.leftLoc; //set potition x
} 
function moveBoxIE() { //set div position to follow cursor
	box.style.top = event.clientY-box.topLoc; //set position y
	box.style.left = event.clientX-box.leftLoc; //set potition x
}
</script> 
</head>

<body>

<div id="follow" class="draggable">This is a draggable div.</div>
<div id="me" class="draggable">This is another div you can drag.</div>
<div class="fixed">But this one is not draggable.</div>
<div id="where" class="draggable">This is one more draggable div.</div>
<div class="fixed">This one is also not draggable.</div>


</body>

</html>

**Fang** · 07-27-2010 12:00 PM

Add units to ALL dimensions:

Code:

box.style.left = box.left+'px';

**wkrieger** · 07-27-2010 12:21 PM

ah, that did it. i had problems with the styles including "px" initially which is why i started recording box.left separately. but i incorrectly assumed that setting a number to box.style.left would append 'px' automatically.

thanks