How would you code this form?

**keay** · Jun 3, 2009 14:09

Hey guys, I am faced with coding a fairly complex form and not your average tabular data. I wanted to hear what you guys would use to code this form and to get suggestions and advice. Obviously the two choices are tables or divs but I see a nightmare using either one. So that comes down to which is the easiest I guess.

I have attached an image of the form so you know what I am talking about.

**AutisticCuckoo** · Jun 3, 2009 22:59

I'd use fieldsets for most of the ... er ... field sets. The carrier information, and possibly the customer order information, looks like tabular information, so I'd go with tables there.

It's a lot of work, but it should be fairly straightforward. The main problem might be to circumvent the fieldset/legend bugs in Firefox.

**AutisticCuckoo** · Jun 4, 2009 04:44

I threw something together that may get you started. It looks decent in Opera 9.64, Firefox 3, Safari 3, Chrome 1 and IE7.

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Bill of Lading</title>
    <style type="text/css">
      html {font:10pt/1.5 Helvetica,Arial,sans-serif}
      body {min-width:90em}
      h1 {margin:0 0 -1.3em; font-size:140%; text-align:center; text-transform:uppercase}
      h2 {margin:0; font-size:110%; text-transform:uppercase}
      form {margin:0; padding:0; border:1px solid #000}
        fieldset.simple {margin:0; padding:0 0 0 0.5em; border:none}
          fieldset.simple legend span {position:absolute; left:-999em}
        fieldset.address {position:relative; margin:0; padding:1.5em 0 0; border:none}
          *+html fieldset.address legend span,
          fieldset.address legend span {position:absolute; top:0; left:0; right:0; background-color:#000; color:#fff; font-size:85%; text-align:center; text-transform:uppercase}
            x:-moz-any-link, fieldset.address legend span {top:-1.5em}
          fieldset.address div {position:relative; padding-left:8em}
            fieldset.address div+div {margin-top:2em; padding:1em 0 0 9em; border-top:1px solid #000}
              fieldset.address div+div label {font:bold 90%/1.5 "Times New Roman",serif}
            fieldset.address label {position:absolute; left:0.5em}
            fieldset.address input[type="text"] {margin-bottom:2px}
          fieldset.barcode:after {display:block; color:#ccc; font:bold 130%/5.0 "Times New Roman",serif; text-align:center; content:"BAR CODE SPACE"}
          *+html fieldset.barcode {padding-bottom:6.5em}
          fieldset.columnar div {position:relative; margin:0; padding:0 0 0 8em}
            fieldset.columnar label {position:absolute; left:0}
            fieldset.columnar input[type="text"] {margin-bottom:2px}
        input[type="text"], textarea {border:0 none; overflow:hidden}
          input[type="text"]:focus, textarea:focus {outline:1px solid #f50; background-color:#ffc}
        legend {padding:0; color:#000}
        label[for="date"], label[htmlFor="date"] {font-family:"Times New Roman",serif}
        table {width:100%; margin:0; font-size:85%; border-collapse:collapse}
          caption {background-color:#000; color:#fff; font-size:85%; text-align:center; text-transform:uppercase}
          td, th {border:1px solid #000; text-align:center; text-transform:uppercase; vertical-align:top}
            th small {display:block}
          tfoot {font-size:110%}
            tfoot td {font-weight:bold}
              tfoot td+td {border-right-style:hidden}
            tfoot th {text-align:left}
          #coi {border:1px solid #000; background-color:#ccc}
            #coi td, #coi th {background-color:#fff}
          #coi tbody {display:none}
          #commodity {width:43em}
            #commodity small, #commodity cite {font-size:90%; text-transform:none}
          label[for="value"], label[htmlFor="value"] {display:block; margin-bottom:1em; font-size:85%}
          label[for="value-per"], label[htmlFor="value-per"] {font-size:85%}
          #value, #value-per {border:solid #000; border-width:0 0 1px}
        #wrapper-1 {min-height:1em; margin-right:35em; border-right:1px solid #000}
          #wrapper-1:after {display:block; clear:left; visibility:hidden; line-height:0; content:"."}
          #addresses {float:left; width:100%}
            fieldset.address label[for="sf-fob"], fieldset.address label[htmlFor="sf-fob"],
              fieldset.address label[for="st-fob"], fieldset.address label[htmlFor="st-fob"] {position:static; margin-left:25em}
            fieldset.address label[for="st-location"], fieldset.address label[htmlFor="st-location"] {position:static; margin-left:15em}
          #admin {float:left; position:relative; left:35em; width:35em; margin-left:-35em}
            #admin fieldset {border:solid #000; border-width:1px 0 0}
              #admin fieldset legend span, #admin fieldset legend abbr {position:absolute; left:-999em}
              label[for="bol-no"], label[htmlFor="bol-no"] {font-weight:bold; vertical-align:top}
              label[for="carrier-name"], label[htmlFor="carrier-name"] {font-weight:bold; text-transform:uppercase}
              label[for="scac"], label[htmlFor="scac"], label[for="pro"], label[htmlFor="pro"] {font-weight:bold}
            #admin #fct {position:relative; margin:0; padding:3em 0 0}
              #admin #fct legend {position:static}
                *+html #admin #fct legend span,
                #admin #fct legend span {position:absolute; top:0; left:0.5em; right:0.5em; font-size:90%; font-weight:bold}
                  x:-moz-any-link, #admin #fct legend span {top:-3em}
                  #admin #fct legend span small {font-size:85%; font-style:italic}
              #fct label {font-size:85%; font-weight:bold}
                #fct input+label {margin-left:2em}
              #fct input[type="text"] {width:3em; border:solid #000; border-width:0 0 1px}
              #fct div {padding:0 0.5em}
                #fct div+div {margin-top:0.25em; border-top:1px solid #000}
                #fct div div {float:left; width:8em; text-align:center}
                  #fct div div label {display:block; margin-left:0; font-weight:normal}
                #fct div p {margin:0; font-size:80%}
        #cod {float:right; width:30em; margin:0; padding:0 0 1em; border:solid #000; border-width:0 2px 2px; font-weight:bold}
          #cod input[type="text"] {border:solid #000; border-width:0 0 1px}
          #cod br+label {margin-left:5em}
        #liability {clear:both; margin:0; padding-left:1em; border:solid #000; border-width:1px 0; font-weight:bold}
        #wrapper-2 {min-height:1em; margin-right:30em; padding-left:1em; border-right:1px solid #000}
          #wrapper-2:after {display:block; clear:left; visibility:hidden; line-height:0; content:"."}
          #wrapper-2 p {float:left; width:100%; margin:0; font-size:85%}
          #wrapper-2 fieldset {float:left; position:relative; left:30em; width:29em; margin:0 0 0 -30em; padding:3em 0 0 1em; border:none}
            *+html #wrapper-2 legend span,
            #wrapper-2 legend span {position:absolute; top:0; left:1em; right:1em; font-size:85%}
              x:-moz-any-link, #wrapper-2 legend span {top:-3em; left:0; right:2em; white-space:normal}
          #shipper-signature {width:18em; margin-bottom:2px; border:solid #000; border-width:0 0 1px}
            *+html #shipper-signature {margin-left:30em}
          label[for="shipper-signature"], label[htmlFor="shipper-signature"] {font-weight:bold}
        #wrapper-3 {clear:both; min-height:1em; margin:0 25em 0 35em; border:solid #000; border-width:1px 1px 0}
          #wrapper-3:after {display:block; clear:left; visibility:hidden; line-height:0; content:"."}
          #ssd {float:left; width:33em; margin:-1px 0 0 -35em; padding:0 1em; border-top:1px solid #000}
            #ssd p {margin:0.5em 0 0; font-size:80%}
          #tlfc {float:left; width:100%}
            #tlfc fieldset {float:left; width:49.9%; margin:0; padding:0; border:none}
              #tlfc fieldset legend {padding:0 0 0 1em; text-decoration:underline}
              #tlfc input {margin-left:1em}
              #tlfc label {font-size:85%}
          #cspd {float:left; position:relative; left:25em; width:23em; margin:-1px 0 0 -25em; padding:0 1em; border-top:1px solid #000}
            #cspd p {margin:0.5em 0 0; font-size:80%}
        #sign {clear:both; margin:0; padding:1em 0; border:solid #000; border-width:1px 0 0; font-family:"Times New Roman",serif}
          #sign legend span {position:absolute; left:-999em}
          #sign label {font-size:110%}
            #sign input+label {margin-left:2em}
          #sign input {border:solid #000; border-width:0 0 1px}
            #sign-print, #sign-sign {width:15em}
            #sign-date {width:10em}
    </style>
  </head>
  <body>
    <h1>Bill of Lading</h1>
 
    <form action="" method="post" accept-charset="utf-8" id="bol">
      <fieldset class="simple">
        <legend><span>Date</span></legend>
        <label for="date">Date:</label> <input type="text" name="date" id="date">
      </fieldset>
 
      <div id="wrapper-1">
        <div id="addresses">
          <fieldset class="address">
            <legend><span>Ship From</span></legend>
            <div>
              <label for="sf-name">Name:</label> <input type="text" name="sfName" id="sf-name">
              <br><label for="sf-address">Address:</label> <input type="text" name="sfAdress" id="sf-address">
              <br><label for="sf-city">City/State/Zip:</label> <input type="text" name="sfCity" id="sf-city">
              <br><label for="sf-sid"><abbr>SID</abbr>#:</label> <input type="text" name="sfSID" id="sf-sid">
              <label for="sf-fob"><abbr>FOB</abbr>:</label> <input type="checkbox" value="Y" name="sfFOB" id="sf-fob">
            </div>
          </fieldset>
 
          <fieldset class="address">
            <legend><span>Ship To</span></legend>
            <div>
              <label for="st-name">Name:</label> <input type="text" name="stName" id="st-name">
              <label for="st-location">Location #:</label> <input type="text" name="stLocation" id="st-location">
              <br><label for="st-address">Address:</label> <input type="text" name="stAdress" id="st-address">
              <br><label for="st-city">City/State/Zip:</label> <input type="text" name="stCity" id="st-city">
              <br><label for="st-contact">Contact:</label> <input type="text" name="stContact" id="st-contact">
              <label for="st-fob"><abbr>FOB</abbr>:</label> <input type="checkbox" value="Y" name="stFOB" id="st-fob">
            </div>
          </fieldset>
 
          <fieldset class="address">
            <legend><span>Third Party Freight Charges Bill To</span></legend>
            <div>
              <label for="tpf-name">Name:</label> <input type="text" name="tpfName" id="tpf-name">
              <br><label for="tpf-address">Address:</label> <input type="text" name="tpfAdress" id="tpf-address">
              <br><label for="tpf-city">City/State/Zip:</label> <input type="text" name="tpfCity" id="tpf-city">
            </div>
            <div>
              <label for="tpf-instructions">Special Instructions:</label> <textarea name="tpfInstructions" rows="2" cols="30" id="tpf-instructions"></textarea>
            </div>
          </fieldset>
        </div>
 
        <div id="admin">
          <fieldset class="simple barcode">
            <legend></legend>
            <label for="bol-no">Bill of Lading Number/<abbr>PO</abbr> #:</label> <input type="text" name="bolNo" id="bol-no">
          </fieldset>
 
          <fieldset class="columnar">
            <legend><span>Carrier</span></legend>
            <div>
              <label for="carrier-name">Carrier name:</label> <input type="text" name="carrierName" id="carrier-name">
              <br><label for="trailer-no">Trailer number:</label> <input type="text" name="trailerNo" id="trailer-no">
              <br><label for="seal-no">Seal number(s):</label> <input type="text" name="sealNo" id="seal-no">
            </div>
          </fieldset>
 
          <fieldset class="columnar barcode">
            <legend><abbr>SCAC</abbr></legend>
            <div>
              <label for="scac"><abbr>SCAC</abbr>:</label> <input type="text" name="scac" id="scac">
              <br><label for="pro">Pro number:</label> <input type="text" name="pro" id="pro">
            </div>
          </fieldset>
 
          <fieldset id="fct">
            <legend><span>Freight Charge Terms: <small>(freight charges are prepaid unless marked otherwise)</small></span></legend>
            <div>
              <label for="fct-prepaid">Prepaid</label> <input type="text" name="fctPrepaid" id="fct-prepaid">
              <label for="fct-collect">Collect</label> <input type="text" name="fctCollect" id="fct-collect">
              <label for="fct-3rd-party">3rd Party</label> <input type="text" name="fct3rdParty" id="fct-3rd-party">
            </div>
            <div>
              <div>
                <input type="checkbox" value="Y" name="fctCB" id="fct-cb">
                <label for="fct-cb">(check box)</label>
              </div>
              <p>Master Bill of Lading: with attached underlying Bills of Lading</p>
            </div>
          </fieldset>
        </div>
      </div>
 
      <table id="coi">
        <caption>Customer Order Information</caption>
        <thead>
          <tr>
            <th>Customer Order Number</th>
            <th># <abbr>pkgs</abbr></th>
            <th>Weight</th>
            <th>Pallet/Slip <small>(circle one)</small></th>
            <th>Additional Shipper Info</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Grand Total:</th>
            <td>1 <abbr>plts</abbr></td>
            <td>50 lbs</td>
          </tr>
        </tfoot>
        <tbody>
          <tr><td></td><td></td><td></td><td></td><td></td></tr>
        </tbody>
      </table>
 
      <table>
        <caption>Carrier Information</caption>
        <thead>
          <tr>
            <th colspan="2">Handling Unit</th>
            <th colspan="2">Package</th>
            <th rowspan="2">Weight</th>
            <th rowspan="2"><abbr>H.M.</abbr> (X)</th>
            <th rowspan="2" id="commodity">
              Commodity Description
              <small>Commodities requiring special or additional care or attention in handling or stowing must be so marked and packaged as to ensure safe transportation with ordinary care.</small>
              <cite>See Section 2(a) of <abbr>NMFO</abbr> item 360</cite>
            </th>
            <th colspan="2"><abbr>LTL</abbr> Only</th>
          </tr>
          <tr>
            <th><abbr>Qty</abbr></th>
            <th>Type</th>
            <th><abbr>Qty</abbr></th>
            <th>Type</th>
            <th><abbr>NMFC</abbr> #</th>
            <th>Class</th>
          </tr>
        </thead>
        <tbody>
          <tr><td>1</td> <td><abbr>PLTS</abbr></td> <td>3</td> <td>CASES</td> <td>50 LBS</td> <td></td> <td></td> <td></td> <td>65</td></tr>
          <tr><td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        </tbody>
      </table>
 
      <fieldset id="cod">
        <legend></legend>
        <label for="cod-amount"><abbr>COD</abbr> Amount: $</label> <input type="text" name="codAmount" id="cod-amount">
        <br><label for="cod-fee">Fee Terms: Collect: Prepaid:</label> <input type="checkbox" value="Y" name="codFee" id="cod-fee">
        <br><label for="cod-check">Customer check acceptable:</label> <input type="checkbox" value="Y" name="codCheck" id="cod-check">
      </fieldset>
 
      <fieldset class="simple">
        <legend></legend>
        <label for="value">
          When the rate is dependent on value, shippers are required to state specifically in writing the agreed or declared value of the property as follows:
          <br>The agreed or declared value of the property is specifically stated by the shipper to be not exceeding
        </label>
        <input type="text" name="value" id="value">
        <label for="value-per">per</label>
        <input type="text" name="valuePer" id="value-per">
      </fieldset>
 
      <p id="liability">Note Liability Limitation for loss or damage in this shipment may be applicable. See <cite>49 <abbr>U.S.C.</abbr> 14706(c)(1)(A) and (B)</cite>.</p>
 
      <div id="wrapper-2">
        <p>RECEIVED, subject to individually determined rates or contracts that have been agreed upon in writing between the carrier and shipper, if applicable,
        otherwise to the rates, calssifications and rules that have been established by the carrier and are available to the shipper, on rquest,
        and to all applicable state and federal regulations.</p>
 
        <fieldset id="payment">
          <legend><span>The carrier shall not make delivery of this shipment without payment of freight and all other lawful charges.</span></legend>
          <input type="text" readonly id="shipper-signature"> <label for="shipper-signature">Shipper Signature</label>
        </fieldset>
      </div>
 
      <div id="wrapper-3">
        <div id="ssd">
          <h2>Shipper Signature Date</h2>
          <p>This is to certify that the above named materials are properly classified, described, packaged, marked and labeled,
          and are in proper condition for transportation according to the applicable regulations of the <abbr>U.S. DOT</abbr>.</p>
        </div>
 
        <div id="tlfc">
          <fieldset>
            <legend>Trailer Loaded:</legend>
            <input type="checkbox" value="Y" name="loadedByShipper" id="loaded-by-shipper"> <label for="loaded-by-shipper">By Shipper</label>
            <br><input type="checkbox" value="Y" name="loadedByDriver" id="loaded-by-driver"> <label for="loaded-by-driver">By Driver</label>
          </fieldset>
 
          <fieldset>
            <legend>Freight Counted:</legend>
            <input type="checkbox" value="Y" name="countedByShipper" id="counted-by-shipper"> <label for="counted-by-shipper">By Shipper</label>
            <br><input type="checkbox" value="Y" name="countedByDriverPallets" id="counted-by-driver-pallets"> <label for="counted-by-driver-pallets">By Driver/pallets said to contain</label>
            <br><input type="checkbox" value="Y" name="countedByDriverPieces" id="counted-by-driver-pieces"> <label for="counted-by-driver-pieces">By Driver/Pieces</label>
          </fieldset>
        </div>
 
        <div id="cspd">
          <h2>Carrier Signature/Pickup Date</h2>
          <p>Carrier acknowledges receipt of packages and required placards.
          Carrier certifies emergency response information was made available and/or carrier has the <abbr>U.S. DOT</abbr> emergency/response guidebook or equivalent
          documentation in the vehicle.</p>
          <p>Property described above is received in good order, except as noted.</p>
        </div>
      </div>
 
      <fieldset id="sign">
        <legend><span>Signature</span></legend>
        <label for="sign-print">Print Name:</label> <input type="text" name="signPrintName" id="sign-print">
        <label for="sign-sign">Sign:</label> <input type="text" readonly id="sign-sign">
        <label for="sign-date">Date:</label> <input type="text" name="signDate" id="sign-date">
      </fieldset>
    </form>
  </body>
</html>

(Note, I set the base font in points, since it looks like that form would be printed sooner or later.)

**keay** · Jun 4, 2009 08:15

Thanks for the effort, was it a real challenge? If you could code this, you can code any forms...LOL....

Thanks, let me have a look at it.....

**keay** · Jun 4, 2009 08:51

Excellent job!! Although I should have mentioned one thing (please dont kill me for this). The form does not actually need to be a form in technical terms. Meaning it does not require <form> or <inputs> because the values are being pulled from a database dynamically.

In addition, this "form" needs to be able to be printed on a 8x11.5 only 1 page and not go to the second page.

I am sure that would make it a bit more challenging as currently it is set as point and if you increase the points the default printer setup will not be able to print the right side of the page and thus will be cut off.

But to make things easier, this only needs to work in IE7 & IE8.

So I am working on this now. If I were to tell you we to strip all the <form> tags, what would you have used? layout boxes or all tables?

Again you did an amazing job! Well you are the guru of CSS after all....

**AutisticCuckoo** · Jun 4, 2009 09:07

Ah. I was beginning to wonder about the 'form' issue, since parts of it didn't appear to be an HTML form.

Well, that only makes it easier, since you don't have to cater to the odd whims of Firefox when it comes to fieldsets and legends.

You could probably just replace the <fieldset> tags with <div> and replace the <legend> tags with the appropriate headings. And adjust the CSS rules accordingly, of course.

Making it fit into an 8"x11.5" page shouldn't be an issue. That essentially makes it fixed width and you don't have to make allowances for variable widths. You might even be able to use absolute positioning instead of the float kludges.

I definitely wouldn't have used tables for everything, since the information isn't tabular (except for the two bits in the middle).

It was an interesting challenge, but I'm afraid the code isn't very coherent. I worked with it on and off between other things (and a 2-hour lunch+gym break). Still, I think it's a useful starting point for you. If you run into any specific problems, just ask.

**keay** · Jun 4, 2009 09:16

I have coded many table layouts for tabular data before and nothing like this hence I came here for advice. Obviously your experience speak for itself....

My next challenge right now is since this will need to be printed, I am faced with the background color or images not being able to be printed by default...

**Homie_187** · Jun 4, 2009 20:52

Wow... free coding from Tommy - good deal

**Homie_187** · Jun 4, 2009 21:13

Originally Posted by keay

I am faced with the background color or images not being able to be printed by default...

I don't think there's any easy way to make a browser print background colors.

Here is what I am wondering: If this form is intended only to be printed by the user and filled out with a pen on paper (rather than submitted online), then why not just post a pdf? To me it seems awkward to try to use HTML and CSS for print design - kind of like the opposite of using Photoshop or Illustrator to make websites

**Stomme poes** · Jun 11, 2009 01:35

Homie,

I've made HTML printable forms, and here's why:

the sites which have those forms are mostly online-oriented for people who want to do things like buy insurance online. However, we have plenty of older people who will go to the web site and look around, but still aren't comfortable doing business via internet.

We have a PDF version for people who like that thing, but my bosses mistakenly though people could fill them in and then email them. Actually this was only possible for people with the entire Acrobat suite or something.

So I made an HTML version, with all the labels and inputs together, and fill-in-able, that people can fill in on the computer (so, even if you're blind, want to fill it in but still mail it to us) and then print it out.

This is great for people who would rather do things by mail, but have trouble printing, writing with pen, or whatever. Terrible handwriting : )

PDFs are excellent for printing but if your form is something that someone might still want to fill in by typing, and then mail it (on paper, through the post) instead of e-mailing it, then an HTML form might still be worthwhile.

Tommy:

Code:

 x:-moz-any-link, fieldset.address legend span {top:-1.5em}

Could you explain this? Does it help around the FF legend bug(s)? If so, which versions of Moz get that? Like if FF4 comes out without the legend bugs (ha, hahahaha, hhahahahaha, /wipes tears away, sorry/ ha hahaha), can that gecko version be selected somehow with this prefix?

**AutisticCuckoo** · Jun 11, 2009 01:48

Originally Posted by Stomme poes

Tommy:

Code:

 x:-moz-any-link, fieldset.address legend span {top:-1.5em}

Could you explain this? Does it help around the FF legend bug(s)? If so, which versions of Moz get that? Like if FF4 comes out without the legend bugs (ha, hahahaha, hhahahahaha, /wipes tears away, sorry/ ha hahaha), can that gecko version be selected somehow with this prefix?

Firefox is horribly buggy when it comes to fieldsets and legends. I gets the positions wrong if you have absolutely positioned descendants, among other things, which is why I needed to supply an incorrect value just for Gecko browsers to get the legend text where it should go.

I used a Gecko-only, invalid pseudo-class for this, relying on the fact that compliant browsers should ignore the entire rule when it encounters the invalid selector. (IE doesn't, which is why I added a more specific IE7-only (but valid) selector to the preceding rule).

The Gecko pseudo-class doesn't allow us the granularity to distinguish between versions. So if FF4 fixes the fieldset/legend bugs and still supports the :-moz-any-link pseudo-class, the legends will end up in the wrong place. That's the downside of using hacks for browsers that are merely braindead, not entirely dead.

Another option would be to specify the incorrect position in the 'normal' rule, then use an IE hack to give it the correct value and an @media query to provide the correct value to Opera and WebKit browsers. But you'd end up with the same problem if a future Firefox version starts supporting @media queries without fixing the fieldset/legend bugs.

**Stomme poes** · Jun 11, 2009 02:01

Firefox is horribly buggy when it comes to fieldsets and legends. I gets the positions wrong if you have absolutely positioned descendants, among other things, which is why I needed to supply an incorrect value just for Gecko browsers to get the legend text where it should go.

O gawd yes, it's one of the things I truly hate about FF, and the fact that it's "open source" doesnt' help one bit, because apparently it's deep in the trunk and means total rewrites of everything related... or something like that, according to Boris (who also thinks it's not even a bug, jeez).

(IE doesn't, which is why I added a more specific IE7-only (but valid) selector to the preceding rule).

Oooh, thanks, I didn't even notice that. Hmmm, I might try this out, but I'm "getting away with" using regular Tyssen legend span tricks... but always leaves an ugly space behind... it's like I just can't get that legend OUT of the document no matter what. It never quite leaves.

**AutisticCuckoo** · Jun 11, 2009 03:56

Originally Posted by Stomme poes

Oooh, thanks, I didn't even notice that. Hmmm, I might try this out, but I'm "getting away with" using regular Tyssen legend span tricks... but always leaves an ugly space behind... it's like I just can't get that legend OUT of the document no matter what. It never quite leaves.

Have you set legend {padding:0}? If not, there'll be a space straddling the fieldset border, because of the default padding in the UA style sheets.

**Stomme poes** · Jun 11, 2009 07:04

^ I know i used to, because when I originally made a separate padding reset, I listed form, fieldset, legend... but nowadays I don't, so maybe that's the reason? I will try adding that and see if the spacing disappears! It's only in the Fox, Opera positions everything correctly and IE just does what IE does, but neither have that left-behind space (often I'll pos: rel the fieldset and then abso-po the legend's span, since abso-poing the legend itself didn't work lawlz).

**cooper.semantics** · Jun 11, 2009 08:08

Here is another bug with a decent solution:
http://www.456bereastreet.com/archiv...gend_elements/

**wimb** · Jun 14, 2009 00:15

When it is for printing only, then I would take an image with all the fixed lines, images and text on it. Then, for example, with PHP you can place the variable text exactly where you want it. Any barcodes can be placed at the same time. wimb

User Tag List

Thread: How would you code this form?

Thread Tools

Display

How would you code this form?

Bookmarks

Bookmarks

Posting Permissions