SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering Form Elements (Help!)

    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
    Attached Images Attached Images

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    Code:
    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?

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ikonified
    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
    Code:
    <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...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Redux,

    This is the code I'm using:

    Code:
    <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!

  7. #7
    killall -9 lusers
    Join Date
    Oct 2002
    Location
    Cincinnati, Ohio, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •