28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

J'ai un probleme d'impression sous IE6. La page est coupée sur la droite. Alors que sous IE 7 et Firefox, ça passe nickel. Smiley biggrin

Voici le code source de la feuille de style print pour IE6 :

.connected #content{
	background:none;
	height:100%;
	left:0%;
	top:0%;
	margin-top:0px;
	margin-left:20px;
	margin-right:0px;
	border:0px;
	padding:0px;
}


Eviter les réponses du type "Imprime sous firefox". C'est pour la réalisation d'un site pour un client, dans le cahier des charges => compatibilité avec IE6, IE7 et mozilla 1 & 2

D'avance merci à tous.
Modifié par Matteo_mt (27 Sep 2007 - 16:06)
Modérateur
Bonjour et bienvenue, Smiley cligne

Tu peux peut-être tout simplement ajouter une marge à droite en commentaires conditionnels, non ? Smiley smile
Modifié par koala64 (27 Sep 2007 - 16:08)
Merci pour cette rapide réponse koala64 !

Je viens d'essayer ta solution, ça ne change en rien la coupure du texte Smiley decu Rien ne bouge...


.connected #content{
	background:none;
	height:100%;
	left:0%;
	top:0%;
	margin-top:0px;
	margin-left:20px;
	margin-right:50px;
	border:0px;
	padding:0px;

}


D'autres idées ?
Modérateur
mmh... une question... Quand tu dis que rien ne bouge, veux-tu dire que même à l'écran, la marge n'est pas prise en compte ?
Et est-ce bien à l'impression que tu as constaté la coupure ou est-ce seulement dans l'aperçu ?
Quoiqu'il en soit, un peu plus de code (de quoi reproduire le problème) serait bien utile. Smiley cligne
Rien ne bouge dans l'aperçu et à l'impression. J'avoue avoir été trompé plus d'une fois par l'aperçu d'impression de firefox (coupures, texte qui se chevauche, etc.) alors que le rendu à l'impression n'était pas du tout pareil.

Mais ce n'est pas le cas ici avec IE6.

Il s'agit d'une feuille de style print (que pour l'impression) donc à l'écran, la marge n'est pas prise en compte.

Le code screen :

.connected #content {
	margin-left: 2px;
	background: none;
	width: 761px;
	height: 378px;
	padding: 0px;
	margin-top: 0px;
	border-left: 1px solid #e86b1b;
	border-bottom: 1px solid #e86b1b;
	border-right: 1px solid #e86b1b;
	z-index: 50;
	position: absolute;
	right: 0px;
}


Le code print pour tous les navigateurs :

.connected #content{
	background:none;
	width:100%;
	height:100%;
	left:0%;
	margin-top:0px;
	margin-left:0px;
	border:0px;
	overflow:visible;

}


Le code print pour les IE (6 & 7)

.connected #content{
	background:none;
	height:100%;
	left:0%;
	top:0%;
	margin-top:0px;
	margin-left:20px;
	margin-right:0px;
	border:0px;
	padding:0px;
}


D'autres informations sont nécessaire ? Je t'aurais bien donné l'URL du site mais déjà il faut un login et mot de passe pour avoir accès au problème, et il s'agit d'une pré-prod, accès restreint par filtrage des adresses IP... Smiley ohwell

Encore merci pour tes réponses
Une question en passant: les seuls styles qui s'appliquent pour l'impression sont ceux indiqués? Ou bien les styles pour l'affichage à l'écran s'appliquent-ils également, faute de restriction de leur champ d'action au média screen?

Bref, est-ce qu'on a:
<link rel="stylesheet" type="text/css" href="ma_feuille_css_generale.css" />
<link rel="stylesheet" type="text/css" href="ma_feuille_css_imprimante.css" media="print" />
ou bien
<link rel="stylesheet" type="text/css" href="ma_feuille_css_ecran.css" media="screen" />
<link rel="stylesheet" href="ma_feuille_css_imprimante.css" type="text/css" media="print" />
?
Bonjour.

J'ai essayé le padding-right:50px; => toiujours pareil. J'ai l'impression que les styles de mise en forme ne s'appliquent pas ! Par contre le positionnement lui change bien... Smiley confus

Les styles pour l'impression sont bien les seuls qui s'appliquent. La feuille de style pour l'affichage est de type media="screen".

Je ne comprend vraiment pas le comportement d'IE6.

Arf je vais finir par prendre une solution radicale : si l'internaute a IE6, à l'impression j'efface tout et j'affiche un gros carré rouge avec écrit en blanc : "Installer Firefox !!!!!!" (Non je plaisante...) Smiley cligne

J'avais même essayé de réduire le width du div à 100px, il ne se passe rien ! Smiley mur
Matteo_mt a écrit :
J'avais même essayé de réduire le width du div à 100px, il ne se passe rien ! Smiley mur

Tu dois tout de même avoir quelque chose de bizarre sur ta page, non?

La page de test suivante fonctionne parfaitement (note: le height: 100% est pris en compte par IE6, pas par les autres navigateurs à priori).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="data/page.css" />
	<style type="text/css" media="print">
	div#un {
		background:none;
		height:100%;
		left:0%;
		top:0%;
		margin-top:0px;
		margin-left:20px;
		margin-right:0px;
		border: solid 3pt red;
		padding: 1pt 6pt;
		color: red;
	}
	div#deux {
		background:none;
		height:100%;
		left:0%;
		top:0%;
		margin-top:0px;
		margin-left:20px;
		margin-right:0px;
		border:0px;
		padding:0px;
		width: 100px;
		color: blue;
	}
	div#trois {
		background:none;
		height:100%;
		left:0%;
		top:0%;
		margin-top:0px;
		margin-left:.6cm;
		margin-right:0px;
		border:0px;
		padding:0px;
		width: 3cm;
		color: green;
	}
	</style>
</head>
<body>
<div id="un">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
	<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</div>
<div id="deux">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
	<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</div>
<div id="trois">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
	<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</div>
</body>
</html>
Je ne sais vraiment pas. J'ai beau retourné le problème dans tous les sens, faire tous les tests possibles, rien ne fonctionne...

Il doit y avoir un big que je ne vois pas...

Merci quand même pour votre aide.

Smiley cligne
Matteo_mt a écrit :
Je ne sais vraiment pas. J'ai beau retourné le problème dans tous les sens, faire tous les tests possibles, rien ne fonctionne...

On peut voir la page complète?
Ou si besoin (notamment pour un travail dans le cadre d'une entreprise) une copie de cette page, anonymisée et mise en ligne sur un hébergement plus discret.