473,695 Members | 2,820 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 10522
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
2008
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
3167
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
18542
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
19182
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
16874
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
7416
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
2113
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
3704
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
8631
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
8572
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8984
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...
0
8825
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
7661
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...
1
6491
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4340
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4579
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3003
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.