Line Height with Input Element not working

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

HTML

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

CSS

.form{
width:90%;
height:auto;
float:left;
vertical-align:middle;
margin-top:10px;
line-height:75px;
}

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

Please help me....
Thanks in advance
Rajeesh

3

Contributors

4

Replies

1 Day

Discussion Span

3 Years Ago

Last Updated

5

Views

rajeesh_rsn

Posting Whiz in Training

265 posts since Sep 2008

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd">

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

ko ko

Practically a Master Poster

673 posts since Jan 2009

Reputation Points: 120

Solved Threads: 152

Skill Endorsements: 1

3 Years Ago

0

Hi

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

Is any other options ?

Thanks
Rajeesh

rajeesh_rsn

Posting Whiz in Training

265 posts since Sep 2008

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

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" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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
	}
</style>
</head>
<body>
<fieldset>
<legend>Register</legend>
<form>
<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" />
</form>
</fieldset>
</body>
</html>

Good luck..

ko ko

Practically a Master Poster

673 posts since Jan 2009

Reputation Points: 120

Solved Threads: 152

Skill Endorsements: 1

3 Years Ago

0

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

aDevS

Newbie Poster

9 posts since Nov 2009

Reputation Points: 10

Solved Threads: 1

Skill Endorsements: 0

Line Height with Input Element not working

This article has been dead for over three months: Start a new discussion instead