Start New Discussion within our UI / UX Design Community

Hi I had a "Div" element in a html page and also had input textbox and text inside it. I had the code like this


<div class="form">Username :
    <input name="textfield" type="text" id="textfield" />
<br />
Password :
<input name="textfield2" type="text" id="textfield2" /></div>



Everything working fine except the line height in IE. In mozilla and opera everything working fine and perfectly...

Please help me....
Thanks in advance

Is your html has doc type? And what version of IE do you use? I check your codes with IE 7 and the result is same as FF. If you didn't add doc type, you need to put it first. Here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

It is strict mode. I think you already use it, because you inserted slashes inside the 'input' tag.


Thanks for your advice... I already used that in my html...

Is any other options ?


Try to group with text container like p. Fieldset is better to group form data. Here is my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns="">
<title>Line-height Problem</title>
<style type="text/css">
fieldset {
	margin: 1.3em 26%;
	/*For Firefox */
	-moz-border-radius: 5px;
	/*For Safari */
	-webkit-border-radius: 5px;
	line-height: 2.4em;
	font-family: Arial,Helvetica, Sans-serif;
	font-size: 11pt
fieldset legend {
	color: #6b6b6b;
	font-weight: bold
form {
	margin: 0;
	padding: 0
form input.field {
	width: 224px;
	border: 2px solid #a1a1a1;
	height: 18px;
	float: left;
	margin-top: 4pt
form input.field:hover, form input.field:focus {
	border-color: #686868
label {
	width: 68px;
	float: left;
	text-align: right;
	padding: 0 7px 0 3px;
	vertical-align: top;
	font-weight: bold;
	font-size: 9pt;
	color: #555555
<label for="name">Name:</label><input type="text" name="user_name" class="field" /><br /><label 

for="password">Password:</label><input type="password" name="psword" class="field" /><br 

/><input type="submit" value="Submit" /><input type="reset" value="Cancel" />

Good luck..

Hi There,

I have a quick fix to this issue,
simply include the below CSS snippet code in your CSS area;

* input { margin: 3%; vertical-align: middle; }

This would maintain consistent margin between the two elements. I have tested this code on FF & IE 7, please test it on other browsers as well.
However as per 'Zero13' comment try to group the elements in a p or fieldset tag.

Hope this code help's to resolve your issue.
Good Luck!

This article has been dead for over six months. Start a new discussion instead.