Avatar of Bruce Gust
Bruce Gust
Flag for United States of America asked on

Eliminating extra space in cell surrounding a textbox

Here's my code:

<table>
<tr>
<td>
<input type="text" size="10" name="Promo">
</td>
</tr>
</table>

There's acutally more to it than that, but the bottom line is that when I introduce a textbox into a cell, the cell automatically superimposes about 20 pixels of blank space around each side of the textbox. What can I do to eliminate that extra space?
HTML

Avatar of undefined
Last Comment
Yury Merezhkov

8/22/2022 - Mon
TedInAK

Try:

<table style="padding:0; margin:0">
Yury Merezhkov

Here you go:

<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text" size="10" name="Promo">
</td>
</tr>
</table>
</html>
callrs

Spacing exactly where...
In this demo, the a & b letters edge up against the box with only a pixel or 2 inbetween:
<table>
<tr>
<td>
a<input type="text" size="10" name="Promo">b
</table>
<table>
<tr>
<td>
a b
</table>
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Bruce Gust

ASKER
Head out to http://www.bigshinyplanet.com/Store/ShoppingCart.asp and you'll see exactly what I'm dealing with.

Notice the "Quantity" field has a textbox in it. I have to add another field below just above the "Proof Order" button in order to accommodate a Promotion Code. You would think that if I added another textbox below the Quantity field - as long as it wasn't bigger than the Quanity cell - it would remain the same size...

Nope.

The Quantity column expands in a way that looks bizarre because of the extra space around the field. I've got the size of the Promo Code textbox set at 15 while the Quantity textbox is set at 10. Throw that Promo Code textbox into the mix and the width of that whole column expands beyond the width of the textboxes and I want the width of the column to match the width of the Promo Code textbox.
TedInAK

Could you include on your site a test page with the Promo Code box on it?  Be easier to troubleshoot while seeing the problem you saw.
Bruce Gust

ASKER
http://www.bigshinyplanet.com/Store/ShoppingCart1.asp

Click on the link above and you'll see what I'm talking about.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Yury Merezhkov

Is this what you wanted:

                        <table border="1" width="600">
                        <tr>
                        <td align="center" bgcolor="#6E6F6F">
                        <font color="white">Name</font>

                        </td>
                        <td align="center" bgcolor="#6E6F6F">
                        <font color="white">Price</font>
                        </td>
                        <td align="center" bgcolor="#6E6F6F">
                        <font color="white">Quantity</font>
                        </td>
                        
                        <SCRIPT LANGUAGE="JavaScript">
                        function Description1() {
                        var newWindow = open("Description.asp?ID=1", "secondWindow", "scrollbars=1, width=500,height=500");
                        }
                        </SCRIPT>

                        <tr>
                        <td>
                        <a href="#" title="Sixty Days" onclick="Description1();return false">UP! Shiny Case</a>
                        </td>
                        <td align="center">
                        159.95
                        </td>
                        <td align="center" width="20%">
                        <input type="textbox" size="10" name="Quantity" value=""><input type="hidden" name="ID" value="1">

                        </td>
                        </tr>
                        
                        <SCRIPT LANGUAGE="JavaScript">
                        function Description2() {
                        var newWindow = open("Description.asp?ID=3", "secondWindow", "scrollbars=1, width=500,height=500");
                        }
                        </SCRIPT>
                        <tr>
                        <td>
                        <a href="#" title="Sixty Days" onclick="Description2();return false">UP! ShinyPack</a>
                        </td>
                        <td align="center">

                        49.95
                        </td>
                        <td align="center">
                        <input type="textbox" size="10" name="Quantity" value=""><input type="hidden" name="ID" value="3">
                        </td>
                        </tr>
                        <tr>
                        <td colspan="3" align="right">
                        <input type="textbox" size="15" name="Promo" value="">
                        </td>
                        </tr>
                        <tr>
                        <td align="center" bgcolor="#6E6F6F" colspan="3">
                        <input type="Submit" value="Proof Order">

                        </td>
                        </tr>
                        </table>
Yury Merezhkov

Actually, this one is better:

                        <table border="1" width="600">
                        <tr>
                        <td align="center" bgcolor="#6E6F6F">
                        <font color="white">Name</font>

                        </td>
                        <td align="center" bgcolor="#6E6F6F">
                        <font color="white">Price</font>
                        </td>
                        <td align="center" bgcolor="#6E6F6F">
                        <font color="white">Quantity</font>
                        </td>
                        
                        <SCRIPT LANGUAGE="JavaScript">
                        function Description1() {
                        var newWindow = open("Description.asp?ID=1", "secondWindow", "scrollbars=1, width=500,height=500");
                        }
                        </SCRIPT>

                        <tr>
                        <td>
                        <a href="#" title="Sixty Days" onclick="Description1();return false">UP! Shiny Case</a>
                        </td>
                        <td align="center">
                        159.95
                        </td>
                        <td align="center" width="20%">
                        <input type="textbox" size="10" name="Quantity" value=""><input type="hidden" name="ID" value="1">

                        </td>
                        </tr>
                        
                        <SCRIPT LANGUAGE="JavaScript">
                        function Description2() {
                        var newWindow = open("Description.asp?ID=3", "secondWindow", "scrollbars=1, width=500,height=500");
                        }
                        </SCRIPT>
                        <tr>
                        <td>
                        <a href="#" title="Sixty Days" onclick="Description2();return false">UP! ShinyPack</a>
                        </td>
                        <td align="center">

                        49.95
                        </td>
                        <td align="center">
                        <input type="textbox" size="10" name="Quantity" value=""><input type="hidden" name="ID" value="3">
                        </td>
                        </tr>
                        <tr>
                        <td colspan="3" align="right" valign="middle">
                        Promotion Code:&nbsp;<input type="textbox" size="15" name="Promo" value="">
                        </td>
                        </tr>
                        <tr>
                        <td align="center" bgcolor="#6E6F6F" colspan="3">
                        <input type="Submit" value="Proof Order">

                        </td>
                        </tr>
                        </table>
Bruce Gust

ASKER
I want this:

<tr>
<td colspan="2" bgcolor="#CCCCCC" align="right">
<b>Promotion Code:</b>
</td>
<td align="center">

<!- I want the column width to wrap around this field, as opposed to there being extra space around it. Your suggestion doesn't preserve the look that I've got as far as "Promotion Code" being in grey just like the Sub Total field. ->

<input type="textbox" size="15" name="PromoCode" value="Promotion Code">
</td>
</tr>
Your help has saved me hundreds of hours of internet surfing.
fblack61
Yury Merezhkov

There is no extra space around the field! This is what it looks like:

http://i59.photobucket.com/albums/g283/RealSnaD/untitled-1.jpg
ASKER CERTIFIED SOLUTION
Yury Merezhkov

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question