[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

HTML Table Row height with button

Posted on 2005-04-06
26
Medium Priority
?
586 Views
Last Modified: 2011-08-18
I have a simple HTML table with buttons in one column.
Any time I dispplay a button in th table that rows heingth doubles. How can I avoid this. The table may have a large number of rows and the additonal height means a lot more scrolling.

The code goes somthing like:
<TABLE>
<TR><TD>...</TD>
<TD>...</TD>
<TD><FORM>
<INPUT TYPE=HIDDEN ...>
<INPUT TYPE=HIDDEN ...>
<INPUT TYPE=SUBMIT ...>
</TD></TR></FORM>
</TABLE>

I've tried using <BUTTON>...</BUTTON> instead of <INPUT..> and usind a number of combinations of align, valign and always get the same reults.

harold
0
Comment
Question by:kinsey
  • 7
  • 6
  • 3
  • +4
22 Comments
 
LVL 18

Expert Comment

by:SquareHead
ID: 13723919
Put the form tags outside the table...
0
 
LVL 33

Expert Comment

by:sajuks
ID: 13723927
You could specify the width and height of the button ?
<INPUT type=SUBMIT value = "Submit" name=test style="height:20px; width:65px">
0
 
LVL 3

Author Comment

by:kinsey
ID: 13724118
Using style="height:20px" cahnges the height of the button, but the cell scales with it.
The button oly takes up half the cell normaly. using style="height:20px" will change the height od the button but there is always about a 30 pixle gap between the bottom of the button and the bottom of the cell. The size of the gap does not change when I change the button from 1px to 100px

After playing with it some more, it does seem to be the <FORM> </FORM> that causes the gap.

Here is a one row example. Take the '! ' out of '<! FORM' and '<! /FORM' to see the problem

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Great Plains Query</TITLE>
<BODY text=#000000 vLink=#000080 aLink=#0000ff link=#800000 bgColor=#e0e0e0>
<CENTER><H1>Order Transfer</H1></CENTER>
<CENTER><TABLE bgColor=#f0f0f0 border=1>
  <CAPTION>Table Caption</CAPTION>
  <TBODY>
  <TR>
    <TD>Test</TD>
    <TD>One</TD>
    <TD>100XLG</A></TD>
    <TD>2</TD>
    <TD>4/12/2007</TD>
    <TD>AARONFIT0001</TD>
    <TD>
<! FORM action=OrderQuery.asp method=post>
<INPUT type=hidden name=BATCH>
<INPUT type=hidden name=BTYPE>
<BUTTON name=R1 type=submit VALUE="Transfer" style="height:25px" >Tran</BUTTON>
<! /FORM>
    </TD></TR></TBODY></TABLE></CENTER></BODY>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:kinsey
ID: 13724146
BTW I just tried it in FireFox and an old version of Netscape and it displays correctly.
Just another IE problem.

Would bumping the points help find a solution?
Let the bidding begin!
0
 

Expert Comment

by:mintxelas
ID: 13725255
I tried with this and worked fine both in IE and Firefox:
...
</TD>
<FORM action=# method=post>
<INPUT type=hidden name=BATCH>
<INPUT type=hidden name=BTYPE>
    <TD>
<BUTTON name=R1 type=submit VALUE="Transfer" style="height:25px" >Tran</BUTTON>
 </TD>
</FORM>
...
Just as SquareHead  already wrote.
0
 
LVL 3

Expert Comment

by:Binylkumar
ID: 13725456
Hai,
Try this, It's working fine IE,Netscape,FireFox...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Great Plains Query</TITLE>
<style type="text/css" >
.btn
{
    BORDER-RIGHT: #140064 1px solid;
    BORDER-TOP: #eeeeff 1px solid;
    FONT-SIZE: 11px;
    BORDER-LEFT: #eeeeff 1px solid;
    CURSOR: hand;
    COLOR: white;
    BORDER-BOTTOM: #140064 1px solid;
    FONT-FAMILY: Verdana;
    BACKGROUND-COLOR: #7357e8
}
</style>
<BODY text=#000000 vLink=#000080 aLink=#0000ff link=#800000 bgColor=#e0e0e0>
<CENTER><H1>Order Transfer</H1></CENTER>
<CENTER><FORM action=OrderQuery.asp method=post><TABLE bgColor=#f0f0f0 border=1>
  <CAPTION>Table Caption</CAPTION>
      <TBODY>
      <TR>
            <TD>Test</TD>
            <TD>One</TD>
            <TD>100XLG</A></TD>
            <TD>2</TD>
            <TD>4/12/2007</TD>
            <TD>AARONFIT0001</TD>
            <TD><BUTTON name=R1 class="btn" type=submit VALUE="Transfer" >Tran</BUTTON>
            <INPUT type=hidden name=BATCH>
            <INPUT type=hidden name=BTYPE>
            </TD>
      </TR>
      </TBODY>
      </TABLE>
</CENTER></FORM>
</BODY>

binylkumar
0
 
LVL 18

Expert Comment

by:SquareHead
ID: 13727738
kinsey, it's the form tags. They produce an extra line feed. You need to take them out of the table.
0
 

Accepted Solution

by:
shanncan earned 500 total points
ID: 13727845
Yeah - I found that the </form> tag is also a linefeed at the same time - that is why the line appears after the </form> tag. All you have to do is place the <form></form> tags outside the current <td> or <tr> or indeed the <table>.


best of luck...
   Shanncan.
0
 
LVL 6

Expert Comment

by:ResQTek Nancy
ID: 13728182
You can also specify style for the form tags:

form {
margin-top: 0px;
margin-bottom: 0px;
...
}
0
 
LVL 3

Author Comment

by:kinsey
ID: 13728194
IE Strikes Again!
There is no reason for the user agent to treat form tags as breaks.
No other browser I've tested (old Netscape, FireFox) have this behavor.
I'm sure IE7 will fix ALL these anomolies ;)

harold
0
 
LVL 18

Expert Comment

by:SquareHead
ID: 13729750
geez, what am I, chopped liver?
0
 
LVL 18

Expert Comment

by:SquareHead
ID: 13729790
0
 
LVL 3

Author Comment

by:kinsey
ID: 13731563
SquareHead,

I did not take them out oof the table. To do what I need I c could not.
What works is taking them out of the Cell.
 
<TR>
  <TD>
  </TD>
  <FORM>
     <TD>
         <INPUT..>
     </TD>
  </FORM>
</TR>
0
 
LVL 3

Author Comment

by:kinsey
ID: 13731588
shanncan
 Is the one that provied the correct solution.

0
 
LVL 18

Expert Comment

by:SquareHead
ID: 13733306
I disagree for two reasons:

1. You did not make clear which part of shanncan's suggestion resolved your issue, the
"All you have to do is place the <form></form> tags outside the current <td>"
portion or the
"or <tr> or indeed the <table>."
portion, which repeated my original suggestion.

But, more importantly,
2. Placing the form tags outside the <TR> tags yet within the <TABLE> tags is incorrect HTML syntax. In fact, this can be demonstrated by submitting the following examples to the W3C HTML validator:

Example #1, form within table tags (do a "view source" to see the code): http://rjak.com/test/formtest.html
This example will fail validation with the following error: "Line 11, column 41: document type does not allow element "FORM" here"

Example #2, form tags outside the table tags: http://rjak.com/test/formtest2.html
This example will pass validation.

You may submit the above URLs to the W3C HTML validator at: http://validator.w3.org/

Hey, I'm not one to argue over a few points, but I do want to make clear that my suggestion was the correct one. I have no problem with you asking the moderator to reverse the latest decision and award the points to shanncan if you want, I've made my point. You'd post that request in the Community Support T/A here: http://www.experts-exchange.com/Community_Support/
0
 

Expert Comment

by:shanncan
ID: 13734215
jesus - relax man.

you can have the points.
I just suggested what I deemed to work in the browsers that I use.

I'm all on for the W3 standards being adhered to.
0
 
LVL 3

Author Comment

by:kinsey
ID: 13736603
Regarless of the W3C the answer from shanncan works. SquareHead' answer could not work as each row of the table has it's own form and needs its own set of form tags. Placing the form tags outside the <TD> tags works on every brwoser I've tried.

Simply, it solves the problem.
0
 
LVL 6

Expert Comment

by:ResQTek Nancy
ID: 13736621
Three cheers!
0
 
LVL 18

Expert Comment

by:SquareHead
ID: 13737012
heh heh, you guys are right. My response was a little over the top. I'm pretty rigid when it comes to coding... points weren't the issue. Glad the workaround works for you kinsey.
0
 
LVL 3

Author Comment

by:kinsey
ID: 13739690

Apologies to all.. The 'best' answer would have to be nancy2k5 's.
adding form {margin-top: 0px;margin-bottom: 0px;} to the syle list solves the orginal problem of too much space, and passes W3C validation with the original tag structure.

I've never used <style> before, time to start.

Harold.
0
 
LVL 6

Expert Comment

by:ResQTek Nancy
ID: 13740028
I learned the form CSS the hard way, as well. I always try things on every element when I see weird spaces showing up.  It just happened to work! :)
0
 

Expert Comment

by:shanncan
ID: 13746778
:-) fair play.

Admin's...... can you switch the points over please....
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
The viewer will learn how to dynamically set the form action using jQuery.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month19 days, 6 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question