1. Accueil
  2. Question et réponse
  3. CSS Nested Div Imprimer Problème: texte Grappes en haut de la deuxième page

CSS Nested Div Imprimer Problème: texte Grappes en haut de la deuxième page

2010-07-13 3 views
0

Voici le code HTML et CSS en ligne, je suis actuellement en utilisant:CSS Nested Div Imprimer Problème: texte Grappes en haut de la deuxième page

<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; 
    background-color: #D3D3D3;"> 
    <div style="width: 384px; float: left; height: 20px; margin: 0;"> 
     <span style="font-style: italic; font-size: 13px; padding-left: 80px;">Test Group 1</span></div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; font-weight: bold; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block; 
      position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
    </div> 
<div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
    margin: 0; font-style: italic; font-weight: bold; border-bottom: 3px double;"> 
    <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px; 
     display: block; position: absolute;"> 
     $0.00</div> 
    <div style="font-size: 13px; text-align: right; width: 70px; display: block; 
     position: absolute;"> 
     $0.00</div> 
</div> 
<div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
    margin: 0; font-weight: bold; font-style: italic; border-bottom: 3px double;"> 
    <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px; 
     display: block; position: absolute;"> 
     $0.00</div> 
    <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
     display: block; position: absolute;"> 
     $0.00</div> 
    <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px; 
     display: block; position: absolute;"> 
     $0.00</div> 
</div> 
</div><div style="width: 975px; clear: both; float: left; text-align: left; display: block; 
    margin: 0; background-color: #D3D3D3;"> 
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
</div> 
<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; 
    display: block; background-color: #D3D3D3;"> 
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;"> 
     <span style="font-size: 13px; padding-left: 130px;">L GROUP</span></div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block; 
      position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; text-align: right; width: 70px; display: block; 
      position: absolute;"> 
      $0.00</div> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
    </div> 
</div> 
<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; 
    display: block; background-color: #D3D3D3;"> 
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;"> 
     <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px; 
      display: block; position: absolute;"> 
      <span id="lnkInvoice17">828</span></div> 
     <div style="font-size: 13px; padding-left: 264px; text-align: right; width: 35px; 
      display: block; position: absolute;"> 
      5.00000%</div> 
     <div style="font-size: 13px; text-align: left; padding-left: 197px; width: 60px; 
      display: block; position: absolute;"> 
      7/14/2010</div> 
    </div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block; border-bottom: 1px solid;"> 
     <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block; 
      position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block; border-bottom: 1px solid;"> 
     <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; text-align: right; width: 70px; display: block; 
      position: absolute;"> 
      $0.00</div> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block; border-bottom: 1px solid;"> 
     <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00**</div> 
    </div> 
</div> 
<div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; 
    display: block; background-color: #D3D3D3;"> 
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;"> 
     <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px; 
      display: block; position: absolute;"> 
      <span id="lnkInvoice18">828</span></div> 
    </div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block;"> 
     <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00</div> 
     <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $165,165.12</div> 
    </div> 
</div> 
<div style="width: 975px; clear: both; float: left; text-align: left; display: block; 
    margin: 0; background-color: #D3D3D3;"> 
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
</div>

Ce code est essentiellement un tas de DIVS imbriqués servant comme un extensible/collapsable structure div. J'ai enlevé toutes les fonctionnalités dans le but d'imprimer ceci. Le problème, cependant, est que la page apparaît parfaitement dans l'aperçu avant impression ... jusqu'à ce que la page ait besoin de passer à la page suivante. La 2ème page a le reste du texte tout jubbled au sommet de la page:

alt text http://i29.tinypic.com/wsphyt.jpg

Quelqu'un a une idée de ce qui se passe? Je suppose que c'est un problème de FLOAT ou INLINE/BLOCK, mais je n'arrive pas à comprendre lequel.

Source

2010-07-13 jlrolin

+0

Vous devriez peut-être ce poster sur jsFiddle.net – Marko

+0

http://jsfiddle.net/HB2qd/ - il y a go. – jlrolin

+0

La seule façon de déboguer ce code est de le filmer d'abord puis de le disséquer. –

Répondre

0

essayer d'utiliser ce code HTML

<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0; 
    background-color: #D3D3D3;"> 
    <div style="width: 384px; float: left; height: 20px; margin: 0;"> 
     <span style="font-style: italic; font-size: 13px; padding-left: 80px;">Test Group 1</span> 
    </div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; font-weight: bold; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block; 
      position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; font-style: italic; font-weight: bold; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;"> 
      $0.00 
     </div> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; font-weight: bold; font-style: italic; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
    </div> 
</div> 
<div class="clearfix" style="width: 975px; float: left; text-align: left; display: block; 
    margin: 0; background-color: #D3D3D3;"> 
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
</div> 
<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0; 
    display: block; background-color: #D3D3D3;"> 
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;"> 
     <span style="font-size: 13px; padding-left: 130px;">L GROUP</span></div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block; 
      position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;"> 
      $0.00 
     </div> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block; border-bottom: 3px double;"> 
     <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
    </div> 
</div> 
<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0; 
    display: block; background-color: #D3D3D3;"> 
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;"> 
     <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px; 
      display: block; position: absolute;"> 
      <span id="lnkInvoice17">828</span> 
     </div> 
     <div style="font-size: 13px; padding-left: 264px; text-align: right; width: 35px; 
      display: block; position: absolute;"> 
      5.00000% 
     </div> 
     <div style="font-size: 13px; text-align: left; padding-left: 197px; width: 60px; 
      display: block; position: absolute;"> 
      7/14/2010 
     </div> 
    </div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block; border-bottom: 1px solid;"> 
     <div style="font-size: 13px; padding-left: 8px; text-align: right; width: 70px; display: block; 
      position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block; border-bottom: 1px solid;"> 
     <div style="font-size: 13px; padding-left: 80px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; text-align: right; width: 70px; display: block; position: absolute;"> 
      $0.00 
     </div> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block; border-bottom: 1px solid;"> 
     <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00** 
     </div> 
    </div> 
</div> 
<div class="clearfix" style="width: 975px; float: left; text-align: left; margin: 0; 
    display: block; background-color: #D3D3D3;"> 
    <div style="width: 390px; float: left; height: 20px; margin: 0; display: block;"> 
     <div style="font-size: 13px; padding-left: 324px; text-align: right; width: 60px; 
      display: block; position: absolute;"> 
      <span id="lnkInvoice18">828</span> 
     </div> 
    </div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block;"> 
     <div style="font-size: 13px; padding-left: 175px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 90px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $0.00 
     </div> 
     <div style="font-size: 13px; padding-left: 10px; text-align: right; width: 70px; 
      display: block; position: absolute;"> 
      $165,165.12 
     </div> 
    </div> 
</div> 
<div class="clearfix" style="width: 975px; float: left; text-align: left; display: block; 
    margin: 0; background-color: #D3D3D3;"> 
    <div style="width: 384px; float: left; height: 20px; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #BEE0F7; width: 165px; height: 20px; float: right; 
     padding: 0; margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #CFF5CE; width: 166px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
    <div style="background-color: #F0D3D3; width: 253px; height: 20px; float: right; 
     margin: 0; display: block;"> 
    </div> 
</div>

Ajouter ce CSS

<script type="text/css"> 
.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
    } 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 

</script>

Source

2010-07-14 00:41:40 TheGeekYouNeed

+0

Cela semble fonctionner pour la plupart. Le seul problème est sur la deuxième page ... toutes les lignes que j'ai qui séparent les totaux sont partis avec le lettrage sur la gauche qui décrit chaque ligne. – jlrolin

Questions connexes

 Questions connexes