www.webdeveloper.com
Results 1 to 6 of 6

Thread: Any known fieldset tag limitations during printout?

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Question Any known fieldset tag limitations during printout?

    I have put my CV online, which works and displays fine on the screen.
    I use the <fieldset> tags to separate the sections and make it easier to navigate.

    However, when I print it out, only the FIRST page of each fieldset section is printed.
    It is as if the rest of the entries (on multiple pages) within the <fieldset> region are truncated.

    The CSS looks like this
    Code:
    <style type="text/css">
    fieldset { width:90%; }
    legend { font-weight:bold; color:blue; }
    ul { margin:0px 10px; padding:0px 10px; }
    li { list-style-type:none; }
    and doesn't look to me be be causing any problems.

    Is this a problem with the <fieldset> tag and printouts?
    It that the way it is supposed to work?
    Are there any workarounds to print ALL the pages of the CV?

    I can provide a link via a PM if anyone is interested in helping me solve this problem.'
    I don't believe I have any special code to cause this printout problem, but since I'm
    in education there are just a bunch of publication citations that might bore the average person.

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    What do you see when you do a print preview?
    Web browsers can be sometimes very tolerant and that might not be the case of other programs.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Arrow

    Quote Originally Posted by holyhttp View Post
    What do you see when you do a print preview?
    Web browsers can be sometimes very tolerant and that might not be the case of other programs.
    Same thing as the actual printout.
    The particular tag containing the display should be 2-3 pages long
    but only the first page of the tag section is printed or previewed.

    I've tried a google search, but I guess I'm not being specific enough
    using the search terms like "truncated printout".

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Question Example of the problem...

    I have created a demonstration of the problem using javascript to create the contents of each <fieldset> tag area.
    You will see the display is as expected on the screen, but if you do a print-preview
    you will see the truncated display that would be printed.

    Am I using the tag incorrectly?
    Am I not understanding what the 'print' button SHOULD do?
    Am I asking the wrong forum and need to move to the CSS forum?

    Here is my example code...
    Code:
    <html>
    <head>
    <title> Currculum Vitae </title>
    <style type="text/css">
    fieldset { width:90%; }
    legend { font-weight:bold; color:blue; }
    ul { margin:0px 10px; padding:0px 10px; }
    li { list-style-type:none; }
    </style>
    
    <script type="text/javascript">
    // following only used to create filler display
    
    var LoremStr = 
      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer. Etiam venenatis. '
     +'Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. '
     +'Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. '
     +'Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. '
     +'Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. '
     +'Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl. ';
    
    var Lorem = LoremStr.split(' ');
    
    function makeLorem(IDS,wcnt) {
      var w = '';
      var p = Math.floor(Math.random()*6)+2;
      var cnt = 1;
      var str = '# '+cnt+': ';
      for (var i=0; i<wcnt; i++) {
        w = Lorem[Math.floor(Math.random()*Lorem.length)];  
        str += w+' ';
        if (w.indexOf('.') != -1) {
          cnt++
          str += '<p># '+cnt+': ';
          p = Math.floor(Math.random()*6)+2;
        }
      }
      document.getElementById(IDS).innerHTML = str;
    }
    window.onload = function() {
      makeLorem('EDUCATION',100);
      makeLorem('EXPERIENCE',300);
      makeLorem('PUBLICATIONS',800);
      makeLorem('MISCELLANEOUS',200);
    }
    </script>
    
    </head>
    <body>
    <a name="TOP"></a>
    <center>
    <h2>John Q. Smith</h2>
    </center>
    
    <fieldset>
     <legend>Education</legend>
     <div id="EDUCATION"></div>
     <div style="text-align:right"><a href="#TOP">Top</a></div>
    </fieldset>
    
    <fieldset>
     <legend>Experience</legend>
     <div id="EXPERIENCE"></div>
     <div style="text-align:right"><a href="#TOP">Top</a></div>
    </fieldset>
    
    <fieldset>
     <legend>Publications</legend>
     <div id="PUBLICATIONS"></div>
     <div style="text-align:right"><a href="#TOP">Top</a></div>
    </fieldset>
    
    <fieldset>
     <legend>Miscellaneous Information</legend>
     <div id="MISCELLANEOUS"></div>
     <div style="text-align:right"><a href="#TOP">Top</a></div>
    </fieldset>
    
    </body>
    </html>
    I am currently investigating how to use the <link style="spreadsheet" ...>
    tag to dedicate a particular media to change the CSS usage based on the screen or printer,
    but I don't see much effect at this time (with my experimentations).

  5. #5
    Join Date
    Mar 2011
    Posts
    1,138
    <fieldset> and <legend> are meant to provide semantic structure for HTML forms to aid in associating text with the various form elements - especially for non-visual browsers. They don't really work for layout. <fieldset>, for example, is not a displayed element, so you can't really count on browsers respecting a CSS width setting for it. A <div> would be the best choice for your document instead. <legend> is an inline element, so you can use it as you would <span>, but I think a heading tag - <h1>-<h6> would be more appropriate here.
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    Thank you, 'rtrethewey', for the explanation.
    I'll give those suggestions a try.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles