[Résolu] Problème d'affichage avec IE

Question

Niklaus

15 Aug 2006 à 13:27

Bonjour à tous,
Après avoir passé à comprendre mon bug, je n'arrive pas trouver le problème Smiley decu

Dans ma page des actions il y a des petits traits verts dans les coins droits sous IE alors qu'avec Firefox c'est ok.
voici mon code xhtml:


<!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=iso-8859-1" />
<title>Brod'Art Viandes SA - Contact</title>
<meta name="description" content="Bienvenue sur le site de Brod'Art Viandes SA. Vous y trouverez la présentation de l'entreprise, les actions de la semaine. Brod'Art viandes, Le grossiste fribourgeois toujours prêt à vous dépanner!" />
<meta name="keywords"  content="boucherie,chevaline,commerce de viande,abattoirs,charcuterie,viandes,brodart,davet,fribourg,boeuf,cheval,poulet,dinde,saucissons,gruyère,spécialités" />
<link type="text/css" rel="stylesheet" href="styles.css" title="styles" />
</head>
<body> 
	
	<div id="conteneur">
		 
		 <div id="entete">
		 	  <img src="design/banniere.jpg" alt="Bannière Brod'Art Viandes SA" /><h1>Brodart-Viandes SA - Fribourg</h1>
		 </div>
		 
		 <ul id="menu-navigation">
		 	  <li><a href="index.html" title="Brod'Art Viandes SA - Accueil du site">Accueil</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
			  <li><a href="presentation.html" title="Brod'Art Viandes SA - Présentation des activités">Présentation</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
			  <li>Actions&nbsp;&nbsp;|&nbsp;&nbsp;</li>
			  <li><a href="infos.html" title="Brod'Art Viandes SA - Contact">Informations</a></li>
		 </ul>
		 
		 
		 
		 <div id="cadre-actions">
			  	   
				   <div id="coin-haut-droit"></div><div id="coin-haut-gauche"></div>
				   		<p id="imprimer"><a href="brodart-viandes-liste-actions.pdf" title="Brod'Art Viandes SA - Liste des actions">
						<img src="design/icone-imprimer.gif" alt="Imprimer la page" /></a></p>
						<h2>Actions des semaines 29 et 30</h2>
						<p>du 17 au 29 juillet 2006<br />&lt;&lt;à l'ATT. du chef de cuisine&gt;&gt;</p>
						
						<ul> 
					  	   <li>&nbsp;</li>										<li>Prix/kg</li>
					 	   <li>Brochettes de Wapiti</li>						<li>25.00</li>
						   <li>Rôti de veau (épaule)</li>						<li>23.90</li>
						   <li>Ragoût de veau</li>								<li>20.90</li>
						   <li>Foie de veau</li>								<li>24.50</li>
						   <li>Filets de poulet panés</li>						<li>12.00</li>
						   <li>Tournedos de dinde</li>							<li>19.00</li>
						   <li>Steaks chasseur de cheval</li>					<li>16.00</li>
						   <li>Bouilli maigre</li>								<li>15.90</li>
						   <li>Rôti de porc suédois</li>						<li>17.00</li>
						   <li>Emincé de cheval minute</li>						<li>18.00</li>
						   <li>Cordons-bleus de volaille</li>					<li>15.00</li>
					  </ul>
					  <p>TVA 2,4% non comprise</p>
					  
				   <div id="coin-bas-droit"></div><div id="coin-bas-gauche"></div>
		 </div>
		 
		<div id="pied"><p><a href="mailto:contact@brodart-viandes.ch" title="Concept et design">Concept et design Nicolas Haymoz</a></p></div>
	
	</div>
	
</body>
</html>

ainsi que ma feuille de style:


/*
                   \\"""//
                    (0 0)
    +----oOO---------(_)---------------+
    |   style CSS                      | 
    |    www.brodart-viandes.ch          |
    |   Niklaus, 27.06.2006            |
    +------------------------oOO-------+
                   |__|__|
                    || ||
                   ooO Ooo
*/

/* ------------------------------------------------------------------- */
/*                       Généralités								   */
/* ------------------------------------------------------------------- */

body {
	background: white url(design/background-lignes.gif);
	font: normal 90%/1em "Trebuchet MS", Verdana, Arial, sans-serif;
	color: black;
	margin: 1em 0;
	text-align: center;
}
* {
	margin: 0;
	padding: 0;
}
a {color: black;}

a:hover {
	font-weight: bold;
	color: #f90;
}
h1 {
	text-indent: -5000px;
	margin: 0;
	padding: 0;
	font-size: 1px;
	line-height: 1px;
	text-decoration: none;
}
h2 {
	margin: 0 0 0.5em 0;
	padding: 0;
	color: #000;
	font-weight: bold;
	font-size: 1.3em;
}
h3 {
	margin: 0 0 0.5em 0;
	padding: 0;
	font-weight: bold;
	font-size: 1.25em;
	color: #093;
}
img {
	border: 0 none;
}
#conteneur { /* conteneur principal */
	background: white;
	width: 750px; 
	margin: 0 auto;
	border: #093 solid 1px;
}

#entete { /* entête des pages */
	width: 750px;
	margin: 0 auto;
	background: white url(design/bande-header.gif) no-repeat 100% 0;
}
#entete img {
	margin: 45px 0 0;
	padding-bottom: 0.5em;
}
#pied { /* Pied de page */
	height: 110px;
	background: white url(design/fond-montagnes.jpg) no-repeat;
	clear: both;
	position: relative;
}
#pied p a {
	position: absolute;
	right: 0;
	bottom: 0;
	color: #ff9;	
	text-decoration: none;
	font-size: 0.9em;
	margin: 0.5em 2em;
}
#xiti-logo {
	margin: 1em;
	text-align: left; 
	display: none;
}

/* ----------------------------------------------------------------------
                         Page d'accueil
/* ------------------------------------------------------------------- */

#h2-accueil, .p-index {
	line-height: 2em; 
	text-align: center;
}
.p-index {
	margin: 2em;
	font-size: 1.1em;
}
.citation {
	margin: 0 0.2em;
	font-size: 2em;
	color: #093;
	font-style: italic;
}

/* ----------------------------------------------------------------------
                         Menu navigation
/* ------------------------------------------------------------------- */
	
ul#menu-navigation	{ /* Menu navigation */
	background : url(design/coin-vert.gif) no-repeat;
	width: 650px;
	height: 35px;
	margin: 0 25px 25px;	
	padding-left: 50px;
	border-top: green solid 1px;
	border-bottom: green solid 1px;
}
#menu-navigation li {
	display: inline;
	line-height: 2;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: bold;
}
#menu-navigation a {
	text-decoration: underline;
	font-weight: normal;
}

/* ----------------------------------------------------------------------
                      Page présentations
/* ------------------------------------------------------------------- */

#h2-presentation {
	text-align: left;
	margin: 0 15px;
	font-size: 110%;
	color: #093;
}
p.p-presentation {
	text-align: justify; 
	font-size: 1em;
	font-weight: normal;
	margin: 15px 70px;
	line-height: 1.5;
}
	
.h3-presentation {
	text-align: left;
	margin: 0 1em;
	font-size: 110%;
	color: #093;
}
ul.liste {
	margin: 15px 75px;
}
.liste li {
	margin: 0.4em;
	text-align: left;
	padding-left: 5px;
	list-style: url(design/puce1.gif) outside;
	line-height: 1.2;
}
#la-roche {
	margin-left: 25px;
	font-weight: normal;
	font-size: 0.8em;
	font-style: italic; 
	color: black;
}

/* ----------------------------------------------------------------------
                                 Actions
/* ------------------------------------------------------------------- */

#cadre-actions {
	margin: 0.5em auto;
	padding: 0.3em;
	background-color: #33cc00;
	width: 635px;
	position: relative;
}
#cadre-actions ul {
	width: 100%;
	margin: 10px auto;
	list-style-type: none;
}
#cadre-actions li {
	width: 47%;
	float: left;
	margin: 5px;
	font-size: 1.2em;
	line-height: 1;
	text-align: center;
}
#cadre-actions h2 {
	text-align: center;
	font-size: 1.6em;
	padding-top: 10px;
}
#cadre-actions p {
	margin: 1em 0; 
	line-height: 1.2;
	text-align: center;
	font-size: 110%;
}
#coin-haut-gauche, #coin-haut-droit, #coin-bas-gauche, #coin-bas-droit { /* arrondir les coins */
	height: 10px; width: 10px;
	border: 0 none;
	background-repeat: no-repeat;
	font-size: 1px; /* correction d'un bug IE */
}
#coin-haut-gauche {
	position: absolute;
	left: 0;
	top: 0;
	background: url(design/coin-vert-haut-gauche.gif);
}
#coin-haut-droit {
	position: absolute;
	right: 0;
	top: 0;
	background: url(design/coin-vert-haut-droit.gif);
}
#coin-bas-gauche {	
	position: absolute;
	left: 0;
	bottom: 0;
	background: url(design/coin-vert-bas-gauche.gif);
}
#coin-bas-droit {	
	position: absolute;
	right: 0;
	bottom: 0;
	background: url(design/coin-vert-bas-droit.gif);
	clear: both;
}
#imprimer {
	position: absolute;
	right: 25px;
}

/* ----------------------------------------------------------------------
                                 Contacts
/* ------------------------------------------------------------------- */
 
.plan-contact {
	height: 115px;
	margin: 0.5em 5em;
}
.plan-contact h3, #plan-contact-access h3 {
	width: 75px;
	float: left;
}
#plan-contact-access {
	height: 360px;
	margin: 0.5em 5em;
	position: relative;
}
#plan-contact-access img {
	display: inline;
	position: absolute;
	top: 0; 
	left: 150px;
	text-align: center;
	width: 340px;
	height: 340px;
}

#plan-contact-access a:hover {
	background: none; /* correction d'un bug IE */
}
#plan-contact-access a span {
	display: none;
}
#plan-contact-access a:hover span {
	display: inline;
	position: absolute;
	top: 0; 
	left: 0;
	text-align: center;
	width: 340px;
	height: 340px;
}
ul.liste-contacts {
	float: left;
}
.liste-contacts li {
	list-style-type: none;
	line-height: 1.5;
	text-align: left;
}
address {
	float: left;	
	width: 300px;
	text-align: left;
	font-style: normal;
	line-height: 1.5;
}
p#tel-fax {
	float: left;
	text-align: right;
	line-height: 2em;
}
p#tel-fax img {
	margin: 0.5em;
	vertical-align: middle;
}
p.infos {
	line-height: 1.5em;
	padding: 1em 0; 
	text-align: center;
}

D'avance merci de votre aide précieuse!
Niklaus
Modifié par Niklaus (15 Aug 2006 - 16:27)

Niklaus

15 Aug 2006 à 13:29

Oups, petite précisions :
... il y a des petits traits verts dans les coins droits (contenu en vert) ...
upload/348-budie.jpg

Modifié par Niklaus (15 Aug 2006 - 13:37)

Alan

15 Aug 2006 à 13:55

Bonjour,
la solution serait de spécifier un nombre pair pour la largeur de #cadre-actions, c'est à dire ajouter ou enlever 1px.

Niklaus

15 Aug 2006 à 15:20

Alan a écrit :
Bonjour,
la solution serait de spécifier un nombre pair pour la largeur de #cadre-actions, c'est à dire ajouter ou enlever 1px.

Bonjour Alan,

C'est ok maintenant.
C'est tellement facile et j'ai cherché bien loin Smiley langue

Un grand merci en tout cas Smiley biggrin

Igor

15 Aug 2006 à 15:39

Niklaus a écrit :

C'est tellement facile et j'ai cherché bien loin
Un grand merci en tout cas

Ce sujet est résolu alors ? Smiley cligne

Niklaus

15 Aug 2006 à 16:27

Igor a écrit :

Ce sujet est résolu alors ?

Oups, mais bien sûr Smiley biggrin

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Problème d'affichage avec IE