Style graphique bouge?

Sebda · 11 Novembre 2010

Salut,

Mon site ai : www.crea-menuiserie.com

Sur IE les pages sont vraiment moche comparé sur Firefox, pourquoi un tel changement? Comment je peux faire pour que ma page soit pareil sur que Firefox sur IE? J'ai l'impression que IE bougent mes images...

Ma feuille de style :

Code:

/*////////////////////////*/
/* Information de la page */
/*////////////////////////*/

p.contour {
text-align: center;
border: 1px solid #000;
padding: 5px;
margin: 0px;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif; /* Police Verdana utilisé par défaut */
font-size: 10pt; /* Taille de la police par défaut */
margin: 0; /* Pas de marge */
padding: 0; /* Pas d'espacement */
text-align: center ; /* on centre la page */
color : black; /*couleur*/
background-color:white;
background-image:url(images/fond.gif);
border-style:hidden; /* Les bordures sont cachés */
}

p, a {
/*background-color:#FFF; /*couleur de fond*/
}

a img {
border:0; /*on enlève le cadre autour des images liens */
}

html, body {
	height: 100%;
	margin: 0;
	}

/*///////////////////////*/
/* Informations Diverses */
/*///////////////////////*/

/* Mise en page des News */
h1 {
display:none;
color:#6AA14E;
margin:0;
}

/* Mise en page des Titres en bleu foncé */
h2 {
background-color:#FFF;
font-size: 1.1em; /* Taille de la police */
color:#6AA14E; /* Couleur du texte bleu foncé */
font-weight :bold; /* On met en gras */
text-align:left; /* On aligne au gauche */
text-align:justify; /* On justifie le texte */
margin:15px 5px 5px 5px;
}

h3 {
font-size: 1.1em; /* Taille de la police */
color:#E98523; /* Couleur du texte bleu foncé */
font-weight :bold; /* On met en gras */
text-align:center; /* On aligne au gauche */
margin:15px 0 5px 0;
}

ul {
list-style-type: none ;
padding: 0 ;
margin: 0 ;
}

li {
list-style-image : none ;
padding-top: 0 ;
margin-top: 0 ;
color: #7F7F7F ;
font-size: 0.90em ;
}

li a {
color:#707070;
text-decoration:none;
font-weight :bold; /* On met en gras */
}

li a:hover {
color:#6AA14E;
}

/* Mise en page des traits horizontaux */
hr {
width:70%; /* On créer une ligne centré et de 70% par rapport à la taille de la page */
color:#000000; /* Couleur du trait : noir */
background-color:#000000;
height:1px; /* Taille du trait : 1 pixel */
border: 0;
}

/*//////////////////////*/
/* Mise en page du site */
/*//////////////////////*/

#conteneur {
min-height: 100%;
width: 900px; /* Taille fixé à 750 pixel */
margin: 0 auto;
position: relative;
border-right: 6px solid #898989;
border-left: 6px solid #898989;
background: url(images/global2.gif) center repeat-y;
/*background : url(images/fondconteneur.gif);*/
overflow: auto;
}

/** instruction vue seulement par IE **/
/** html #conteneur {
background: url(images/global.gif) center repeat-y;
}
*/

/*//////*/
/* Menu */
/*//////*/

#conteneurmenu {
width: 160px;
/*margin-right:5px;
float : right;*/
/*background-color:#BABABA;
border-right:1px solid #626262;
border-left:1px solid #626262;
*/
position: absolute;
top: 0px; left: 12px;
}

#conteneurmenuright {
width: 460px;
/*margin-right:5px;
float : right;*/
/*background-color:#BABABA;
border-right:1px solid #626262;
border-left:1px solid #626262;
*/
position: right;
top: 0px; left: 12px;
}

#hautmenu {
margin-top:3px;
width: 150px;
height:241px;
background : url(images/menu.gif) no-repeat right top;
background-color:#FFF;
margin-left:5px;
}


/** instruction vue seulement par IE **/
* html #hautmenu {
  margin-left:0;
}

/* Image de fond des liens du menu */
#menuvertical {
width: 150px;
/*background-color: #FFF;*/
margin:0px; /* Pas de marge */
margin-left:5px;

}

/** instruction vue seulement par IE **/
* html #menuvertical {
  margin-left:0;
}

#copyright {
width: 150px;
/*background-color: #FFF;*/
margin-left:5px;
}

/** instruction vue seulement par IE **/
* html #copyright {
  margin-left:0;
}

/*/////////*/
/* Contenu */
/*/////////*/

#conteneurcontenu {
width: 710px; /* Largeur de l'image */
margin-right:10px;
float:right;
background-color:#BABABA;
border-right:1px solid #626262;
border-left:1px solid #626262;
}

/* Image de fond */
#header {
margin: 0;
margin-top:3px;
height: 200px; /* Hauteur de l'Header */
background : url(images/header.gif) no-repeat left top;
width:710px;
height:241px;
/*margin-left:5px; -- non!*/
}

/** instruction vue seulement par IE **/
* html #header {
  margin-left:0;
}

#contenu {
background-color: #FFF;
width:710px;
margin: 0;
/*margin-left:5px; */
}

/** instruction vue seulement par IE **/
* html #contenu {
  margin-left:0;
}

/* Information sur le contenu */
.cont {
margin: 0 5px;
padding: 0;
color : #999999;
text-align:left; /* On place le texte à gauche */
}

.cont a {
color:#7F7F7F;
font-weight:bold;
text-decoration:none;
}

.cont a:hover {
color:#3C9A35;
}

.copy {
text-align:center;
margin-top: 35px;
font-size: 0.8em; /* Taille de la police */
}

.copy a {
color: #999999;
text-decoration:none;
}

Merci pour votre aide...

passion · 11 Novembre 2010

je vois pas ce que tu entends par "bougé"??!!
Quelle est la version de ton IE car pour info, sur IE8, tu fais [F12] et tu auras un éditeur comme le plugin webdevelopper de firefox
cela pourra t'aider si besoin pour comprendre l'interprétation de IE

Mais il est certain que peut importe le navigateur, tes images sont collées au texte => pas beau !

Taguser · 11 Novembre 2010

Bonjour,

Firefox est "flexible" et interprète bien (même trop bien) le code et "répare" automatiquement les erreurs par exemple tout en haut de la page:

Code:

        <div id="conteneur">

			<div id="conteneurcontenu">
                <div id="header">
                       <H1>Menuiserie : Apprendre les techniques de menuisiers avec Créa-menuiserie.</H1>
                </div>

                <div id="contenu">

				[b]<table border="1" cellspacing="0" width="710" bordercolor="#E0E0E0">


          <tr>

        </td>[/b]

        </td>     <font face="Comic Sans MS">

Ici dans le code on constate un tableau ouvert, une colonne (<tr>) aussi et tout de suite après une fin de cellule(</td>).. Pas sur que ça soit bon après ça, mais c'est urgent de faire la modification avant de procéder à la suite :wink:

bproductiv · 11 Novembre 2010

En effet, première étape : validation du code. Ensuite on s'attaque aux différences IE/FF/Safari/Opéra/Chrome

leo11173 · 11 Novembre 2010

ça fait partie des merveilleux casse-tête du css. Avoir un design qui colle sur tout type de navigateur n'est pas simple. Tous n’interprètent pas les propriétés de la même manière. La solution simple consiste à faire une feuille de style différent par "famille" de navigateur.

spout · 11 Novembre 2010

La 1° solution et la plus simple est de passer par un reset CSS:
Soit à la barbare:

Code:

* {margin:0;padding:0;}

Ou plus propre:
http://meyerweb.com/eric/tools/css/reset/