Forum Moderators: not2easy
and i can not get it to display properly... and its killing me...
i have a label, input field, and informational box
cant get it in MAC FF or IE7/8
***********HTML************
<div class="blue-row">
<label accesskey="f" for="firstname">First Name:</label>
<input id="firstname" title="first name" tabindex="1" name="firstname" />
<div class="info-box">enter your first name</div>
</div>
************CSS**************
form label {
float:left;
position;relative;
display:block;
width: 100px;
background:#ff0000;
}
form input {
width:auto;
display:block;position:relative;background:#00ff00;
}
.form-info{
width:400px;
background:#0000ff;
float:right;
position:relative;
}
.blue-row{
width:100%;
min-height:25px;
background:#e3eafd;
border:1px solid #c6c1b8;
display:block;
float:left;
}
they are worse than lists, you cannot style inputs or select items very consistently x-browser, let alone a submit button but then again , I personally agree with the browsers on this one so I may not be the best person to ask
there's a mismatch between the class on the div (<div class="info-box">) and the css ( .form-info{ ), assuming those 2 should be the same ...
Next, to make it act in 3 cols, you'll need to change the floating or the source order (floats go first)
If I clean up that, along with stuff that won't do a thing in a standards compliant browser anyway, I get this:
<!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" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
form label {
float:left;
display:block;
width: 100px;
background-color:#ff0000;
}
form input {
background-color:#00ff00;
}
.form-info{
width:400px;
background-color:#0000ff;
float:right;
}
.blue-row{
min-height:25px;
background-color:#e3eafd;
border:1px solid #c6c1b8;
}
</style>
</head>
<body>
<form action="#">
<div class="blue-row">
<label accesskey="f" for="firstname">First Name:</label>
<p class="form-info">enter your first name</p>
<input id="firstname" title="first name" tabindex="1" name="firstname" />
</div>
<div class="blue-row">
<label accesskey="l" for="lastname">Last Name:</label>
<p class="form-info">enter your last name</p>
<input id="lastname" title="last name" tabindex="2" name="lastname" />
</div>
</form>
</body>
</html>
Works the same in FF3, opera and safari (all on mac).
Not tested in IE, that's something I'd only do at the very end as fixes tend to need to change anyway.
[edited by: swa66 at 8:43 am (utc) on June 2, 2009]
[I actually tried, but they won't honor min-height in FF, and I know they create a new stacking context (while there's no such mention I ever found in the standard -it's logical, just not mentioned in the standard they should do this-)]
