Label Problems :(

[liunx]

<!-- m --><a class="postlink" href="http://www.summel.net/cobalt/admin/index.php?section=category&subsection=add">http://www.summel.net/cobalt/admin/inde ... ection=add</a><!-- m -->

Ok, here's the problem:

If you notice the labels for the text boxes (<input>), the ones in the body of the page are like a million pixels below the input boxes themselves. Anyone have any ideas on why this is doing this?

Here's the css for the inputs and the labels:

.standard_box
{
border: 1px solid #000;
background: #ddd;
padding: 2px;
text-align: center;
font-size: 70%;
margin-top: 5px;
}

.standard_box h3
{
margin-top: 5px;
margin-bottom: 5px;
font-size: 110%;
}

.standard_box h4
{
margin: 1px;
margin-top: 2px;
font-size: 100%;
font-weight: bold;
}

.standard_box label
{
font-size: 100%;
font-weight: 100;
margin-right: 5px;
margin-bottom: 5px;
}

.standard_box input
{
border: 1px solid #ccc;
font-size: 8pt;
padding: 2px;
margin: 0;
margin-bottom: 5px;
padding: 1px;
}

#attributes h4
{
margin: 0;
}

Here's the code for the boxes themselves:


echo "<div class=\"standard_box\" style=\"width: 375px; float: left; margin-right: 5px;\">";

echo "<h3><img src=http://www.webdeveloper.com/forum/archive/index.php/\"../images/cobalt_categories_basicinfo.png\" alt=\"Basic Information\" /></h3>";
echo "<form action=\"index.php?section=category&subsection=process-add\" method=\"post\">";
echo "<label for=\"name\">Name (max 30 char)</label>";
echo "<input type=\"text\" name=\"name\" size=\"25\" maxlength=\"30\" />";
echo "<br />";
echo "<label for=\"description\">Description (max 255 char)</label>";
echo "<input type=\"text\" name=\"description\" size=\"40\" maxlength=\"255\" />";
echo "</div>";

echo "</div>";

echo "<div class=\"standard_box\" id=\"attributes\" style=\"width: 149px; float: left; margin-bottom: 5px;\">";

$parent_cat_query = "SELECT `name` FROM `cobalt_categories` ORDER BY `name` ASC";
$parent_cat_result = mysql_query($parent_cat_query);

echo "<h3><img src=http://www.webdeveloper.com/forum/archive/index.php/\"../images/cobalt_categories_attributes.png\" alt=\"Attributes\" /></h3>";
echo "<h4>ID#: $newid - " . date("m.d.y", time() - 3600) . "</h4>";

echo "<select>";
echo "<option>Parent Category...</option>";
while ($cat = mysql_fetch_array($parent_cat_result))
{
echo "<option value=\"" . stripslashes($cat['name']) . "\">";
echo(stripslashes($cat['name']));
echo "</option>";
}
echo "</select>";

echo "<br />";
echo "<h4>Active</h4>";
echo "<input type=\"checkbox\" checked=\"checked\" style=\"border: 0;\" />";

echo "</div>";
echo "<div style=\"text-align: right; margin-right: 1px;\">";
echo "<input type=\"submit\" value=\"submit\" /> ";
echo "<input type=\"reset\" value=\"reset\" />";

echo "</div>";

echo "</form>";

Anyone have any ideas?

Thanks, guys,
WillThe FOR attribute of a LABEL is supposed to be set to another tag's ID -- not it's NAME. I haven't reviewed your CSS, but that is most-probably the problem just by looking at the XHTML.The FOR attribute of a LABEL is supposed to be set to another tag's ID -- not it's NAME. I haven't reviewed your CSS, but that is most-probably the problem just by looking at the XHTML.

I went ahead and changed it and it still doesn't fix it .It can be fixed with:

label
{
font-size: 70%;
font-weight: 900;
vertical-align:top;
}