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 and Firefox.

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

for immediate comparison, i inserted a pic (captured brower display).

result from IE7:

result from Netscape and Firefox:

<!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>

    Because Firefox is putting in the vertical padding that <p> elements have when it renders the labels (because you said they were <p> elements). I wouldn't be surprised if IE wasn't doing it too but is still being moronic about the box model.
    If you put the labels in <div> elements instead ... the only styling that <div>s come with is that they're block-level.

      To get IE out of "quirks mode" (and so that it uses the standard box model), you need to use a fully qualified doctype declaration, not a partial one:

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

        And for the labels you might want to consider using <label> elements.

          thanks for the replies.. i think i need to deal first on the padding issue as well as checking on how margins (document itself, the divs, etc.) are initially handled by different browsers. then, i guessed, doctype and validation are the next steps.

            joboy wrote:

            then, i guessed, doctype and validation are the next steps.

            Not really; because if you get it "looking right" and then have to tear it all apart to get it to validate then you've just wasted a lot of effort. And as NogDog alludes, the same browser might render the same page differently depending on your choice of DOCTYPE imprimatur (the list is here).

            It's better to write good code in the first place 🙂

              Generally I follow this process:

              1. Create valid HTML, using the HTML 4.01 Strict doctype and running it through the HTML Validator.

              2. Working in Firefox, add CSS to get the desired look, using the CSS Validator to make sure my syntax is correct.

              3. Once I get things "right", look at the page in IE and make CSS changes as needed to get it right there (occasionally having to use IE conditional comments to work around any problems due to IE's misinterpretation of the CSS spec.).

                I think your suggestions are really compelling..though i am not quite familiar with CSS however aware of its importance. anyway thanks again.

                  Write a Reply...