SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member Datac0re's Avatar
    Join Date
    Mar 2004
    Location
    Ohio
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    page-break-before and IE

    I would like a table to be rendered on a second page so I'm using page-break-before. In firefox, things print just fine, but of course, in IE the printing is screwed up. Basically, the first page prints, the page break is hit (there is a page 2), but the page is blank! Everything underneath the page-break is just gone...

    Here's the relevant style and page format:

    Code:
    [style sheet settings]
    body, table {font-family:Verdana; font-size:8pt; color:#683D1C;}
    #logo {position:relative; min-width:450px; background-color:#000000; color:White; border:2px outset #B39F7E; height:60px; margin-bottom:4px;}
    #nav {padding:4px 4px; width:120px;}
    #content {position:absolute; left:145px; top:85px; padding:0px 5px 0px 10px; border-left:1px dashed #B39F7E; line-height:1.5em;}
    h3 {color:#846336; line-height:1em; margin-bottom:3px;}
    
    [style sheet printing settings]
    #logo {display:none;}
    #nav {display:none;}
    #content {position:relative; left:0px; top:0px; border-left: 0px;}
    
    [page layout]
    <body>
         <div id="logo"> ... </div>
         <div id="nav"> ... </div>
         <div id="content">
              <h3>table title</h3>
              <table> ... </table>
    
              <h3>table title</h3>
              <table> ... </table>
    
              <h3>table title</h3>
              <table> ... </table>
    
              <div style="page-break-before:always;"></div>
    
              <h3>table title</h3>
              <table> ... </table>
         </div>
    </body>
    In the above scenario, the 4th h3 tag and table are simply not printed. I'm at a loss here... Any suggestions?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I just tested this in ie6 and it worked fine.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="print" >
    #logo {display:none;}
    #nav {display:none;}
    #content {position:relative; left:0px; top:0px; border-left}
    </style>
    </head>
    <body>
    <div id="logo"> ... </div>
    <div id="nav"> ... </div>
    <div id="content"> 
      <h3>table title</h3>
      <table>
    	<tr>
    	  <td>table1</td>
    	</tr>
      </table>
      <h3>table title</h3>
      <table>
    	<tr>
    	  <td>table2</td>
    	</tr>
      </table>
      <h3>table title</h3>
      <table>
    	<tr>
    	  <td>table3</td>
    	</tr>
      </table>
      <div style="page-break-before:always;"></div>
      <h3>table title</h3>
      <table>
    	<tr>
    	  <td>table4</td>
    	</tr>
      </table>
    </div>
    </body>
    </html>
    Have you got a link to the page in question?

    Paul

  3. #3
    SitePoint Member Datac0re's Avatar
    Join Date
    Mar 2004
    Location
    Ohio
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it does work when the screen stylesheet is not included. My problem is that both the screen and print stylesheet are included, with their media properties set correctly. Try putting the screen stylesheet on the page also and you'll see how the last h3/table is just cut off.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hmmm, I must be doing somethig different as this works fine for me:

    This is what I was using.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen" >
    body, table {font-family:Verdana; font-size:8pt; color:#683D1C;}
    #logo {position:relative; min-width:450px; background-color:#000000; color:White; border:2px outset #B39F7E; height:60px; margin-bottom:4px;}
    #nav {padding:4px 4px; width:120px;}
    #content {position:absolute; left:145px; top:85px; padding:0px 5px 0px 10px; border-left:1px dashed #B39F7E; line-height:1.5em;}
    h3 {color:#846336; line-height:1em; margin-bottom:3px;}
    </style>
    <style type="text/css" media="print" >
    #logo {display:none;}
    #nav {display:none;}
    #content {position:relative; left:0px; top:0px; border-left}
    </style>
    </head>
    <body>
    <div id="logo"> ... </div>
    <div id="nav"> ... </div>
    <div id="content"> 
      <h3>table title</h3>
      <table>
     <tr>
       <td>table1</td>
     </tr>
      </table>
      <h3>table title</h3>
      <table>
     <tr>
       <td>table2</td>
     </tr>
      </table>
      <h3>table title</h3>
      <table>
     <tr>
       <td>table3</td>
     </tr>
      </table>
      <div style="page-break-before:always;"></div>
      <h3>table title</h3>
      <table>
     <tr>
       <td>table4</td>
     </tr>
      </table>
    </div>
    </body>
    </html>
    Can you post a full (non) working example as you may have something else going on there that I am not including

    Paul

  5. #5
    SitePoint Member Datac0re's Avatar
    Join Date
    Mar 2004
    Location
    Ohio
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok now I'm ready to throw my monitor out the window... first, some more context... Here's a little more complete view of the relevant css from my default stylesheet:

    Code:
    /* General Style */
    body, table {font-family:Verdana; font-size:8pt; color:#683D1C;}
    input, select {font-size:8pt;}
    /* min-width is for non-IE browsers */
    #logo {position:relative; min-width:450px; background-color:#000000; color:White; border:2px outset #B39F7E; height:60px; margin-bottom:4px;}
    #nav {padding:4px 4px; width:120px;}
    #content {position:absolute; left:145px; top:85px; padding:0px 5px 0px 10px; border-left:1px dashed #B39F7E; line-height:1.5em;}
    h1, h2, h3, h4, h5, h6, .navHeader {color:#846336; line-height:1em; margin-bottom:3px;}
    h1, h2, h3, h4, h5, h6 {font-family:Garamond, Serif;}
    .navHeader {font-weight:bold;}
    a {color:#CA6306;}
    hr {background-color:#DBBC8E; color:#DBBC8E; border:0px; height:1px;}
    .indent {margin-left:3em;}
    .red {color:Red;}
    .green {color:Green;}
    And here's the print style again just for reference:

    Code:
    #logo {display:none;}
    #nav {display:none;}
    #content {position:relative !important; left:0px; top:0px; border-left:0px;}
    
    /* catch-all for anything I don't want to print */
    .doNotPrint {display:none;}
    My style sheets are linked like this:

    Code:
    <link rel="stylesheet" type="text/css" href="/Intranet/Style/default.css" />
    <link rel="stylesheet" type="text/css" media="print" href="/Intranet/Style/print.css" />
    For the most part, I want the default style to apply to screen AND print, so that's why I'm not setting the media attribute on the first link. The print css should only be "fixing" the items that I want to rearrange/hide.

    Now here's the absolutely rediculous part. After playing around with removing certain css selectors to make sure I didn't have something obviously wrong, I've come up with the following scenarios...

    Scenario A:
    Remove the #content selector from the default css file. Outcome: nothing changes - the last h3/table is still mysteriously gone.

    Scenario B:
    Remove the "h1, h2, h3, h4, h5, h6, .navHeader" selectors (the line below the #content selector) from the default css file. Outcome: same as Scenario A.

    Scenario C:
    Remove the #content selector AND the "h1, h2, h3, h4, h5, h6, .navHeader" selectors from the default css file. Outcome: The h3/table are now visible when printing!

    So... WHAT ON EARTH is going on here?

    By the way, thanks for all your help so far Paul.

    -Brian

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ie doesn't like the line-height in the h3 for some reason so simply add this to your print stylesheet and everything should be ok.
    Code:
    h3 {line-height:normal};
    You may need to do the same for the other headings etc.

    Paul

  7. #7
    SitePoint Member Datac0re's Avatar
    Join Date
    Mar 2004
    Location
    Ohio
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YOU DA MAN PAUL!

    I'll be damned... is this a documented bug somewhere?

    Thanks a ton Paul.

    -Brian


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
  •