Any known fieldset tag limitations during printout?

@JMRKERApr 13.2012

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; } [/code]

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. ?

to post a comment

HTML

5 Comments(s) _↴

@holyhttpApr 13.2012 — #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.

@JMRKERauthorApr 13.2012 — #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.[/QUOTE]

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".

@JMRKERauthorApr 14.2012 — #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...

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt; Currculum Vitae &lt;/title&gt;
 &lt;style type="text/css"&gt;
 fieldset { width:90%; }
 legend { font-weight:bold; color:blue; }
 ul { margin:0px 10px; padding:0px 10px; }
 li { list-style-type:none; }
 &lt;/style&gt;
 
 &lt;script type="text/javascript"&gt;
 // 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&lt;wcnt; i++) {
 w = Lorem[Math.floor(Math.random()*Lorem.length)];  <br/>
 str += w+' ';
 if (w.indexOf('.') != -1) {
 cnt++
 str += '&lt;p&gt;# '+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);
 }
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;a name="TOP"&gt;&lt;/a&gt;
 &lt;center&gt;
 &lt;h2&gt;John Q. Smith&lt;/h2&gt;
 &lt;/center&gt;
 
 &lt;fieldset&gt;
 &lt;legend&gt;Education&lt;/legend&gt;
 &lt;div id="EDUCATION"&gt;&lt;/div&gt;
 &lt;div style="text-align:right"&gt;&lt;a href="#TOP"&gt;Top&lt;/a&gt;&lt;/div&gt;
 &lt;/fieldset&gt;
 
 &lt;fieldset&gt;
 &lt;legend&gt;Experience&lt;/legend&gt;
 &lt;div id="EXPERIENCE"&gt;&lt;/div&gt;
 &lt;div style="text-align:right"&gt;&lt;a href="#TOP"&gt;Top&lt;/a&gt;&lt;/div&gt;
 &lt;/fieldset&gt;
 
 &lt;fieldset&gt;
 &lt;legend&gt;Publications&lt;/legend&gt;
 &lt;div id="PUBLICATIONS"&gt;&lt;/div&gt;
 &lt;div style="text-align:right"&gt;&lt;a href="#TOP"&gt;Top&lt;/a&gt;&lt;/div&gt;
 &lt;/fieldset&gt;
 
 &lt;fieldset&gt;
 &lt;legend&gt;Miscellaneous Information&lt;/legend&gt;
 &lt;div id="MISCELLANEOUS"&gt;&lt;/div&gt;
 &lt;div style="text-align:right"&gt;&lt;a href="#TOP"&gt;Top&lt;/a&gt;&lt;/div&gt;
 &lt;/fieldset&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

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).

@rtretheweyApr 14.2012 — #<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.

@JMRKERauthorApr 14.2012 — #Thank you, 'rtrethewey', for the explanation.

I'll give those suggestions a try.

?

Also in #HTML _↴

Opening a URL in new Window Spot the Error Back Button in IE6 getting "forgetful"

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

Any known fieldset tag limitations during printout?

5 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Any known fieldset tag limitations during printout?

5 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #HTML _↴