Aller au contenu

Problème : Compatibilité IE 7, 6

SheitaN

Par SheitaN
dans (X)HTML et CSS

 Partager

Sujets conseillés

SheitaN

SheitaN

Posté
Posté

Bonjour à tous,

J'ai un problème asse gênant, qui je crois, vient du style.css de mon site.

J'ai demandé à plusieurs personne, aucune de savent ..

C'est pourquoi je vous demande de l'aide ici, en espérant avoir une réponse et une solution :)

Le problème c'est que mon site ne s'affiche pas DU TOUT de la même façon (au niveau de la police) sous Firefox (c'est niquel) que sous IE 6, 7 (C'est moisit).

Sous IE (6, 7) :

1237421551_ce.PNG

Sous Firefox :

1237421558_ce2.PNG

Voici mon style.css, si jamais ça peut aider ...

<!--

BODY #punwrap {
margin:auto; width: 95%; 
padding:0px;
BACKGROUND-COLOR: #FFFFFF;
BORDER: 0px;
background-image: url(forum/img/chateurope/space.png);
}

body {
	background-image: url(http://www.chat-europe.com/images/fond.png);
	background-repeat: repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.style3 {
	color: #ffad09;
	font-size: 14px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

.formulaire {
color: #000000; 
border: 2px solid #1aa4d3; 
background-color: #FFFFFF; 
font-size:12px; 
font-family:Arial; 
vertical-align:middle; 
}
.middle {
border: 2px solid #1aa4d3; 
background-color: #FFFFFF; 
font-size:12px; 
font-family:Arial; 
vertical-align:middle; 
}
.cadrecentre {
color: #000000; 
border: 2px solid #1aa4d3; 
background-color: #FFFFFF; 
font-size:12px; 
font-family:Arial; 
vertical-align:middle; 
}


.style4 {color: #7f7f7f}
.style5 {font-family: Arial, Helvetica, sans-serif}
.style19 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
--> Style pour les liens en général
a:link {
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
a:visited {
	text-decoration: none;
	color: #ffad09;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
a:hover {
	text-decoration: overline underline;
	color: #ffad09;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
a:active {
	text-decoration: none;
	color: #ffad09;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
--> Style pour les autres liens il faus juste rajouter class="type1" dans la balise <a> du lien
a.type1 {

}
a.type1:link {
	text-decoration: none;
	color: #ffad09;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
a.type1:visited {
	text-decoration: none;
	color: #ffad09;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
a.type1:hover {
	text-decoration: overline underline;
	color: #ffad09;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a.type1:active {
	text-decoration: none;
	color: #ffad09;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
-->
.Style21 {color: #FFFFFF}
.style22 {font-size: 14px}

--> Style pour les liens noirs
a.typen {

}
a.typen:link {
	text-decoration: none;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a.typen:visited {
	text-decoration: none;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a.typen:hover {
	text-decoration: overline underline;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a.typen:active {
	text-decoration: none;
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

a.dons {
}


a.dons:link {
	text-decoration: none;
	color: #FF0000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
a.dons:visited {
	text-decoration: none;
	color: #FF0000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}
a.dons:hover {
	text-decoration: overline underline;
	color: #FF0000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a.dons:active {
	text-decoration: none;
	color: #FF0000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}




-->


-->

Par la même occasion, je souhaiterai savoir comment corriger le bug suivant :

Espace juste en dessous du header, entre le bas du header et le début de "dédicace".

Je vous remercie vivement de votre aide.

Cordialement,

SheitaN

libelinfo

libelinfo

Posté
Posté

difficile de se rendre compte sans le source de la page... serait il possible d'avoir le source ou le lien vers la page ?

libelinfo

libelinfo

Posté
Posté

donc finalement j'ai trouvée ton site, je n'ai pas l'impression que ta feuille de style soit fautive.

après un passage rapide :

le problème semble plutôt venir de multiples tableaux imbriqués les uns dans les autres, à éviter (sans vouloir me montrer une extrêmiste de l'intégration façon "web2"), ça alourdie considérablement une page. l'intégration avec des DIV est beaucoup plus propre est plus légère.

autre souci avec les tableaux : les colspan et rowspan, à éviter aussi. c'est une vraie galère pour faire une intégration propre, la preuve sous IE qui gère très mal les hauteurs ou largeur de cellules.

autres soucis rencontrés :

tu as un <h1 style="font-size: 0px;"> --- </h1> qui se balade tout seul en haut de la page (je comprend pas tellement à quoi il sert... ) et le font-size: 0px n'est pas prit en compte par IE

certaines cellules ont un style introuvable dans la feuille de style (<td class="style1">)

par contre je ne m'explique pas pourquoi IE affiche la typo aussi grosse dans la section "derniers inscrits"... peut être lui assigner une taille

pour le tableau de ton header, il peut parfois arriver qu'un "espace fantôme" s'affiche si les balises de fermetures sont après un saut de ligne, donc, essayer en les mettant sur la même ligne :

<tr>

<td> cellule de text </td></tr>

au lieu de de :

<tr>

<td> cellule de text </td>

</tr>

je regarderai le reste en détails plus tard ^^

SheitaN

SheitaN

Posté
  • Auteur
Posté (modifié)

Bonsoir,

Merci de ta réponse constructive et si rapide !

Devrais-je donc opter pour les <div> à la place des tableaux ? (On m'avait prévenu, mais je voyais pas le soucis en faite).

Le <h1> en haut de la page, est là pour le référencement, car d'après un amis, google référence les h1 en premier, après je sais pas si c'est vrai.

Si oui, comment devrais-je m'y prendre ?

Merci encore.

Modifié par SheitaN
libelinfo

libelinfo

Posté
Posté (modifié)

donc en gros, l'intégration en "div" implique surtout qu'on travail avec des "blocs" et la feuille de style.

tous passe par les styles en fait en se basant essentiellement sur des float et des display sachant que ces attributs là peuvent être appliqués à toutes les balises ou presques : un <span> <p> <h1> <label> etc. etc. peuvent être travaillés en tant que blocs

ça rend le code nettement plus propre et plus lisible, les tableaux sont encore utilisés mais dans des cas particuliers où on a vraiment besoin de tableaux pour de longs listings par exemple avec plusieurs colonnes.

donc... voilà ce que pourrait donner ton code html dans les grandes lignes :

<div id="bloc_page">
	<div id="header">
   <span style="float:left">HEADER</span>
		 <div id="connection_header">
	   	<img src="connectezvous.png" height="26" width="125" /><br />
			<img src="ligne_connectezvous.png" height="2" width="162" />
				<form name="login" method="post" action="http://www.chat-europe.com/connexion.html">
	   			<label for "pseudo">Pseudo</label><br />
				  <input value="" name="pseudo" id="pseudo" class="formulaire" type="text" /><br />
				   <label for "password">Mot de passe</label><br />
				   <input name="password" id="password" class="formulaire" type="password" /><br />
		   	   <div class="centrer">
					   <input src="valider.png" type="image" /><br />
					   <a href="http://www.chat-europe.com/inscription.html" class="type1">Pas encore inscrit ?</a><br />
					   <a href="http://www.chat-europe.com/forgot.html" class="type1">Mot de passe oublié ?</a>
				  </div>
				</form>
	  </div>
  </div>
	 <div id="dedicace">
	 		<span>Dédicaces : </span>
		 <div id="texte_défilant">ton texte défilant (ce serait mieux d'éviter une iframe pour ça. au passage, tu peux utiliser le div #texte_défilant directement + du javascript )</div>
	 </div>
  <div id="contenu">
		 <div id="col_gauche">COLONNE GAUCHE</div> 
		 <div id="centre">COLONNE CENTRALE</div> 
		 <div id="col_droite">COLONNE DROITE</div>		 
  </div>
</div>

et ta feuille de style : 

BODY {
   font-family: Arial,Helvetica,sans-serif; font-size: 12px;
}

div {
  display:block;
}

#bloc_page {
  width : 1000px;
  /* les padding vont servir à contenir proprement les éléments enfants tout en laissant s'afficher les ombres droite et gauche*/
  padding-left:12px;
  padding-right:12px;
	/* centre ton div au milieu de la page */
   margin-left : auto;
   margin-right : auto;
   /* on repète sur l'axe Y une image de fond pour avoir les ombres du côté gauche et du côté droit de ta page en la callant à partir du coin supérieur gauche de ton DIV */
   background: url('image de fond avec les ombres gauche et droite') repeat-y top left;
   /* simple repère visuel pour savoir où on en est */
   border:1px solid red;
}

/* DEBUT DU HEADER */
#header {
   /* on indique juste la hauteur étant donné que le div est à 100% en largeur à défaut d'indication contraire */
	height: 238px;
	background: url('bandeau en fond du header') no-repeat top left;	
   /* simple repère visuel pour savoir où on en est */
	border:1px solid green;
}

#connection_header {
   /* cette fois ci on doit lui indiquer une taille en largeur et hauteur*/
   width:190px;
   height:210px;
   /* on le cale à droite dans le div parent càd de #header*/
   float:right;
   /* on rajoute un espace de 10px de chaque côté pour éviter que les éléments soient collés contre le bord du notre div */
   padding-left:10px;
   padding-right:10px;   
   /* simple repère visuel pour savoir où on en est */
	border:1px solid black;
   background-color:#FFF;
}
/* ATTENTION STYLE IMBRIQUÉ : indique que le style appliqué à ce formulaire ne concerne QUE ce formulaire et TOUS les éléments qui composent CE formulaire et dont le parent est #connection_header */
#connection_header {   
	/* on ajoute une marge de 15x au dessus du div */
   margin-top:15px;
}

/* style appliqué aux images, champ de saisie, champ de mot de passe et label dépendant du div #connection_header, chaque élément et séparé par une virgule, ce qui évite de répéter ce même style 4 fois  */
#connection_header img,
#connection_header input[type="text"],
#connection_header input[type="password"],
#connection_header label {
   /* interdit qu'un élément aille se coller à la gauche ou à la droite du bloc */
   clear:both;
   /* cale l'element à gauche */
   float:left;
}

#connection_header label  {
   /* on ajoute juste à l'objet "label" une marge de 4px au dessus, ce style s'ajoute donc au précédent */
   margin-top:4px;

}
/* là il s'agit d'une classe que l'on pourra éventuellement réutiliser ailleur */
.centrer {
   margin-left:auto;
   margin-right:auto;
   /* on le met en inline block pour imposer un bloc avec un affichage sur une nouvelle ligne et contenant du texte */
   display:inline-block;
   padding-top:15px;
   text-align:center;
   width:100%; /* pour IE qui fait des siennes */
   /* simple repère visuel pour savoir où on en est */
   border:1px solid silver;
}
/* FIN DU HEADER */

/* DEBUT DE DEDICACE */
#dedicace {
   display:inline-block;
   width:100%;
   /* simple repère visuel pour savoir où on en est */
   border:1px solid black;
}
/* là pas de style "nommé" on sait juste que ce style va s'appliquer à TOUS les SPAN contenus dans #dedicace (en l'occurence un seul dans notre cas) */
#dedicace span {
   /* correspond au titre que l'on colle à gauche */
   float:left;
   /* petite marge de 10px à droite */
   margin-right:10px;
}

/* idem que ci dessus, pas style "nommé", va s'appliquer à TOUS les DIV contenus dans #dedicace, correspond donc au div "texte_défilant", on aurait aussi pût le noter de cette façon : #dedicace #texte_défilant */
#dedicace div {
   /* simple repère visuel pour savoir où on en est */
   border:1px solid maroon;
}
/* FIN DE DEDICACE */
/* DEBUT CONTENU */
#contenu {
   border:1px solid blue;
   display:inline-block;
}
/* col_gauche et col_droite aurait pû être noté ainsi : #col_gauche, #col_droite au lieu de faire deux styles séparés mais pour le coup j'ai préférée les distinguer pour plus de compréhension */
#col_gauche {
   width:200px;
   /* hauteur à titre indicatif histoire d'y voir plus clair dans l'état actuel de la page */
   height:100px;
   float:left;
   /* simple repère visuel pour savoir où on en est */
   border:1px solid #096;
}
#centre {
   width:592px;
   float:left;
   /* hauteur à titre indicatif histoire d'y voir plus clair dans l'état actuel de la page */
   height:100px;
   /* simple repère visuel pour savoir où on en est */
   border:1px solid red;
}
#col_droite {
   width:200px;
   float:left;
   /* hauteur à titre indicatif histoire d'y voir plus clair dans l'état actuel de la page */
   height:100px;
   /* simple repère visuel pour savoir où on en est */
   border:1px solid #096;
}
/* FIN CONTENU */


/* ELEMENT DIVERS REPRIS DE LA FEUILLE DE STYLE ORIGINALE */
a.type1 {
   text-decoration: none;
   color: rgb(255, 173, 9);
   font-weight: bold;
  }
/* on ajoute juste text-decoration qui va s'ajouter au style déjà définit ci-dessus */
a.type1:hover {
   text-decoration: underline overline;
}

comme tu le vois, ton code html est du coup simplifié et toute ta mise en page se trouve dans la feuille de style.

tu trouveras sur le net de nombreux tuto sur le sujet mais je t'ajoute quand même un lien, la "bible" du CSS : http://fr.selfhtml.org/ (pas récent mais très pratique et toujours d'actualité) et plus précisément cette page : http://fr.selfhtml.org/navigation/css.htm et celle-ci http://fr.selfhtml.org/navigation/quickbar/index.htm

et... bienvenu dans l'intégration en "div" ;)^^

Modifié par Monique
Merci d'utiliser codebox pour plus de 10 lignes de code :)
SheitaN

SheitaN

Posté
  • Auteur
Posté (modifié)

Salut,

Merci, je vais tester tout ça !

J'espère que ça va résoudre la plupart de mes bugs :)

Merci pour tout !

Faut maintenant que je trouve le courage de refaire l'index :(

Mais bon

Modifié par SheitaN
marcelman

marcelman

Posté
Posté

Un petit ajout au sujet du h1 qui sert, dis-tu, au référencement. Si je comprends bien, tu mets un truc qui ne se voit pas uniquement pour le référencement, puisque ta taille de police est de 0px... Gaffe gaffe... GG n'aime pas ça du tout, ni les autres non plus. En fait les moteurs n'aiment pas trop qu'on les prenne pour des ânes. Il est possible que ça fonctionne un temps, mais tu risques de te faire blacklister rapidement. Je te conseille plutôt de bien optimiser tes alt et title et de veiller au contenu texte. J'ai bien failli me faire blacklister pour une connerie du même ordre il y a quelques temps. Pour plus d'infos sur le référencement, va voir sur http://www.webrankinfo.com

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...