CSS Table Printing Problem

So, I have a page that holds lots of tables. These tables are all the schema for a database I use for a project. All 31 of them. The page is basically the DESCRIBE table for each table. We're talking usually about 4-8 rows per table. A main reason for creating this page is so we can have the schema taped to the wall.

The problem gets to be that of widows and orphans. In layout, a widow is the last line of a paragraph occurring after a page break, while an orphan is a first line of a paragraph occurring before a page break Or, in this case, tables. And it is considered to be bad.

A widowed row.

Using THEAD and TBODY allows the browser (in this case, Firefox on Linux) to repeat the head of the table, which is nice, but one row of the table isn't enough.

Clearly, these are short enough that forcing the browser to keep the table together through a page break shouldn't be too wasteful, unlike if this was a SELECT * FROM table on a table with hundreds or thousands of rows. But it seems this isn't possible with CSS. CSS has page-break-before,  page-break-after and  page-break-inside, but they are insufficient. You can force a page break before or after an element, but that's not it. If you can fit seven or eight tables on a page, why would you not put them on a page? And there's three options for  page-break-inside: avoid, auto and inherit. The choice of auto translates to "break it anywhere", while avoid has all the practical use of "break it anywhere" and inherit simply means "do what the parent did", which of course means "break it anywhere".

There are CSS properties for widows and orphans, but they don't seem to work for tables. Well, less with tables than tables wrapped in DIVs.

Stupid HTML Error

Code Block A.

<form>
    <table id="target">
        <tr><td> <input type="text" name="foo"></dr></tr>
    </table>
</form>

Code Block B.

<table id="target">
    <form>
        <tr><td><input type="text" name="foo"></dr></tr>
    </form>
</table>

Not much difference, is there? In fact, I'd say they're functionally identical, unless you set form as a block in your CSS. But there is a difference if you're going to use Javascript to add to the form. If you append to the table, you'll get something like this.

<table id="target">
    <form>
        <tr><td> <input type="text" name="foo"></dr></tr>
    </form>
    <tr><td> <input type="text" name="bar"></dr></tr>
</table>

And this will not be part of the form when you press submit. Which I have conveniently left out of the code blocks. Hrmm. Still, watch for that. It's the problem that hounded me over the weekend.

That's A New One On Me (Vista Content)

A friend of my wife is doing low-level web stuff for a class. On Vista. Her name has a space in it. Think Var Lo instead of Varlo. This means that her desktop is at C:\Documents\Var Lo\Desktop\.

There are many things that annoy me here, and only some of them relate to Vista. You cannot tell Vista's Windows Explorer to tell you the extension of known file types. This, to my telling, is Microsoft telling the users that it has nothing but disgust for them and everything they have done, are doing and will ever do. And then there's when the friend asked how to do something with a web page. I said "open that in your browser". She was unable. She then asked if I thought she was stupid. I said no. I didn't say that I thought she was deliberately being obtuse to try to annoy me. I do think she was being deliberately obtuse to try to annoy me.

But the biggest thing was that the page she was writing had an image.

dogpic.jpg existed and was in the same directory as the page. It should've worked. It didn't work. I suspect that the issue is that IE has problems with filenames with spaces, and while seeing dogpic.jpg as c:\Documents\Var Lo\Desktop\dogpic.jpg and then broke upon seeing that space.

They're currently using FTP (ack!) to move the file to the server. We'll see how that goes.

Investigating jQuery

So, you have a bunch of HTML elements. Let's say they're Fieldsets.

  
 x 
  XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX


  
 x 
  XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX


  
 x 
  XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX

Now, you want to be able to hide some of those fieldsets. You could make the legend clickable.

  
 x 
  XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX

hide_element() is dead easy. I do it in five lines. I could drop one if I wanted. Just a bit of stylesheet manipulation. But there's a problem. As written, that hides the fieldset for good. I really want to toggle. So, something must remain.

  
 x 
  
 XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX 

This is better, but you have to name every single fieldset. There should be a way to address everything anonymously. And there is. jQuery. Which I don't quite grok yet. But that's where my head is.