Centering Form Elements (Help!)

[Ikonified]

Hey all,

Alright, the title may not provide enough of an explanation, so here it goes:

I have a drop-down menu (SELECT) located on a banner at the top of my page. The problem I have is that because it's located inside the <form> tags, the select list is pushed to the very top of the cell. I'd rather it be centered (vertically) to make it look nice.

Originally, to achieve the desired look, I placed the <form> tags before the <td> tags, however, running the page through the w3c validator advises me that this is not valid... a <form> tag must appear INSIDE a cell tag.

Anyways, I've tried with CSS, and unless I'm doing it wrong, I can't seem to get it work properly.

I've attached 2 screenshots... One with the desired, albeit non-validated, look, and the other with the undesired, however, valid look... Unfortunately, I have to blur the contents of the select (due to legal reasons - BLAH! )

My goal is to achieve the desired look while still maintaing valid HTML rules.

Thank you!
Ik

[vgarcia]

form {
  margin: 0px;
}

Then wrap your <form> tag OUTSIDE of the <table>.
This CSS will get rid of any margins that the <form> tag produces.

[Ikonified]

form {
  margin: 0px;
}

Then wrap your <form> tag OUTSIDE of the <table>.
This CSS will get rid of any margins that the <form> tag produces.

Thanks for getting back to me...

When you say wrap the <form> tag outside of the <table> tag, you mean:

<form ...>
<table ...>
...
</table>
</form>

So I should insert a table within the <td> that the form will be located in?

[Ikonified]

Alright, I managed to get it working!!

It was Vinnie's "margin" suggestion! Thank you very much!

While still on the topic of validation, however... I have another question regarding <span> tags.

Why is it that I cannot have a <table> nested within the span tags? When I run the page through the validator, it comes back:

Line 189, column 32: document type does not allow element "SPAN" here; missing one of "TH", "TD" start-tag
<span id="list_2003_child">
^


Can anyone help me decipher that somewhat-cryptic message?

Thanks!

[redux]

Line 189, column 32: document type does not allow element "SPAN" here; missing one of "TH", "TD" start-tag
<span id="list_2003_child">

aeh...it means you can't stick a span where you did. can you let us see the code around that error ? my guess is you've got something like

<table>
<span>
etc etc
</span>
</table>

which is not valid. span is an inline element and needs to be contained within a block level element such as a div...

[Ikonified]

Hey Redux,

This is the code I'm using:

<tr>
<td>
<!-- when inserting new child nodes, be sure to change the ID for both the title and the "click to expand" spans -->
				
<img src="../images/red_bullet.gif" width="7" height="8" alt=""><span style="CURSOR: hand" id="list_2002" class="titles" onClick="expand(1);return false"> TextGoes Here </span>

<span class="finepoint" id="list_2002_expand">(Click to Expand)</span> 
</td>
</tr>
<tr>
<td>
<span id="list_2002_child" style="DISPLAY: none">       	   
<table width="60%" border="0" cellspacing="0" cellpadding="3" class="procbox">
<tr>
<td class="proctitle">Month</td>
<td class="proctitle">Type</td>
</tr>
<tr>
<td><a href="http://w3.cibc.com/techops/bcc/newsletter/dec02/index.html" target="_blank">December</a></td>
<td class="procnumber"><a href="http://w3.cibc.com/techops/bcc/newsletter/dec02/index.html" target="_blank"><img src="../images/explorerIcon.gif" width="16" height="16" border="0" alt="Open Document in Internet Explorer"></a></td>
</tr>
<tr>
<td bgcolor="#EFEFEF"><a href="http://w3.cibc.com/techops/bcc/newsletter/nov02/index.html" target="_blank">November</a></td>
<td bgcolor="#EFEFEF" class="procnumber"><a href="http://w3.cibc.com/techops/bcc/newsletter/nov02/index.html" target="_blank"><img src="../images/explorerIcon.gif" width="16" height="16" border="0" alt="Open Document in Internet Explorer"></a></td>
</tr>
</table>
</span>				
</td>
</tr>

I've since changed the "child" <span> (ie: <span id="list_2002_child"> to a <div> and it seems to validate.

But I wouldn't mind an explanation on why I could use a DIV as opposed to a SPAN tag...

Thanks for the assistance!


Edit: Sorry, the code comes out horribly!

[KillAllDash9]

Because spans are inline elements as opposed to divs which are block elements. Inline elements cannot contain block elements. Since a table is also a block element, it can't be inside the span.

[Ikonified]

KillAllDash,

Okay... I think I understand it now... I've just always found the term "inline" to be a little confusing.

My understanding of inline is that it's at the text-level, and only text-related elements can be inside a span... is that the right assumption?

Thanks again! I'll keep that in mind in the future...