Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag 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?
Avatar of TedInAK
TedInAK
Flag of United States of America image

Try:

<table style="padding:0; margin:0">
Here you go:

<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
<input type="text" size="10" name="Promo">
</td>
</tr>
</table>
</html>
Avatar of callrs
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>
Avatar of 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.
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.
http://www.bigshinyplanet.com/Store/ShoppingCart1.asp

Click on the link above and you'll see what I'm talking about.
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>
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>
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>
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
Avatar of Yury Merezhkov
Yury Merezhkov
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial