The Gap

[tgrk35]

Yet another newb question :(.
Sorry.

http://www.summel.net/cobalt/admin/index.php?section=category&subsection=add

If you view that in Firefox, it displays perfectly. If you view that in IE, it has this HUGE gap between the <hr> and the basic info and attributes boxes.

Here's the CSS:

hr.standard
{
border: 0;
height: 0;
border-bottom: 1px solid #000;
width: 100%;
clear: both;
text-align: left;
margin: 0;
margin-bottom: 5px;


And here's the XHTML markup for that entire right column:

// BASIC INFO BOX
echo "<div class=\"standard_box\" id=\"basic_info\" style=\"width: 375px; float: left; margin-right: 5px; margin-top: 0;\">";

echo "<h3><img src=\"../images/cobalt_categories_basicinfo.png\" alt=\"Basic Information\" /></h3>";

echo "<label for=\"name\">Name (max 30 char)</label>";
echo "<input type=\"text\" id=\"name\" name=\"name\" size=\"25\" maxlength=\"30\" />";
echo "<br />";
echo "<label for=\"description\">Description (max 255 char)</label>";
echo "<input type=\"text\" id=\"description\" name=\"description\" size=\"40\" maxlength=\"255\" />";
echo "</div>";
echo "</div>";

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

$parent_cat_query = "SELECT * FROM `cobalt_categories` ORDER BY `name` ASC";

$parent_cat_result = mysql_query($parent_cat_query);

// ROW COUNT + 1
$new_id_query = mysql_query("SELECT * FROM `cobalt_categories`;");
$new_id = mysql_num_rows($new_id_query) + 1;

echo "<h3><img src=\"../images/cobalt_categories_attributes.png\" alt=\"Attributes\" /></h3>";
echo "<h4>ID#:&nbsp;" . $new_id . "&nbsp;-&nbsp;" . date("m.d.y", time() - 3600) . "</h4>";
echo "<select id=\"parent\" name=\"parent\">";
echo "<option>Parent Category...</option>";
while ($cat = mysql_fetch_array($parent_cat_result))
{
echo "<option value=\"" . stripslashes($cat['id']) . "\">";
echo(stripslashes($cat['name']));
echo "</option>";
}
echo "</select>";
echo "<br />";
echo "<h4>Active</h4>";

echo "<input id=\"active\" name=\"active\" type=\"checkbox\" checked=\"checked\" style=\"border: 0;\" />";

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


I've looked at the hr.standard class and it doesn't look like there's any extra margin in there or anything :(.

Any ideas?

Thanks guys as always,
Will

[Fang]

form {margin:0;}

[tgrk35]

.standard_form
{
border: 1px solid #000;
padding: 5px;
margin: 0;
margin: 0px auto;
}


That still doesn't work :(. IE sucks :(. Any other ideas :-$?

[Fang]

The form has no class<form action="index.php?section=category&amp;subsection=process_add" method="post">

[tgrk35]

Heh, GOT IT!

Once I switched it to that class and set it to margin: 0;, padding: 0; it worked great :). Thank you very much :).

(IE still doubles the gap, but it's much more presentable).

[tgrk35]

Ok, guys :(... I had this all working and stuff.

I setup my validation script and stuff and now it seems to be back at its old tricks.

Any ideas?

Here's the url:
http://www.summel.net/cobalt/admin/index.php?section=category&subsection=add
(view it in IE)

Here's the xhtml:

// ---- // ADD NEW CATEGORY
case "add":
// SELECT
$add_query = "SELECT * FROM `cobalt_categories` ORDER BY name ASC";
$result = mysql_query($add_query);
$category = mysql_fetch_array($result);

echo "<div align=\"right\">";
echo "<img src=\"../images/cobalt_categories_linkheader.png\" alt=\"Categories\" />";
echo "</div>";
echo "<h5>";
echo "From this menu, you can create categories for your downloads.";
echo "</h5>";
echo "<hr class=\"standard\" />";


echo "<div style=\"margin: 0px auto; text-align: center;\">";
// FORM START
echo "<form action=\"index.php?section=category&amp;subsection=process_add\" method=\"post\" onsubmit=\"return checkForm_addCat()\" class=\"standard_form\">";
// BASIC INFO BOX
echo "<div class=\"standard_box\" id=\"basic_info\" style=\"width: 375px; float: left; margin-right: 5px; margin-top: 0;\">";

echo "<h3><img src=\"../images/cobalt_categories_basicinfo.png\" alt=\"Basic Information\" /></h3>";

echo "<label for=\"name\">Name (max 30 char)</label>";
echo "<input type=\"text\" id=\"name\" name=\"name\" size=\"25\" maxlength=\"30\" />";
echo "<br />";
echo "<label for=\"description\">Description (max 255 char)</label>";
echo "<input type=\"text\" id=\"description\" name=\"description\" size=\"40\" maxlength=\"255\" />";
echo "</div>";

echo "</div>";


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

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

// ROW COUNT + 1
$new_id_query = mysql_query("SELECT * FROM `cobalt_categories`;");
$new_id = mysql_num_rows($new_id_query) + 1;

echo "<h3><img src=\"../images/cobalt_categories_attributes.png\" alt=\"Attributes\" /></h3>";
echo "<h4>ID#:&nbsp;" . $new_id . "&nbsp;-&nbsp;" . date("m.d.y", time() - 3600) . "</h4>";

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

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

echo "</div>";
echo "<div style=\"text-align: right; margin-right: 1px; margin-bottom: 0;\">";



echo "<input type=\"submit\" value=\"submit\" />&nbsp;";
echo "<input type=\"reset\" value=\"reset\" />";

echo "<div id=\"insert_error\" style=\"font-size: 100%; margin: 0; margin-top: 5px;\"></div>";
// FORM END
echo "</form>";
echo "</div>";



break;


Here's the CSS:

.success
{
text-align: center;
font-size: 90%;
}

.success dl
{
margin: 0;
text-align: center;
}

.success dt
{
font-style: italic;
font-weight: bold;
margin: 0;
}

.success dd
{
margin: 0;
}

.validation
{
color: #fff;
font-size: 70%;
text-align: center;
}

.validation a
{
color: #fff;

}

.validation a:hover
{
color: #000

/* Forms ---------------------------------------- */

.standard_form
{
padding: 0px;
margin: 0px;
}


div.form_buttons
{
padding-left: 20px;
margin: 0;
margin-top: 10px;
text-align: left;
}

label
{
font-size: 70%;
font-weight: 900;
margin: 0;
}

.standard_box
{
border: 1px solid #000;
background: #ddd;
padding: 2px;
text-align: center;
font-size: 70%;
margin: 0;
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;
vertical-align: top;
margin-bottom: 5px;
}

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

#attributes h4
{
margin: 0;
}

hr.standard
{
border: 0;
height: 0;
border-bottom: 1px solid #000;
width: 100%;
clear: both;
text-align: left;
margin: 0;
margin-bottom: 5px;
}

.standard_button
{
font-weight: 900;
}

input
{
border: 1px solid #ccc;
font-size: 8pt;
margin: 0;
padding: 1px;
}


I know my CSS is incredibly messy and retarded, I'm sorry :(. I plan to clean that up as soon as possible :-$.

Thanks guys, for taking another look at this :).

Will

[Fang]

Time to clean your css, missing closing bracket:.validation a:hover
{
color: #000
}
/* Forms ---------------------------------------- */

.standard_form
{
padding: 0px;
margin: 0px;
}

[tgrk35]

Ha...OMG.

Thank you so much. It's crap like that that will get me fired :P. I should really have a better eye for that stuff :).

Thanks a lot, man :)

[Fang]

You also have a nesting error with the second form