Table height not cooperating 1

[OsakaWebbie]

I'm trying to lay out a table to print addresses on envelopes, and some of them (Japanese addresses) need to have the return address in the lower right corner as oriented in my table. I use valign=bottom for the cell with the return address. It looks right on the screen (as far as I can tell - it's hard to measure), but for some reason, when I print, even if I specify the table height in pixels, and even if I make one column span all the rows and put a one-pixel white gif in it with the height specified, the return address isn't as far down as it should be. And it's not my miscalculation of how tall it should be - I tried increasing the height even more, but the return address graphic doesn't move down. It seems that the printing algorithm decides that the table doesn't need to be that tall! It works if I type text in an unused cell, but naturally the height of several "p" lines is not consistent, so I can't just make the text white and leave it there (and perhaps if I make it white the printing algorithm will again try to think for me - I haven't tested that because I know it's unacceptable as a permanent solution). Any thoughts?

Here is my test code (ultimately it will be filled by PHP from a database, but I need to get the layout right first). I cleaned it up for the forum by replacing all Japanese text, including the name of the font I use. The reason it has to be so crazy (like each digit of the postal code in a separate cell, and the return address as a graphic) is because of how Japanese envelopes are expected to be addressed, and the limitations of doing that layout in HTML. Don't worry about that - just help me get the table to really print 495 pixels tall. Thanks!

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; style=&quot;page-break-before: always&quot; width=&quot;916&quot; height=&quot;495&quot;>
<tr height=&quot;42&quot;>
<td rowspan=&quot;9&quot; width=&quot;117&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;495&quot;><img src=&quot;graphics/white_pixel.gif&quot; alt=&quot;&quot; height=&quot;495&quot; width=&quot;117&quot; border=&quot;0&quot;></td>
<td width=&quot;98&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;42&quot;></td>
<td width=&quot;637&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;42&quot;></td>
<td width=&quot;64&quot; valign=&quot;bottom&quot; align=&quot;right&quot; height=&quot;42&quot;></td>
</tr>
<tr height=&quot;33&quot;>
<td width=&quot;98&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;33&quot;><b><font size=&quot;6&quot; face=&quot;Japanese sideways font&quot;>7</font></b></td>
<td width=&quot;637&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;33&quot;></td>
<td bgcolor=&quot;white&quot; width=&quot;64&quot; valign=&quot;bottom&quot; align=&quot;right&quot; rowspan=&quot;8&quot; height=&quot;451&quot;><img border=&quot;0&quot; src=&quot;return_address.gif&quot; width=&quot;50&quot; height=&quot;147&quot;></td>
</tr>
<tr height=&quot;33&quot;>
<td width=&quot;98&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;33&quot;><font size=&quot;6&quot; face=&quot;Japanese sideways font&quot;>6</font></td>
<td width=&quot;637&quot; height=&quot;33&quot;></td>
</tr>
<tr height=&quot;33&quot;>
<td width=&quot;98&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;33&quot;><font size=&quot;6&quot; face=&quot;Japanese sideways font&quot;>5</font></td>
<td rowspan=&quot;6&quot; align=&quot;left&quot; valign=&quot;top&quot; width=&quot;637&quot; height=&quot;381&quot;><b><font size=&quot;5&quot; face=&quot;Japanese sideways font&quot;>First Address Line<br>
Second Address Line<br>
&nbsp;<br>
</font><font size=&quot;6&quot; face=&quot;Japanese sideways font&quot;>Name</font></b></td>
</tr>
<tr height=&quot;51&quot;>
<td width=&quot;98&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;51&quot;><font size=&quot;6&quot; face=&quot;Japanese sideways font&quot;>1</font></td>
</tr>
<tr height=&quot;33&quot;>
<td width=&quot;98&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;33&quot;><font size=&quot;6&quot; face=&quot;Japanese sideways font&quot;>1</font></td>
</tr>
<tr height=&quot;33&quot;>
<td width=&quot;98&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;33&quot;><font size=&quot;6&quot; face=&quot;Japanese sideways font&quot;>1</font></td>
</tr>
<tr height=&quot;33&quot;>
<td width=&quot;98&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;33&quot;><font size=&quot;6&quot; face=&quot;Japanese sideways font&quot;>1</font></td>
</tr>
<tr height=&quot;188&quot;>
<td width=&quot;98&quot; valign=&quot;top&quot; align=&quot;left&quot; height=&quot;188&quot;></td>
</tr>
</table>

 

[vbkris]

can u give us a link?

Known is handfull, Unknown is worldfull

 

[Foamcow]

Seems to work ok when printing from IE6 on Windows.
Though it does make 2 pages, the first of which is blank.

 

[OsakaWebbie]

vbkris: The real code is currently only on a local web server (only accessible on my home LAN), because none of the web hosters I know of (for a reasonable price) have MySQL set up to handle Shift-JIS text (a Japanese multi-byte character encoding scheme).

A friend who was helping me with some issues put a static example on his web site for me, and it's still there:

http://www.davehawley.com/Printing/envelopeModel.htm

But it has Japanese fonts (ones that print sideways) in it, so if your computer isn't set up for that, you may not be able to see much for the Japanese envelopes. And the size/spacing is not the same - what's on that page is from when it was just in the concept stage, before I started actually measuring envelopes and trying to get the sizes right.

foamcow: That's actually the second of two tables that are in my testing sample - the first was an example of a western address, and since there is nothing needed at the bottom, it works fine. But interestingly, I haven't seen it spit out an extra page even when the first table also had a page break - the above-referenced code has a page break for every table, and last time I ran it on my system (also IE 6.0 on Windows), it worked fine. But that's not a concern - if necessary, when I'm looping through my data, I'll leave out the page break the first time.

The envelope size this is designed for is 162mm X 256mm, printed in landscape mode. I have set margins of 5mm on all sides (I'm using MeadCo's ScriptX for print control), and I'm trying to get the return address graphic fairly close to the margin at the bottom. Currently (unless I pad a cell with text downward), it's about 20mm from the margin, 25mm from the edge, no matter what I set the height of the table and white_pixel image to. That's the problem.

 

[WizyWyg]

Height is not a correct &quot;tag&quot; for the TD tag. which is why you will have continue to have problems making it render correctly.

Learn to use CSS to control height of table tags. Your coding as it stands would fail the w3c.org validator with errors like crazy.

Like so:

<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<style type=&quot;text/css&quot;>
<!--
.tdheight {
	height: 40px;
}
-->
</style>
</head>

<body>
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;2&quot;>
  <tr>
    <td class=&quot;tdheight&quot;> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>

</body>

 

[OsakaWebbie]

This is the way Adobe GoLive made it (the earlier version was made in FrontPage), and most tables I have seen are all done this way. Are you saying that they are all wrong, and that I have to make a CSS class for every different height (and width, I assume) in my table? What about the overall table height - does one make a class for it too? I have never heard this before, so I want to understand.

I assume you also feel that doing this will make it print correctly - that's what I care about. I don't need W3C compatibility, since the tool I'm using for print control only works with IE anyway - this won't be used with dozens of different browsers. I'll try changing the code the way you suggested, but it will take some time, and meanwhile, if there are any other comments...

 

[WizyWyg]

Yup wrong as day, since its been deprecated since HTML 3.0 . It hasn't been a valid attribute for TD since HTML 4.01 transitional.

You dont need a class for every height for your table. You can cheat it by using spacer images ( 1 x 1 pixels transparent gif image ) and use HTML to make it any size you want or, just apply a style to that TD only for example

<td style=&quot;****&quot;> and what you see in the CSS at top, just put it in that tag.

Read up on the TABLE element and what attributes are accepted:

http://www.w3.org/TR/REC-html40/struct/tables.html

&quot;height = length [CN]
Deprecated. This attribute supplies user agents with a recommended cell height.&quot;

Running your code through this (in a test html page):

http://validator.w3.org/

produced these errors

Below are the results of attempting to parse this document with an SGML parser. 

Line 9, column 103: there is no attribute "HEIGHT" (explain...). 
  ...k-before: always" width="916" height="495">
                                          ^
Line 10, column 17: there is no attribute "HEIGHT" (explain...). 
        <tr height=&quot;42&quot;>
                   ^
Line 19, column 154: required attribute &quot;ALT&quot; not specified (explain...). 
  ..._address.gif&quot; width=&quot;50&quot; height=&quot;147&quot;></td>

See where &quot;height&quot; is not an attributed for <td> or <tr>


And if you want to use it for PRINT, then you can assign a CSS sheet to do that just for you, without the use of TABLES anyway.

Why dont you take a look into CSS implementation for print and screen media. You can make a great looking site to print for without the use of tables.

 

[OsakaWebbie]

> You can cheat it by using spacer images ( 1 x 1 pixels transparent gif image ) and use HTML to make it any size you want...

I already tried that - it doesn't work, much to my surprise. That's the reason I posted to the forum in the first place.

> See where &quot;height&quot; is not an attributed for <td> or <tr>

Yeah, I was a bit sloppy. But with a user environment of exclusively IE (probably all IE 5.5 or newer), I'm not sure how much that matters. I have a cell spanning all the rows of the table, with height=495, with a 1x1 white pixel image with a height of 495, and the table height is 495, and it still doesn't print it tall enough. If as a test I change all those numbers to 520 (which should be more than the page size, so should spill to a second page), I get the identical result - the bottom of the table doesn't move.

> Why dont you take a look into CSS implementation for print and screen media. You can make a great looking site to print for without the use of tables.

Thank you for the suggestion. But I searched and searched, but found no pages that seem relevent to me. Everything I found talked about making regular web pages printer-friendly - I don't care about that. This code will only be used for printing - it doesn't have to look a different way on the screen. And I found nothing about how to use CSS to place text in different parts of a rectangular area, the way one can do with tables. If you look at the way I have to lay out these Japanese envelopes, you'll see that it's pretty tricky to get it to come out right. If you know of a page that explains how I can do that with CSS, please share the link. Thanks.

 

[Vragabond]

You might have less problems and easier layout if you help yourself with CSS. CSS supports all kinds of units, I did it with centimeters. Here's the code (I tried to mimic your design, but changing the position of a couple of elements won't be a problem):

<style>
#envelope {
	position: absolute;
	display: block;
	left: 0cm;
	top: 0cm;
	height: 14cm;
	width: 24cm;
	border: 1px solid;
}

#numbers {
	position: relative;
	float: left;
	display: block;
	left: 2.5cm;
	top: 1cm;
	font-family: Japanese sideways font;
	font-size: 30px;	
}
#address {
	position: relative;
	float: left;
	display: block;
	left: 5cm;
	top: 3cm;
	font-family: Japanese sideways font;
	font-size: 25px;
}
.name {
	font-weight: bold;
	font-size: 27px;
}
#returnaddress {
	position: absolute;
	display: block;
	right: 0cm;
	bottom: 0cm;
}
</style>

<div id=&quot;envelope&quot;>
 <div id=&quot;numbers&quot;>
  7<br />
  6<br />
  5<br />
  1<br />
  <br />
  1<br />
  1<br />1
 </div>
 <div id=&quot;address&quot;>
  First Address Line<br />
  Second Address Line<br />
  <br />
  <span class=&quot;name&quot;>Name</span>
 </div> 
 <div id=&quot;returnaddress&quot;>
  return address
 </div>
</div>

It worked great in my IE6 and Mozilla. Hope it works for you. I had the border around everything just to help me arrange it, you can safely remove it (this line border: 1px solid if you do not need it.

Hope it helps.

 

[OsakaWebbie]

Vragabond, that looks pretty cool! I like the fact that I can have even more precise control over spacing and placement. I took your code and tried to modify it for my needs (put the Japanese fonts and text back in, and the return_address graphic), but I ran into a snag - I hope you can help.

I need to control the location of the seven digits on the left more precisely than <br> will do - they are the digits of the postal code, and on many envelopes there are boxes already printed on the envelope that the numbers must go in. So I broke it up into 7 separate styles and seven <div>s to use them. But only the top one (#7) is 2.5cm from the left edge - the rest walk progressively to the right. Here is that section of code as I am trying to do it - what can I change? Should I use absolute rather than relative for the position?

(Again, I replaced the Japanese font name with &quot;fontname&quot; and the Shift-JIS numbers with ASCII numbers, just for readability on the forum. The real code is designed to print the numbers sideways, so if you tilt your head to the left it reads &quot;123 4567&quot;.)

#pc1 {
position: relative;
float: left;
display: block;
left: 2.5cm;
top: 7.5cm;
font-family: &quot;fontname&quot;;
font-size: 30px;
}
#pc2 {
position: relative;
float: left;
display: block;
left: 2.5cm;
top: 6.5cm;
font-family: &quot;fontname&quot;;
font-size: 30px;
}
#pc3 {
position: relative;
float: left;
display: block;
left: 2.5cm;
top: 5.5cm;
font-family: &quot;fontname&quot;;
font-size: 30px;
}
#pc4 {
position: relative;
float: left;
display: block;
left: 2.5cm;
top: 4cm;
font-family: &quot;fontname&quot;;
font-size: 30px;
}
#pc5 {
position: relative;
float: left;
display: block;
left: 2.5cm;
top: 3cm;
font-family: &quot;fontname&quot;;
font-size: 30px;
}
#pc6 {
position: relative;
float: left;
display: block;
left: 2.5cm;
top: 2cm;
font-family: &quot;fontname&quot;;
font-size: 30px;
}
#pc7 {
position: relative;
float: left;
display: block;
left: 2.5cm;
top: 1cm;
font-family: &quot;fontname&quot;;
font-size: 30px;
}

...snip... (basically the same as what you had)

<div id=&quot;envelope&quot;>
<div id=&quot;pc7&quot;>
7
</div>
<div id=&quot;pc6&quot;>
6
</div>
<div id=&quot;pc5&quot;>
5
</div>
<div id=&quot;pc4&quot;>
4
</div>
<div id=&quot;pc3&quot;>
3
</div>
<div id=&quot;pc2&quot;>
2
</div>
<div id=&quot;pc1&quot;>
1
</div>
...

Also, I have one other question. Doing it this way, how do I force a page break between each envelope? Can I put &quot;page-break-before: always&quot; in the envelope class definition or something? Thanks.

 

[Vragabond]

No need to create so much extra work for yourself. Just complete your style with the following.

#numbers {
position: relative;
float: left;
display: block;
left: 2.5cm;
top: 1cm;
font-family: Japanese sideways font;
font-size: 30px;
line-height: 1cm;
}

}
#numbers span {
margin-bottom: 1cm;
display: block;
}


and change the code with the numbers:
<div id=&quot;numbers&quot;>
7<br />
6<br />
5<br />
<span>1</span>
1<br />
1<br />
1<br />
</div>

<span> will help you control the space between this number and the next one. You just need to control the new values to get them to show the way you want.

Hope it helps.

 

[OsakaWebbie]

Thanks, that helped. I'll give you the star while I'm thinking about it (you already earned it the first time, but I forgot).

But I still have more questions about how to make this work. I will be printing more than one at a time (a list of user-selected addresses will be pulled from a database), but when I test having more than one with your code, they are written on top of each other. I thought forcing a page break (<style> #envelope { page-break-before: always; ... }) would at least make them print separately, but it doesn't. I know that the envelope class's position is &quot;absolute&quot;, but I was hoping it would just be absolute for each printed page - apparently it's more absolute than that. If I change it to relative (so that there is nothing absolute in the whole thing), what would be the point of reference that all the positions would be relative to? It sounds like asking for chaos not to have anything absolute, but I really don't know how this works yet.

One more question, just for future knowledge (this technique looks generally useful to know): I'm curious to know why my previous code for the numbers caused the vertical alignment to &quot;walk&quot; - is it not possible to have more than one CSS element located in the same vertical line if the positions are relative?

 

[OsakaWebbie]

I think I figured out a way to get over that last hurdle. Now that I know a little more terminology, I was able to find a relevent page by searching the Internet:

http://www.w3.org/TR/REC-CSS2/visuren.html

Some of it is so deep that it's still confusing for me, but I got enough out of it to figure out that if I make an outer shell that is relative, and then make the envelope element a span child of it, it works. If you have a more elegent way, let me know, but this appears to work, at least on my small sample page:

<style>
#newpage {
page-break-before: always;
position: relative;
display: block;
height: 15cm;
width: 24cm;
}
#envelope {
position: absolute;
display: block;
left: 0cm;
top: 0cm;
height: 15cm;
width: 24cm;
}
...snip...
<div id=&quot;newpage&quot;>
<span id=&quot;envelope&quot;>
...the rest...
</span>
</div>

I noticed that when you made a style that you were going to use for a span (the one to put extra space between two of the numbers), you preceded the class name with &quot;.&quot; instead of &quot;#&quot;. But &quot;#&quot; worked for my envelope class even when I changed it from div to span. What is the difference between &quot;.&quot; and &quot;#&quot;?

 

[Vragabond]

Thanks for the star, glad I could have helped. Your solution looks ok with me. I must admit that this is all new to me as well, but as far as I understand relative positioning, that is relative to the previous element. Since every div you specified was relatively 2.5 cm from the left, meant that they would float 2.5 cm more to the right than the previous one. You should skip the left, or make it left: 0cm and it would work.

As for the difference between classes and ids, here's the best way I can help you: discussed to the fullest in here: thread215-659545

 

[OsakaWebbie]

Actually, the amount that each one was to the right of the previous one was just the width of the previous number, not 2.5cm. My understanding after reading the c3w article, is that it is relative to its parent, not to a sibling that precedes it (if the previous one is closed with </span> or </div> before the current one starts, it's a sibling). Anyway, I guess I just won't worry about that unless it happens to me again - I have it working for this project.

I read the thread you mentioned - it was helpful.

Thanks again to you, and also thanks to WyziWyg for getting us all thinking in the direction of CSS - it's definitely a good way to do what I was trying to do.