PDA

View Full Version : positioning in firefox and IE



gilgalbiblewhee
03-09-2009, 11:13 AM
Take a look at the Firefox positioning and the disastrous positioning in IE and let me know what I need to do fix the div tag:


function areYouSure(){
var newDiv = document.createElement("div");
newDiv.setAttribute('style', 'position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;');
newDiv.setAttribute('id', 'add_to_db');
newDiv.innerHTML = "<div style='float: left; margin: 10px 10px 10px 10px;width: 480px; height: 100px; background-color: #D2C5A0;'>Are you sure you want to add it to the database?<br /><span style='position: absolute; left: 200px; top: 50px; text-align: center;'><input type='button' value='Yes' style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9;' onClick='addToDb();' /><a href='JavaScript: cancelAddToDb();'><span style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9; width: 60px; height: 20px; display: block;'>Cancel</span></a></span></div>";
// And then inject it:
document.body.appendChild(newDiv);
}
function cancelAddToDb(){
var olddiv = document.getElementById('add_to_db');
if (olddiv && olddiv.parentNode && olddiv.parentNode.removeChild){
olddiv.parentNode.removeChild(olddiv);
}
}

abduraooft
03-09-2009, 01:04 PM
Post a link to your page. The above posted code is not enough to reproduce the issue/ the layout uploaded above.

gilgalbiblewhee
03-10-2009, 05:36 PM
Post a link to your page. The above posted code is not enough to reproduce the issue/ the layout uploaded above.


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript1.6">
function areYouSure(){
var newDiv = document.createElement("div");
newDiv.setAttribute('style', 'position: absolute; left: 200px; top: 250px; text-align: center; width: 500px; height: 120px; z-index: 3; background-color: #999999;');
newDiv.setAttribute('id', 'add_to_db');
newDiv.innerHTML = "<div style='float: left; margin: 10px 10px 10px 10px;width: 480px; height: 100px; background-color: #D2C5A0;'>Are you sure you want to add it to the database?<br /><span style='position: absolute; left: 200px; top: 50px; text-align: center;'><input type='button' value='Yes' style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9;' onClick='addToDb();' /><a href='javascript: cancelAddToDb();'><span style='float:left; text-align: center; margin: 5px 5px 5px 5px; background-color: #4C5454; color: #FFFFFF; font-weight: bold; font-size: 12px; border-color: #98A9A9; width: 60px; height: 20px; display: block;'>Cancel</span></a></span></div>";
// And then inject it:
document.body.appendChild(newDiv);
}
function cancelAddToDb(){
var olddiv = document.getElementById('add_to_db');
if (olddiv && olddiv.parentNode && olddiv.parentNode.removeChild){
olddiv.parentNode.removeChild(olddiv);
}
}
</script>
</head>

<body>
<input type="button" onclick="areYouSure();" value="click me!" />
</body>
</html>

compare this with firefox and IE.

abduraooft
03-10-2009, 05:54 PM
You could use the Dead Center approach (http://www.wpdfd.com/editorial/thebox/deadcentre4.html). Also don't use innerHTML or inline styles. Stick with standard DOM functions like createELement(), appendChild(), setAttribute() etc, and use stylesheets to style your elements.