473,221 Members | 1,900 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,221 software developers and data experts.

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

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
Jul 20 '05 #1
10 7816
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 -

Jul 20 '05 #2
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 -

Jul 20 '05 #3
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
Jul 20 '05 #4
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
Jul 20 '05 #5
"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 :)

Jul 20 '05 #6
"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 :)

Jul 20 '05 #7
"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
Jul 20 '05 #8
"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
Jul 20 '05 #9
"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 ?

Jul 20 '05 #10
"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 ?

Jul 20 '05 #11

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

61
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will...
0
by: yurps | last post by:
Hello here is my html, if you click the missing image in the first column on the left, the div is shown, when clicked again the div disappears...but the bottom border disappears as well...Is there...
19
by: Craig | last post by:
I have a 3rd party product that is quite old. It produces reports dynamically via the web. It users templates to do this. They are very basic, one looks like this. <html> <head>
11
by: Norman L. DeForest | last post by:
Am I misunderstanding the CSS specifications or is Firefox (version 1.0.6) (and Opera) doing the wrong thing? It appears that Firefox 1.0.6 includes the border in width calculations for tables...
3
by: JBH | last post by:
I'm having difficulty removing spacing between two rows in a table. Below is a copy of my source code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>About...
0
by: Thomas Scheiderich | last post by:
I have a table that has 3 image slices. The middle slice changes size based on size of browser window. This works great. My client wants the date to show over the image on the right. So what I...
1
by: James Black | last post by:
I am dynamically generating a table in IE to display some information. I will probably change it to divs later, but I just want to get it working properly first. In my div I have the following...
2
by: nino9stars | last post by:
Hello, I have just started messing with absolute positioning on webpages, and it definitely let's you do some creative things. Well, after much searching and help, I got the images I was using...
6
by: Romulo NF | last post by:
Greetings again to everyone, Im back to show this grid componenet i´ve developed. With this grid you can show the data like a normal table, remove the rows that you need, add rows, import data,...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.