28173 sujets

CSS et mise en forme, CSS3

Impression d'une page via un CSS

Bonjour,

Je suis confronté à un problème pour le moins mystérieux que je n'arrive pas à résoudre.

J'ai un joli site, avec une jolie feuille de style pour l'affichage et une jolie feuille de style pour l'impression. Jusque là, rien de bien exceptionnel, sauf que :
- Après avoir testé l'affichage de la feuille d'impression dans un navigateur, où elle s'affiche correctement et comme je lui demande, lors de l'impression elle me rajoute (sous IE) un overflow que j'avais pourtant annulé.
- Elle provoque un message d'erreur sous FF ("Une erreur inconnue est survenue pendant l'impression") et ne sort carrément rien.

J'avoue ne pas trop comprendre Smiley sweatdrop

Voici la feuille de style de base :
/* Mise à zéro de toutes les marges */
* { 
	margin: 0;
	padding:0; 
}

/* Initialisation des liens */
a {
}

/**
 * Body
 */
body {
	text-align: center ; /*centrage IE */

	/* Police */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;

	margin-top: 5px;
	padding: 0;

	/* Background */
	background-color: #cfcfcf;
	background-image: url('../img/chevron.gif');
	background-repeat: repeat-x;

	/* Scroll IE */
	scrollbar-track-color: #CFCFCF;
	scrollbar-face-color: #CFCFCF;
	scrollbar-darkshadow-color: #CFCFCF;
	scrollbar-3dlight-color: #CFCFCF;
	scrollbar-shadow-color: #CFCFCF;
	scrollbar-highlight-color: #CFCFCF;
}

/**
 * Conteneur principal
 */
div#main {
	width: 900px;
	margin: 0 auto;
	text-align: left;
}

/**
 * Header
 */
#header {
	height: 50px;
}

#logo {
	float: left;

	width: 332px;
	height: 45px;
	
	margin-left: 18px;
	_margin-left: 23px; /* Crack IE */
	margin-top: 5px;

	background-repeat: no-repeat;
}

#flagcont {
	padding-top: 15px;
	padding-right: 20px;
	float: right;
}

/**
 * Gauche
 */
#gauche {
	float: left;

	width: 170px;
	height: 505px;

	padding: 0;
	margin: 0px 5px;

	text-align: center;
	overflow: none;
}



/**
 * Centre
 */
#centre {
	float: left;

	width: 505px;
	height: 505px;

	margin: 0px;
	padding: 0px;

	background-color: #fff;

	overflow: none;

	text-align: justify;

	/* Scroll IE */
	scrollbar-track-color: #CFCFCF;
	scrollbar-face-color: #CFCFCF;
	scrollbar-darkshadow-color: #CFCFCF;
	scrollbar-3dlight-color: #CFCFCF;
	scrollbar-shadow-color: #CFCFCF;
	scrollbar-highlight-color: #CFCFCF;
}

#cent_tit {
	width: 475px;
	height: 25px;
	padding: 5px;
	margin: 0 auto;
}

#cent_cont {
	width: 475px;

	height: 428px;
	margin-top: 10px;

	_height: 438px; /* Crack IE */
	_margin-top: 0px;

	padding: 15px;

	overflow: auto;
}

/**
 * Droite
 */
#droite {
	float: left;

	height: 500px;
	width: 185px;

	padding: 5px 0 0 5px;
	margin: 0 5px 0 5px;

	background-color: #fff;
}


Et voici la feuille de style pour l'impression :
body {
	background: white;

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
/*
	margin-left: 10%;
	margin-right: 10%;*/
}

div#main {
	width: 100%;
	height: 100%;
	text-align: justify;
/*	overflow: none;*/
}


#flagcont {
	display: none;
}

#droite {
	display: none;
}

#gauche {
	display: none;
}

#centre {
	overflow: none;
	height: 100%;
}

#cent_cont {
	overflow: none;
	height: 100%;
}


A savoir que le problème se situe dans le "centre". Celui-ci est fait de deux parties :
- cent_tit : qui continue le titre de la page
- cent_cont : qui contient les informations de la page et qui pour des raisons d'esthétiques est en mode overflow lorsque l'on surfe sur le site.

Merci par avance à ceux qui se pencheront sur ce problème.
Modifié par Jedi (26 May 2006 - 11:37)
Sujet clos
Aller à