473,717 Members | 2,051 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Unwanted Table Padding

Tom
I am having a problem where an extra gap (whitespace, padding) appears
in a table cell where I don't want it. The data fed in the table is
via dynamic HTML, so the amount in the middle cell may vary. When the
data in the middle table cell is little and that cell's height is
small, an unwanted gap appears in the first table cell. I would prefer
to have all additional blank space at the bottom of the table (last
row) and not have any in the top row.

I don't know how to get rid of the unwanted padding in the first row,
and have it all appear in the last row.

Here is the HTML, Tom

<html>
<head>
<title>Test</title>
</head>
<body>
<p>Trying to solve problem when too little messages in Message
Console row (loaded by
JavaScript) causes a gap to appear in the botttom of the 24 Hour
section (before the
Left Hotspot and Message Console row).</p>

<table border="1px" width="100%" >
<tr>
<td valign="top" colspan="2" width="780" style="vertical-align:
top; padding-bottom: 0px;" >
<p style="backgrou nd-color: cyan; padding-bottom: 0px; "24 Hour
Section - Do not want
any padding/white area between here and console.
</p>
</td>
<td valign="top" rowspan="2" width="220px" ><p
style="backgrou nd-color: cyan;">Right Hotspot</p>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<p>Any padding after here is okay</p>
</td>
</tr>
<tr valign="top">
<td valign="top" width="220px">< p style="backgrou nd-color:
cyan;">Left Hotspot</p>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<p>Any empty padding after here is okay</p>
</td>
<td valign="top" width="804" >
<table width="100%">
<tr><td><p style="backgrou nd-color: cyan;">Message
Console</p></td></tr>
<tr><td style="backgrou nd-color: #8888ff;">Messa ge # 4</td></tr>
<tr><td style="backgrou nd-color: #ffbb88;">Messa ge # 3</td></tr>
<tr><td style="backgrou nd-color: #8888ff;">Messa ge # 2</td></tr>
<tr><td style="backgrou nd-color: #ff8888;">Messa ge # 1. Any padding
after here is okay.</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Sep 3 '06 #1
5 10529
On 2006-09-03, Tom wrote:
I am having a problem where an extra gap (whitespace, padding) appears
in a table cell where I don't want it. The data fed in the table is
via dynamic HTML, so the amount in the middle cell may vary. When the
data in the middle table cell is little and that cell's height is
small, an unwanted gap appears in the first table cell. I would prefer
to have all additional blank space at the bottom of the table (last
row) and not have any in the top row.

I don't know how to get rid of the unwanted padding in the first row,
and have it all appear in the last row.
You would be better off using CSS for the layout instead of tables.

However, try this:

<td valign="top" colspan="2" style="vertical-align: top;
padding-bottom: 0px; height: 1em;" >
<table border="1px" width="100%" >
<tr>
<td valign="top" colspan="2" width="780" style="vertical-align:
top; padding-bottom: 0px;" >
<p style="backgrou nd-color: cyan; padding-bottom: 0px; "24 Hour
Section - Do not want
any padding/white area between here and console.
</p>
</td>

--
Chris F.A. Johnson <http://cfaj.freeshell. org>
=============== =============== =============== =============== =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Sep 3 '06 #2
Gazing into my crystal ball I observed "Tom" <th*****@sygrat ion.com>
writing in news:11******** **************@ 74g2000cwt.goog legroups.com:
I am having a problem where an extra gap (whitespace, padding) appears
in a table cell where I don't want it.
No, you have a problem abusing tables. Tables are for data, not
positioning of page elements.
>The data fed in the table is
via dynamic HTML, so the amount in the middle cell may vary. When the
data in the middle table cell is little and that cell's height is
small, an unwanted gap appears in the first table cell. I would
prefer to have all additional blank space at the bottom of the table
(last row) and not have any in the top row.

I don't know how to get rid of the unwanted padding in the first row,
and have it all appear in the last row.
A bit of CSS will go a long way, and IMHO, is a heck of a lot easier to
deal with.
>
Here is the HTML, Tom
No DocType?
<http://www.w3.org/TR/html401/struct/...nt_type_declar
ation-3>
><html>
<head>
<title>Test</title>
</head>
<body>
<p>Trying to solve problem when too little messages in Message
Console row (loaded by
JavaScript) causes a gap to appear in the botttom of the 24 Hour
section (before the
Left Hotspot and Message Console row).</p>

<table border="1px" width="100%" >
<tr>
<td valign="top" colspan="2" width="780" style="vertical-align:
top; padding-bottom: 0px;" >
<p style="backgrou nd-color: cyan; padding-bottom: 0px; "24 Hour
Section - Do not want
any padding/white area between here and console.
</p>
</td>
<td valign="top" rowspan="2" width="220px" ><p
style="backgrou nd-color: cyan;">Right Hotspot</p>
Is this some sort of heading? Then it should have heading markup.
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
These are ALL level 1 headings? My general rule of thumb is one H1 per
page, with subheadings as needed.
<p>Any padding after here is okay</p>
</td>
</tr>
<tr valign="top">
<td valign="top" width="220px">< p style="backgrou nd-color:
cyan;">Left Hotspot</p>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<p>Any empty padding after here is okay</p>
</td>
<td valign="top" width="804" >
<table width="100%">
Egads! Nested tables! Run....
<tr><td><p style="backgrou nd-color: cyan;">Message
Console</p></td></tr>
<tr><td style="backgrou nd-color: #8888ff;">Messa ge # 4</td></tr>
<tr><td style="backgrou nd-color: #ffbb88;">Messa ge # 3</td></tr>
<tr><td style="backgrou nd-color: #8888ff;">Messa ge # 2</td></tr>
<tr><td style="backgrou nd-color: #ff8888;">Messa ge # 1. Any
padding
after here is okay.</td></tr>
This looks like a list. Use list markup.
</table>
</td>
</tr>
</table>
</body>
</html>

You will do a lot better if you rethink this without presentational
markup. You might want to look up three column CSS, there are plenty of
examples out there.

Still not convinced? Especially with dynamic content, separating
content and presentation is a lot easier, a) to write because the server
only has to put of plain html with no presenation, b) finding errors is
a lot easier, c) making changes site wide is very easy.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Sep 3 '06 #3
"Chris F.A. Johnson" <cf********@gma il.comwrote:
You would be better off using CSS for the layout instead of tables.

However, try this:

<td valign="top" colspan="2" style="vertical-align: top;
padding-bottom: 0px; height: 1em;" >
There a reason to use both valign="top" and style="vertical-align:top;"?

I avoid the use of the HTML attribute, "valign", myself.

--
Jim Carlock
Post replies to the group.
Sep 3 '06 #4
Tom
This is a reply to the 3 responses I received. The solution received
from Chris works in Firefox but does not help in IE 6.

Chris F.A. Johnson wrote:
You would be better off using CSS for the layout instead of tables.

However, try this:

<td valign="top" colspan="2" style="vertical-align: top;
padding-bottom: 0px; height: 1em;" >
I have been able to ignore CSS .. up until now. I will definitely look
into doing much more with CSS.

The additional heigth attribute fixed it in Firefox, but did not do
anything in IE 6 (unfortunately 99% of the users access my site with
IE).

Adrienne Boswell wrote:
These are ALL level 1 headings? My general rule of thumb is one H1 per
page, with subheadings as needed.

You will do a lot better if you rethink this without presentational
markup. You might want to look up three column CSS, there are plenty of
examples out there.
The h1 headings were used in the example only to fill up the space.
Again, I will do my CSS homework.

Jim Carlock wrote:
[Is] there a reason to use both valign="top" and style="vertical-align:top;"?
I avoid the use of the HTML attribute, "valign", myself.
I don't know why, and I tend to agree with you.

Sep 3 '06 #5
On 2006-09-03, Jim Carlock wrote:
"Chris F.A. Johnson" <cf********@gma il.comwrote:
>You would be better off using CSS for the layout instead of tables.

However, try this:

<td valign="top" colspan="2" style="vertical-align: top;
padding-bottom: 0px; height: 1em;" >

There a reason to use both valign="top" and style="vertical-align:top;"?
No. It was in the OP and I didn't remove it.
I avoid the use of the HTML attribute, "valign", myself.
Ditto.

--
Chris F.A. Johnson <http://cfaj.freeshell. org>
=============== =============== =============== =============== =======
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
Sep 4 '06 #6

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

Similar topics

3
2009
by: Brynjar Glesnes | last post by:
Hi, I've browsed the Fop FAQ, usenet and the internet hoping to find a solution to my problem, but in vain. I am using Xerces 2.6.2, Xalan-J 2.6.0 and Fop 0.20-5 to create PDF-documents. In the rendered PDF there is an unwanted whitespace after each xsl:value-of. An example: What I want to render to "Doe, John" renders to "Doe ,
6
3170
by: Steve K | last post by:
Hi, The site I've just created, when tested on a windows PC has an unwanted white space (about 2-4 pixels high) in between two tables. I would like there to be zero space there. Here is the test site: http://aem.cornell.edu/farmlink/ The line goes all the way across the page and it's where the NYFarmlink Logo is, the two hands shaking, it goes right through that graphic and
23
18574
by: MattB | last post by:
Hello please help, I have a table cell with a div in it. The div has a width of 300px. but when it is rendered it puts extra space into the table cell. Here's the style <style> #treecontainer {
3
3504
by: Brian | last post by:
I have a page with content, navigation, and footer divs, in that order. The nav div has position: absolute, width 8em, on green background. The other divs have an 8em green left border, such that the nav sits on that border. There is a thin red top border on footer for testing. http://www.tsmchughs.com/test/ On that page, all is as expected. However, on the long page http://www.tsmchughs.com/test/long
2
19185
by: Knoxy | last post by:
Hello, I've noticed one or two people post on this before but nobody seems to have replied so raising the issue again... is this a known IE6 CSS bug? I have placed the following in my stylesheet file: ..formContentTable
4
16875
by: Bernd Goldschmidt | last post by:
Hi. I've got a somewhat wired problems with an extra space between table rows in Mozilla and Opera (IE works fine). With the code below, cells within a row align seamlessly, but there is a space of about 5px between table rows. Any Idea?
7
7419
by: ITM | last post by:
Can anyone tell me how I can prevent Access adding trailing spaces when I insert a value into a Text column? For example, if I execute the following statement: UPDATE Log SET Log.Title = 'Testing' WHERE Log.Identifier=1; ....then the following statement:
5
2117
by: outstretchedarm | last post by:
I'm extremely new to javascript and to programming in general. I am trying to create an interactive table. I have already created the table with constants, in the key of C (it is for music). what I would like to do is to create a dropdown box that would enable the user to select all 12 keys, then based on that choice, have the whole table re-calculate, basically transposing all the data up or down. how would I go about doing this.
2
3707
by: crjeske | last post by:
Hi, I've been looking for answers to this for HOURS. I'm very new to CSS. I've written a code for there to be three columns. a HEADER, MAIN and FOOTER. I don't want there to be any space between the three of them, yet, I can't seem to figure out how to do this. I've got all my margin's and padding's set to 0. Yet, there's still a space when I view in Firefox. Here is my css ... <code> @charset "utf-8"; body { background: #666666;...
0
8823
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9348
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9202
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9109
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9048
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7981
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5970
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4739
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3177
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

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.