Page 1 of 1

Object positions are OK in IE7 but ruined in other browsers

Posted: Thu Mar 29, 2007 11:00 pm
by joboy
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


hi,

i am making the interface for a log-in tool, well the elements were properly rendered in IE7 but their horizontal alignment are broken if i'll view them in Netscape 7.1 and Mozilla Firefox. 

what codes shall i insert to correct the problem? please see my existing scripts...thanks.

[syntax="html"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	
	<title>Login Form</title>
	<meta http-equiv="Content-Type" content="text/html; charset="></meta>
	
	<script type="text/javascript">
    <!-- hide script from old browser	
			
	function start() {
		
		document.body.innerHTML="";
		
		headerDiv=document.createElement("div");						//--- div header
		headerDiv.style.backgroundColor="red";
		headerDiv.style.position="absolute";
		headerDiv.style.margin="10px";
		headerDiv.style.height="30px";
		headerDiv.style.width="300px";
		document.body.appendChild(headerDiv);
		
		lblHeader = document.createElement("p");            			//--- label main
		lblHeader.innerHTML="ADR Back-End Site";
		lblHeader.style.position="absolute";
		lblHeader.style.top="5px";
		lblHeader.style.margin="5px";
		headerDiv.appendChild(lblHeader);
		
		loginDiv=document.createElement("div");							//--- div login
		loginDiv.style.backgroundColor="orange";
		loginDiv.style.position="absolute";
		loginDiv.style.top=Math.round(headerDiv.offsetTop+20) + "px";
		loginDiv.style.margin="10px";
		loginDiv.style.height="150px";
		loginDiv.style.width="300px";
		document.body.appendChild(loginDiv);
		
		loginForm = document.createElement("form");						// form object
		loginForm.action="sample.php";
		loginForm.method="post";
		loginForm.encoding="multipart/form-data"; 
		loginForm.style.backgroundColor="#FFDDCC";
		loginForm.style.position="absolute";
		loginDiv.appendChild(loginForm);
			
		lblUsername = document.createElement("p");           			 //--- label username
		lblUsername.innerHTML="Username : ";
		lblUsername.style.position="absolute";
		lblUsername.style.top=Math.round(headerDiv.offsetTop+5) + "px";
		lblUsername.style.left="20px";
		loginDiv.appendChild(lblUsername);
		
		lblPassword = document.createElement("p");			   			//--- label password
		lblPassword.innerHTML="Password :";
		lblPassword.style.position="absolute";
		lblPassword.style.left="20px";
		lblPassword.style.top=Math.round(lblUsername.offsetTop+35) + "px";
		loginDiv.appendChild(lblPassword);
			
		userName = document.createElement("input");             		//--- txtbox username
		userName.type="text";
		userName.value="";
		userName.style.position="absolute";
		userName.style.top=Math.round(headerDiv.offsetTop+5) + "px";
		userName.style.left="120px";
		loginForm.appendChild(userName);
				
		passWord = document.createElement("input");             		//--- txtbox passWord
		passWord.type="password";
		passWord.value="";
		passWord.style.position="absolute";
		passWord.style.left="120px";
		passWord.style.top=Math.round(userName.offsetTop+35) + "px";
		loginForm.appendChild(passWord);
		
		loginBtn = document.createElement("input");						//--- btn login
                         loginBtn.type="submit";
                         loginBtn.value="Log-in";
                         loginBtn.style.position="absolute";
	 	loginBtn.style.left="120px";
		loginBtn.style.top=Math.round(passWord.offsetTop+35) + "px";
		loginForm.appendChild(loginBtn);
	
	} //end of function start().
		
	// end of hiding script from old browser -->
	</script>

</head>
<body onLoad="start()"> </body>
</html>


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Fri Mar 30, 2007 12:13 am
by feyd
Why is your form being generated entirely by Javascript? Browsers which do not support Javascript will display a blank page. :?

Posted: Fri Mar 30, 2007 1:07 am
by joboy
feyd:

sorry to bother you with that issue but it's a company standard to use "only" javascript.. i am compelled to do(sigh).
yup you're right that's the big down side of it if script or scripting is disabled, i dont know or dont want to know what's rendered on the browser (giggle).