Forum Moderators: not2easy
I'm new to CSS and am boldly attempting a simple form using CSS without tables. It's a login form, with a banner on the top. Everything seems ok except in the legend, the first row of the form. The first row has a different color. It has two spans with text aligning to the left and to the right. Each span has a 49% width.
The problem: there's a small gap in the middle. Changing the width breaks the layout.
Here's the CSS:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #fff;
color: #818181;
}
div#banner {
position: absolute;
width: 500px;
height: 50px;
left: 0;
right: auto;
top: 0;
}
div#logo {
position: absolute;
width: 85px;
height: 35px;
right: 0;
left: auto;
top: 5px;
}
div#form {
position: absolute;
width: 50%;
left: 25%;
right: 25%;
top: 100px;
border-top: 2px solid #818181;
border-left: 2px solid #818181;
border-right: 1px solid #818181;
border-bottom: 1px solid #818181;
background: #ccc;
color: #818181;
}
div#fieldset {
border: 1px;
}
div#legend.row span.left {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
float: left;
margin-top: 0px;
margin-bottom: 12px;
text-align: left;
background: #dbd4d4;
color: #818181;
width: 49%;
}
div#legend.row span.right {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
float: right;
margin-top: 0px;
margin-bottom: 12px;
text-align: right;
background: #dbd4d4;
color: #818181;
width: 50%;
}
input.username {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #818181;
background: #ccc;
margin-bottom: 2px;
}
input.password {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #818181;
background: #ccc;
}
input.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #818181;
background: #ccc;
margin-right: 0px;
margin-left: 75%
}
----------
Here's the HTML:
<body>
<div id="banner"><img src="images/APS_cms.gif" width="500" border="0" alt="APS Content Management System"></div>
<div id="logo"><img src="images/CMS_small.gif" width="85" border="0" alt="CMS"></div>
<div id="form">
<form action="" method="post">
<div id="fieldset">
<div id="legend" class="row">
<span class="left">Login</span>
<span class="right">cms.aps.org</span></div>
<center><label for="Username">Username: </label>
<input type="text" class="username" id="Username" size="16"></center>
<center><label for="Password"> Password: </label>
<input type="password" class="password" name="pass" id="Password" size="16"></center>
<br>
<input type="submit" class="button" value="Login">
</div>
</form>
</div>
</body>
--------
What's wrong in the stylesheet? I'm not clear about how to style fieldset. Are there any good examples showing forms using CSS only?
Thanks for any help!
I just changed the width in the right span to 51% and it fixed the gap. Why?
If anyone still cares to read my previous message to go over my stylesheet and send comments, I would greatly appreciate it. I want to learn to do it right.
Thanks!
