kinsey
asked on
HTML Table Row height with button
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
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
Put the form tags outside the table...
You could specify the width and height of the button ?
<INPUT type=SUBMIT value = "Submit" name=test style="height:20px; width:65px">
<INPUT type=SUBMIT value = "Submit" name=test style="height:20px; width:65px">
ASKER
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>
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>
ASKER
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!
Just another IE problem.
Would bumping the points help find a solution?
Let the bidding begin!
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.
...
</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.
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
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
kinsey, it's the form tags. They produce an extra line feed. You need to take them out of the table.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You can also specify style for the form tags:
form {
margin-top: 0px;
margin-bottom: 0px;
...
}
form {
margin-top: 0px;
margin-bottom: 0px;
...
}
ASKER
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
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
geez, what am I, chopped liver?
ASKER
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>
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>
ASKER
shanncan
Is the one that provied the correct solution.
Is the one that provied the correct solution.
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: https://www.experts-exchange.com/Community_Support/
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: https://www.experts-exchange.com/Community_Support/
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.
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.
ASKER
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.
Simply, it solves the problem.
Three cheers!
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.
ASKER
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.
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! :)
:-) fair play.
Admin's...... can you switch the points over please....
Admin's...... can you switch the points over please....