28172 sujets

CSS et mise en forme, CSS3

Salut tout le monde, j'ai des tableaux de données que je veux imprimer à partir d'une page de mon site. Ma page contient un titre et le tableau. J'ai toujours un saut de page entre mon titre et mon tableau qui a un caption sous FF quand j'ai un tableau plus long qu'une page. Avec IE je n'ai pas ce saut de page.

<h3>titre de ma page</h3>
<table>
<caption>titre du tableau</caption>
<tr><th></th>...</tr>
</table>


Voici mon css print

body {
   background: #fff;
   color: #000;
   font-size: 12pt; 
   font-family: serif;
}
#page {
    margin: 0;
    border: none;
}
#sources a[href]:after {
 content:" <"attr(href)">";
 color: #888;
 background-color: inherit;
 font-style: italic;
 font-size: 80%;
} 

.liens a[href]:after {
 content:" <"attr(href)">";
 color: #888;
 background-color: inherit;
 font-style: italic;
 font-size: 80%;
} 
h3 {
  font-size: 20pt;
}
h4 {
  font-size: 18pt;
}
h5 {
  font-size: 16pt;
}
h6 {
  font-size: 14pt;
}
.soulignement {
  text-decoration: underline;
}
em {
  font-style: italic;
}
strong {
  font-weight: bold;
}
blockquote {
   padding: 10pt;
   border: 1px solid #000;
   font-style: italic;
}
q {
   font-weight: bold;
   font-style: italic;
}
.caracgros {
   font-size: 18pt;
}
.titreplaque {
   font-size: 20pt;
}
.soustitreplaque {
   font-size: 16pt;
}
#info-perso li, #categorie li {
  line-height: 20pt;
}
#info-perso li {
  border-bottom: 1px solid #000;
  list-style: none;
} 
ul#categorie {
  list-style-image: url(uploads/images/saec/puce.jpg);
  list-style-position: inside;
}

/************* tableaux ************************/
#contenu2 table, #contenu table {
   border-collapse: collapse; 
}
#contenu2 caption, #contenu caption {
   text-align: left;
   font: 12pt arial, sans-serif;
   padding: 10pt 10pt 10pt 0;
}

#contenu2 td, th, #contenu td, th {        
   font: 10pt arial, sans-serif;
   text-align: left;
   height: 20pt;
   padding: 5pt;
}
/*************  éléments à ne pas imprimer  *****************/
#entete, #menurapide, #menu, #ariane, #gauche, #recherche, #menuwrapper, .noprint, #babillard, #parchemin, #fonds, #image, #pied, #listealpha, #listenoms {
   display: none;
}


Je me demande aussi pourquoi IE imprime l'élément <title></title> et pas FF ?

Merci à l'avance d'éclairer mes lanternes
Modifié par Mabelle (06 Apr 2009 - 16:53)