Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    735
    Thanks
    4
    Thanked 1 Time in 1 Post

    positioning in firefox and IE

    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:
    Code:
    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);
    	}
    }
    Attached Thumbnails Attached Thumbnails positioning in firefox and IE-ffpositioning.jpg   positioning in firefox and IE-iepositioning.jpg  
    Compare bible texts (and other tools):
    TheWheelofGod

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Post a link to your page. The above posted code is not enough to reproduce the issue/ the layout uploaded above.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Mar 2005
    Posts
    735
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Post a link to your page. The above posted code is not enough to reproduce the issue/ the layout uploaded above.
    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>
    		<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.
    Compare bible texts (and other tools):
    TheWheelofGod

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You could use the Dead Center approach . 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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •