I am trying to create a css based form. It is complete for the most part except that IE 5 & > is messing up the form elements. Here is the code (it is valid xhtml and valid css):
<!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>
<title>test</title>
<style type="text/css" >
/******************* CSS BASED FORMS *********************/
div.row {
clear: both;
padding-top: 2px;
width: 100%;
}
div.row span.label, div.row label {
float : left;
width : 30px;
margin-right: 5px;
text-align: right;
border: 0px solid red;
}
.login div.row label, .login div.row span.label {
float: left;
width : 30px;
}
div.row div.group {
float : left;
margin-right: 3px;
border: 0px solid green;
}
div.row div.group label {
float: none;
text-align: left;
padding-left: 3px;
}
</style>
</head>
<body>
<fieldset class="login" >
<legend >User Login</legend>
<form action="{$smarty.const.HTTP_PATH}/user.php" method="post">
<div class="row">
<label >User:</label>
<input type="text" name="uname" size="15" maxlength="25" value="" />
</div>
<div class="row">
<label >Pass:</label>
<input type="password" name="pass" size="15" maxlength="25" />
</div>
<div class="row">
<span class="label">Grp:</span>
<div class="group">
<input type="text" name="one" size="15" maxlength="25" value="" /><br />
<label>one</label>
</div>
<div class="group">
<input type="text" name="two" size="15" maxlength="25" value="" /><br />
<label>two</label>
</div>
</div>
</form>
</fieldset>
</body>
</html>
Mozilla: no problems
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/mozilla.jpg">http://www.rcs-comp.com/tmp/browserpics/mozilla.jpg</a><!-- m -->
Opera: no problems
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/opera.jpg">http://www.rcs-comp.com/tmp/browserpics/opera.jpg</a><!-- m -->
IE5: grouped elements too far left
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/ie5.jpg">http://www.rcs-comp.com/tmp/browserpics/ie5.jpg</a><!-- m -->
IE6: grouped elements too far left
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/ie6.jpg">http://www.rcs-comp.com/tmp/browserpics/ie6.jpg</a><!-- m -->
This is really annoying. I have spent half the day working with it trying to fix it. I have tried enclosing the 'group' divs in a wrapping div with the same result.
The cause, as best I can tell, is that IE is putting an extra space between the <label> and <input> tags. You can see this by removing the margin from the label tags:
div.row span.label, div.row label {
float : left;
width : 50px;
margin-right: 0px; /*changed from 3px */
text-align: right;
border: 0px solid red;
}
This should put nothing between the label and the text boxes as shown by mozilla, netscape, and opera (only mozilla shown for brevity):
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/mozilla_2.jpg">http://www.rcs-comp.com/tmp/browserpics/mozilla_2.jpg</a><!-- m -->
But, IE shows a space:
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/ie6_2.jpg">http://www.rcs-comp.com/tmp/browserpics/ie6_2.jpg</a><!-- m -->
Does anyone have any ideas? Thanks in advance.I solved (hacked) this problem without every finding out what caused it:
/*********** IE HACKS TO MAKE INPUT BOXES APPEAR CORRECTLY ************/
* html input, * html textarea {
margin-left: -3px;
}
* html div.row div.group input {
margin-left: 0px;
}
/*********** END IE HACKS ************/
<!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>
<title>test</title>
<style type="text/css" >
/******************* CSS BASED FORMS *********************/
div.row {
clear: both;
padding-top: 2px;
width: 100%;
}
div.row span.label, div.row label {
float : left;
width : 30px;
margin-right: 5px;
text-align: right;
border: 0px solid red;
}
.login div.row label, .login div.row span.label {
float: left;
width : 30px;
}
div.row div.group {
float : left;
margin-right: 3px;
border: 0px solid green;
}
div.row div.group label {
float: none;
text-align: left;
padding-left: 3px;
}
</style>
</head>
<body>
<fieldset class="login" >
<legend >User Login</legend>
<form action="{$smarty.const.HTTP_PATH}/user.php" method="post">
<div class="row">
<label >User:</label>
<input type="text" name="uname" size="15" maxlength="25" value="" />
</div>
<div class="row">
<label >Pass:</label>
<input type="password" name="pass" size="15" maxlength="25" />
</div>
<div class="row">
<span class="label">Grp:</span>
<div class="group">
<input type="text" name="one" size="15" maxlength="25" value="" /><br />
<label>one</label>
</div>
<div class="group">
<input type="text" name="two" size="15" maxlength="25" value="" /><br />
<label>two</label>
</div>
</div>
</form>
</fieldset>
</body>
</html>
Mozilla: no problems
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/mozilla.jpg">http://www.rcs-comp.com/tmp/browserpics/mozilla.jpg</a><!-- m -->
Opera: no problems
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/opera.jpg">http://www.rcs-comp.com/tmp/browserpics/opera.jpg</a><!-- m -->
IE5: grouped elements too far left
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/ie5.jpg">http://www.rcs-comp.com/tmp/browserpics/ie5.jpg</a><!-- m -->
IE6: grouped elements too far left
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/ie6.jpg">http://www.rcs-comp.com/tmp/browserpics/ie6.jpg</a><!-- m -->
This is really annoying. I have spent half the day working with it trying to fix it. I have tried enclosing the 'group' divs in a wrapping div with the same result.
The cause, as best I can tell, is that IE is putting an extra space between the <label> and <input> tags. You can see this by removing the margin from the label tags:
div.row span.label, div.row label {
float : left;
width : 50px;
margin-right: 0px; /*changed from 3px */
text-align: right;
border: 0px solid red;
}
This should put nothing between the label and the text boxes as shown by mozilla, netscape, and opera (only mozilla shown for brevity):
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/mozilla_2.jpg">http://www.rcs-comp.com/tmp/browserpics/mozilla_2.jpg</a><!-- m -->
But, IE shows a space:
<!-- m --><a class="postlink" href="http://www.rcs-comp.com/tmp/browserpics/ie6_2.jpg">http://www.rcs-comp.com/tmp/browserpics/ie6_2.jpg</a><!-- m -->
Does anyone have any ideas? Thanks in advance.I solved (hacked) this problem without every finding out what caused it:
/*********** IE HACKS TO MAKE INPUT BOXES APPEAR CORRECTLY ************/
* html input, * html textarea {
margin-left: -3px;
}
* html div.row div.group input {
margin-left: 0px;
}
/*********** END IE HACKS ************/