SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast keay's Avatar
    Join Date
    Apr 2009
    Location
    Los Angeles, California
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How would you code this form?

    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.
    Attached Images Attached Images
    Freelance Web Designer For Hire
    http://www.keaydesign.com

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.)
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Enthusiast keay's Avatar
    Join Date
    Apr 2009
    Location
    Los Angeles, California
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.....
    Freelance Web Designer For Hire
    http://www.keaydesign.com

  5. #5
    SitePoint Enthusiast keay's Avatar
    Join Date
    Apr 2009
    Location
    Los Angeles, California
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....
    Freelance Web Designer For Hire
    http://www.keaydesign.com

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Enthusiast keay's Avatar
    Join Date
    Apr 2009
    Location
    Los Angeles, California
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...
    Freelance Web Designer For Hire
    http://www.keaydesign.com

  8. #8
    SitePoint Enthusiast Homie_187's Avatar
    Join Date
    Oct 2008
    Location
    United States
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow... free coding from Tommy - good deal

  9. #9
    SitePoint Enthusiast Homie_187's Avatar
    Join Date
    Oct 2008
    Location
    United States
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by keay View Post
    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

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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?

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    Birnam wood is come to Dunsinane

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    Birnam wood is come to Dunsinane

  14. #14
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    ^ 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).

  15. #15
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is another bug with a decent solution:
    http://www.456bereastreet.com/archiv...gend_elements/

  16. #16
    SitePoint Zealot
    Join Date
    Mar 2003
    Location
    Morges Switzerland
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •