...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum