Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Width of a table . . .

    This code is a form on my website that searches out data from another website. The table created by this is about 150 px wide. I need it to be 120 px wide. I have tried everything. The Width command (I added it) seems to do nothing? What am I doing wrong?

    <!-- HamCall Callsign Lookup Blank START -->
    <form method=POST action=http://hamcall.net/call/>
    <table width="120" border="0" bgcolor="#ffff80">
    <tr>
    <td>
    <input name=callsign>
    <input type=submit value="Search">
    </TD>
    </TR>
    </table>
    </form>
    <!-- HamCall Callsign Lookup Blank END -->

    JD in KC
    Last edited by pts123; 04-30-2009 at 07:28 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Can we see the entire code please (including the CSS if applicable)? Some other style declaration or parent element dimension may override this width.

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the quick reply. This is added to the "Header Template" on my website that is running vBulletin as this Forum is. If you go to the URL on the bottom you will see the table on the top left side. It is causing the left column to be wider than I can have and I must shrink the width down.

    If you just took the above code and create a basic html document with it, no css even involved. See if you can tell me what would bring the width down.

    Thanks JD in KC

    http://kcHamRadio.com

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    At first note that the code you posted above (and its equivalent on your site) has errors and doesn’t conform to XHTML standards.

    1. There is an opening <body> element inside the form. What is it doing there?
    2. There is no <bgcolor> element. At the same time there is an opening <tr> missing. Could it be that it’s supposed to be <tr bgcolor="…">?
    3. There are no bgcolor, border, and width attributes in HTML 4 or XHTML 1. Use CSS for this!
    4. In XHTML all tags and attributes must be written lowercase.
    5. In XHTML all elements must be properly closed. In case of “non-closing” elements as img and input you need a closing slash like <input />.
    6. In XHTML all attribute values must be enclosed in quotes, e. g. <div class="whatever">.
    7. You’d be better off scrapping the table layout at all since it’s just making things more complicated than they need to be and is not semantic at all.


    Your code could simply look like this:
    Code:
    <form method="POST" action="http://hamcall.net/call/">
    	<div>
    		<input name="callsign" />
    		<input type="submit" value="Search" />
    	</div>
    </form>
    Now as to the width: does it help if you apply a size to the input?

    Code:
    <input size="12" name="callsign" />

  • #5
    New Coder
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    VIPStephen,
    Thanks . . . that was the trick. I added what you said, inserted the width, adjusted it a little. Then I figured out the background color and here's the final result.

    <td class="tcat">Callsign Lookup:</td>
    <tr bgcolor="F4EBD5">
    <td align="center">
    <!-- HamCall Callsign Lookup Blank START -->
    <form method="POST" action="http://hamcall.net/call/">
    <div>
    <input size="15"name="callsign" />
    <input type="submit" value="Search" />
    </div>
    </form><!-- HamCall Callsign Lookup Blank END -->

    I do have one more question. In the box that the text is entered by the user and then they click "Search". They can only enter up to 6 characters, so there is plenty of room for a larger font. What could I add to raise the size of the text the box shows as the user types. If it was a 10 now, I would prefer about a 12, thanks again.

    Take a look: http://kcHamRadio.com

    JD in KC

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Do something like:
    Code:
    <input size="15" name="callsign" style="font-size: 110%" />
    You’ll have to decrease the value of the “size” attribute then or set a width in the style attribute, too. And if they are only allowed to enter up to six characters anyway I’d recommend adding maxlength="6". This way they can’t enter more than six characters.

  • #7
    New Coder
    Join Date
    Apr 2009
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Got it . . .

    Thanks so much . . . I added the font line and adjusted it for the best looking size. One thing I did notice, the box keeps the last typed in entry even after clicking on search. I tried clear, erase and I'm not sure what to have to empty the entry box after clicking on search?

    But, I have added some other things like opeing a new browser window for the target, so the user is not taken away from my site. Here is the condition of the code now. Cleaned up quite a bit!

    </tr>
    <td class="tcat">Callsign Lookup:</td>
    <tr bgcolor="F4EBD5">
    <td align="center">
    <!-- HamCall Callsign Lookup Blank START -->
    <form method="POST" action="http://hamcall.net/call/ "target="_blank">
    <div>
    <input size="12" name="callsign" style="font-size: 130%" maxlength="7" />
    <input type="submit" value="Search" />
    </div>
    </form><!-- HamCall Callsign Lookup Blank END -->
    <br />
    <a href="http://www.kcvhfgridbandits.com/" target="_blank"><img src="$stylevar[imgdir_misc]/grid_ad1.jpg" alt="" border="0"/>
    <img src="$stylevar[imgdir_misc]/pc_man1.jpg" alt="" border="0" />

    JD in KC


  •  

    Posting Permissions

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