How do you reduce table rows height with forms and images?

[John]

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0 and
cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom of
the picture and image. I need to make the height of the rows to be the
same as the textbox and image. How do I do this? I have tried even
setting the height of the table and all the <td> and <tr> tags to 1
but have not been succesful.

Thank you

John

[Els]

John wrote:

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0 and
cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom of
the picture and image. I need to make the height of the rows to be the
same as the textbox and image. How do I do this? I have tried even
setting the height of the table and all the <td> and <tr> tags to 1
but have not been succesful.

Have you tried <img src="img.jpg" style="display:block;"> ?
That might get rid of the space underneath the image, don't
know why you have space above it. Do you have a url?

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Els]

John wrote:

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0 and
cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom of
the picture and image. I need to make the height of the rows to be the
same as the textbox and image. How do I do this? I have tried even
setting the height of the table and all the <td> and <tr> tags to 1
but have not been succesful.

Have you tried <img src="img.jpg" style="display:block;"> ?
That might get rid of the space underneath the image, don't
know why you have space above it. Do you have a url?

--
Els

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[DU]

John wrote:

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0 and
cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom of
the picture and image. I need to make the height of the rows to be the
same as the textbox and image. How do I do this? I have tried even
setting the height of the table and all the <td> and <tr> tags to 1
but have not been succesful.

Thank you

John

I never have that sort of problem you describe because I do not resort
to table-design to begin with. Maybe the real issue with your webpage
difficulty is table design...

DU

[DU]

John wrote:

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0 and
cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom of
the picture and image. I need to make the height of the rows to be the
same as the textbox and image. How do I do this? I have tried even
setting the height of the table and all the <td> and <tr> tags to 1
but have not been succesful.

Thank you

John

I never have that sort of problem you describe because I do not resort
to table-design to begin with. Maybe the real issue with your webpage
difficulty is table design...

DU

[Pierre Goiffon]

"John" <jo******@fastermail.com> a écrit dans le message de
news:1a**************************@posting.google.c om

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0 and
cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom of
the picture and image. I need to make the height of the rows to be the
same as the textbox and image. How do I do this? I have tried even
setting the height of the table and all the <td> and <tr> tags to 1
but have not been succesful.

Almost every time, this is due to nice indent of the HTML code. Exemple :

<td>
<img src=...>
</td>

will produce extra space, although :

<td><img src=...></td>

will not.

But maybe you should show your code in order for us to help you :)

[Pierre Goiffon]

"John" <jo******@fastermail.com> a écrit dans le message de
news:1a**************************@posting.google.c om

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0 and
cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom of
the picture and image. I need to make the height of the rows to be the
same as the textbox and image. How do I do this? I have tried even
setting the height of the table and all the <td> and <tr> tags to 1
but have not been succesful.

Almost every time, this is due to nice indent of the HTML code. Exemple :

<td>
<img src=...>
</td>

will produce extra space, although :

<td><img src=...></td>

will not.

But maybe you should show your code in order for us to help you :)

[John]

"Pierre Goiffon" <pg******@nowhere.invalid> wrote in message news:<40***********************@news.free.fr>...

"John" <jo******@fastermail.com> a écrit dans le message de
news:1a**************************@posting.google.c om

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0 and
cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom of
the picture and image. I need to make the height of the rows to be the
same as the textbox and image. How do I do this? I have tried even
setting the height of the table and all the <td> and <tr> tags to 1
but have not been succesful.
Almost every time, this is due to nice indent of the HTML code. Exemple :

<td>
<img src=...>
</td>

will produce extra space, although :

<td><img src=...></td>

will not.

But maybe you should show your code in order for us to help you :)

Here is the code. There are spaces in Explorer but not in FrontPage.

<table cellpadding="0" cellspacing="0" >
<tr><td>
<div onMouseOver="showLayer4('searchforlayer');"
style="width:120; height:0; position:relative;">
<img src=graphics/choicebox120.jpg
style="position:absolute; left:0; top:0; z-index:-99;" alt=""
width=120>
<table ><td>
<center><font color=white>Search
From</font></center>
</td></table></div>
</td>
</tr>
<tr>
<td height=0 valign=top>
<div style="width:150px; Z-INDEX:5; height:0px;
position:relative;">
<DIV align=left id=searchforlayer
style="Z-INDEX:5; display:none; WIDTH:150px; POSITION: absolute;
LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT: blue 1px solid;
BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px solid;
BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<a href=# onclick="searchAll();">ALL</a><br>
<a href=# onclick="searchName();">Product
Name</a><br>
<a href=# onclick="searchSku();">Product
SKU</a><br>
</div</div>
</td>
</tr>
</table>
</td>
<td align=left valign=bottom>
<table cellpadding=0 cellspacing=0 >
<td>Show &nbsp; </td>
<td>
<table cellpadding="0" cellspacing="0" >
<tr><td>
<div
onMouseOver="showLayer4('itemsperpagelayer');" style="width:60;
height:0; position:relative;">
<img src=graphics/choicebox60.jpg
style="position:absolute; left:0; top:0; z-index:-99;" alt=""
width=60>
<table >
<td>
<center><font
color=white>20</font></center>
</td>
</table>
</div>
</td>
</tr>
<tr>
<td height=0 valign=top>
<div style="width:50px; Z-INDEX:5;
height:0px; position:relative;">
<DIV align=left id=itemsperpagelayer
style="Z-INDEX:5; display:none; WIDTH:50px;
POSITION: absolute; LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT:
blue 1px solid; BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px
solid; BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<a href=products.php?showperpage=8>8</a><br>
<a
href=products.php?showperpage=12>12</a><br>
<a
href=products.php?showperpage=16>16</a><br>
</div</div>
</td>
</tr>
</table>
</td><td>&nbsp; per page </td>
</table>
</td></tr>
</table>
<table width=100% cellpadding=0 cellspacing=0 ><tr><td
colspan=4><hr></td></tr>
<tr>
<td colspan=4>
<table cellpadding=0 cellspacing=0 width=100%><td
align=center>
<b> Sort By:</b>&nbsp;</td><td><table>
<tr><td>
<div onMouseOver="showLayer4('catalogCategoryLayer');"
style="width:100; height:0; position:relative;">
<img src=graphics/choicebox100.jpg
style="position:absolute; left:0; top:0; z-index:-99;" alt=""
width=100>
<table><td>
<center><font color=white>Catalogs</font></center>
</td></table></div>
</td>
</tr>
<tr>
<td height=0 valign=top>
<div style="width:150px; Z-INDEX:5; height:0px;
position:relative;">
<DIV align=left id=catalogCategoryLayer
style="Z-INDEX:5; display:none; WIDTH:150px;
POSITION: absolute; LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT:
blue 1px solid; BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px
solid; BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<A
href=products.php?sortby=catalog&manuid=1&category =0>Amazon </A><br>
<A
href=products.php?sortby=catalog&manuid=2&category =0>Barnes and Noble
</A><br>
<A
href=products.php?sortby=catalog&manuid=3&category =0>Borders </A><br>
</div</div>
</td>
</tr>
</table></td> <td><table cellpadding=0 cellspacing=0 <tr><td>
<div onMouseOver="showLayer4('pricerangelayer');"
style="width:120; height:0; position:relative;">
<img src=graphics/choicebox120.jpg style="position:absolute; left:0;
top:0; z-index:-99;" alt="" width=120>
<table ><td>
<center><font color=white>Price Range</font></center>
</td></table></div>
</td>
</tr>

<tr>
<td height=0 valign=top>
<div style="width:150px; Z-INDEX:5; height:0px;
position:relative;">
<DIV align=left id=pricerangelayer
style="Z-INDEX:5; display:none; WIDTH:150px;
POSITION: absolute; LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT:
blue 1px solid; BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px
solid; BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<a href=products.php?sortby=pricerange&pricerange=000 00005>$0-$5</a><br>
<a href=products.php?sortby=pricerange&pricerange=000 60010>$6-$10</a><br>
<a href=products.php?sortby=pricerange&pricerange=001 10020>$11-$20</a><br>
</div</div>
</td>
</tr>
</table> </td><td><table cellpadding=0 cellspacing=0

<tr><td>
<div onMouseOver="showLayer4('selecttypeLayer');"
style="width:120; height:0; position:relative;">
<img src=graphics/choicebox120.jpg style="position:absolute; left:0;
top:0; z-index:-99;" alt="" width=120>
<table ><td>
<center><font color=white>Select Type</font></center>
</td></table></div>
</td>
</tr>
<tr>
<td height=0 valign=top>
<div style="width:150px; Z-INDEX:5; height:0px;
position:relative;">
<DIV align=left id=selecttypeLayer
style="Z-INDEX:5; display:none; WIDTH:150px;
POSITION: absolute; LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT:
blue 1px solid; BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px
solid; BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<a href=products.php?varioustypes=discount&sortby=var ious>Discount</a><br>
<a href=products.php?varioustypes=newest&sortby=vario us>Newest</a><br>
<a href=products.php?varioustypes=topseller&sortby=va rious>Top
Seller</a><br>
</div</div>
</td>
</tr>
</table>


John

[John]

"Pierre Goiffon" <pg******@nowhere.invalid> wrote in message news:<40***********************@news.free.fr>...

"John" <jo******@fastermail.com> a écrit dans le message de
news:1a**************************@posting.google.c om

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0 and
cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom of
the picture and image. I need to make the height of the rows to be the
same as the textbox and image. How do I do this? I have tried even
setting the height of the table and all the <td> and <tr> tags to 1
but have not been succesful.
Almost every time, this is due to nice indent of the HTML code. Exemple :

<td>
<img src=...>
</td>

will produce extra space, although :

<td><img src=...></td>

will not.

But maybe you should show your code in order for us to help you :)

Here is the code. There are spaces in Explorer but not in FrontPage.

<table cellpadding="0" cellspacing="0" >
<tr><td>
<div onMouseOver="showLayer4('searchforlayer');"
style="width:120; height:0; position:relative;">
<img src=graphics/choicebox120.jpg
style="position:absolute; left:0; top:0; z-index:-99;" alt=""
width=120>
<table ><td>
<center><font color=white>Search
From</font></center>
</td></table></div>
</td>
</tr>
<tr>
<td height=0 valign=top>
<div style="width:150px; Z-INDEX:5; height:0px;
position:relative;">
<DIV align=left id=searchforlayer
style="Z-INDEX:5; display:none; WIDTH:150px; POSITION: absolute;
LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT: blue 1px solid;
BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px solid;
BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<a href=# onclick="searchAll();">ALL</a><br>
<a href=# onclick="searchName();">Product
Name</a><br>
<a href=# onclick="searchSku();">Product
SKU</a><br>
</div</div>
</td>
</tr>
</table>
</td>
<td align=left valign=bottom>
<table cellpadding=0 cellspacing=0 >
<td>Show &nbsp; </td>
<td>
<table cellpadding="0" cellspacing="0" >
<tr><td>
<div
onMouseOver="showLayer4('itemsperpagelayer');" style="width:60;
height:0; position:relative;">
<img src=graphics/choicebox60.jpg
style="position:absolute; left:0; top:0; z-index:-99;" alt=""
width=60>
<table >
<td>
<center><font
color=white>20</font></center>
</td>
</table>
</div>
</td>
</tr>
<tr>
<td height=0 valign=top>
<div style="width:50px; Z-INDEX:5;
height:0px; position:relative;">
<DIV align=left id=itemsperpagelayer
style="Z-INDEX:5; display:none; WIDTH:50px;
POSITION: absolute; LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT:
blue 1px solid; BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px
solid; BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<a href=products.php?showperpage=8>8</a><br>
<a
href=products.php?showperpage=12>12</a><br>
<a
href=products.php?showperpage=16>16</a><br>
</div</div>
</td>
</tr>
</table>
</td><td>&nbsp; per page </td>
</table>
</td></tr>
</table>
<table width=100% cellpadding=0 cellspacing=0 ><tr><td
colspan=4><hr></td></tr>
<tr>
<td colspan=4>
<table cellpadding=0 cellspacing=0 width=100%><td
align=center>
<b> Sort By:</b>&nbsp;</td><td><table>
<tr><td>
<div onMouseOver="showLayer4('catalogCategoryLayer');"
style="width:100; height:0; position:relative;">
<img src=graphics/choicebox100.jpg
style="position:absolute; left:0; top:0; z-index:-99;" alt=""
width=100>
<table><td>
<center><font color=white>Catalogs</font></center>
</td></table></div>
</td>
</tr>
<tr>
<td height=0 valign=top>
<div style="width:150px; Z-INDEX:5; height:0px;
position:relative;">
<DIV align=left id=catalogCategoryLayer
style="Z-INDEX:5; display:none; WIDTH:150px;
POSITION: absolute; LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT:
blue 1px solid; BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px
solid; BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<A
href=products.php?sortby=catalog&manuid=1&category =0>Amazon </A><br>
<A
href=products.php?sortby=catalog&manuid=2&category =0>Barnes and Noble
</A><br>
<A
href=products.php?sortby=catalog&manuid=3&category =0>Borders </A><br>
</div</div>
</td>
</tr>
</table></td> <td><table cellpadding=0 cellspacing=0 <tr><td>
<div onMouseOver="showLayer4('pricerangelayer');"
style="width:120; height:0; position:relative;">
<img src=graphics/choicebox120.jpg style="position:absolute; left:0;
top:0; z-index:-99;" alt="" width=120>
<table ><td>
<center><font color=white>Price Range</font></center>
</td></table></div>
</td>
</tr>

<tr>
<td height=0 valign=top>
<div style="width:150px; Z-INDEX:5; height:0px;
position:relative;">
<DIV align=left id=pricerangelayer
style="Z-INDEX:5; display:none; WIDTH:150px;
POSITION: absolute; LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT:
blue 1px solid; BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px
solid; BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<a href=products.php?sortby=pricerange&pricerange=000 00005>$0-$5</a><br>
<a href=products.php?sortby=pricerange&pricerange=000 60010>$6-$10</a><br>
<a href=products.php?sortby=pricerange&pricerange=001 10020>$11-$20</a><br>
</div</div>
</td>
</tr>
</table> </td><td><table cellpadding=0 cellspacing=0

<tr><td>
<div onMouseOver="showLayer4('selecttypeLayer');"
style="width:120; height:0; position:relative;">
<img src=graphics/choicebox120.jpg style="position:absolute; left:0;
top:0; z-index:-99;" alt="" width=120>
<table ><td>
<center><font color=white>Select Type</font></center>
</td></table></div>
</td>
</tr>
<tr>
<td height=0 valign=top>
<div style="width:150px; Z-INDEX:5; height:0px;
position:relative;">
<DIV align=left id=selecttypeLayer
style="Z-INDEX:5; display:none; WIDTH:150px;
POSITION: absolute; LEFT: 0px; TOP: 0px; HEIGHT: 0px; BORDER-LEFT:
blue 1px solid; BORDER-BOTTOM: blue 1px solid; BORDER-TOP: blue 1px
solid; BORDER-RIGHT: blue 1px solid; BACKGROUND-COLOR: #FFFFFF;
layer-background-color: #FFFFFF">
<a href=products.php?varioustypes=discount&sortby=var ious>Discount</a><br>
<a href=products.php?varioustypes=newest&sortby=vario us>Newest</a><br>
<a href=products.php?varioustypes=topseller&sortby=va rious>Top
Seller</a><br>
</div</div>
</td>
</tr>
</table>


John

[Pierre Goiffon]

"John" <jo******@fastermail.com> a écrit dans le message de
news:1a**************************@posting.google.c om

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0
and cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom
of the picture and image.

Almost every time, this is due to nice indent of the HTML code.

Here is the code.

(...)

Hu, I think this code would be far much light with a good use of CSS
But that's not the point. Can you try to remove indent and get <td>, </td>
etc close to their contents ?

[Pierre Goiffon]

"John" <jo******@fastermail.com> a écrit dans le message de
news:1a**************************@posting.google.c om

I have a table with two rows. On the first row is a text box and in
the second row is an image. I have set the table cellpadding to 0
and cellspacing to 0.
The table is leaving extra spaces in the rows on the top and bottom
of the picture and image.

Almost every time, this is due to nice indent of the HTML code.

Here is the code.

(...)

Hu, I think this code would be far much light with a good use of CSS
But that's not the point. Can you try to remove indent and get <td>, </td>
etc close to their contents ?