doctype kills firefox layout
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>
