Compatibilité IE pour les positionnements

Bonjour,

Je viens de réaliser un site vitrine en me souciant de la compatibilité avec Chrome, safari et Firefox mais je viens à peine de le visualiser avec IE. Rien n'est en place. Et là je ne vois pas du tout comment faire pour corriger les erreurs. Il y a des erreurs sur toutes les pages mais si vous pouviez m'aider sur une je pense que je me débrouillerai ensuite pour les autres.

Alors voici l'dresse le la page : http://www.topoptique-valdahon.fr/votrevue.htm

Voici le code CSS (sans le header qui fonctionne à peu près):

#contenu{
	width : 956px;
	background-color: none;
  	margin-left: auto;
  	margin-right: auto;

}

/*  /////////////////ces CSS concernent la partie gauche de la page vue///////////////////////////  */

#partiegauchevue {
	width : 262px;
	height : 520px;
	background-color:#ffffff;
	margin:0px;
	float:left;
	border : 2px #494135 solid;
}

#textegauche {
	color : black;
	width : 250px;
	height : 250px;
	margin:0px;
	padding:0px;
}

#textegauche h1 {
	color : #000000;
}

#textegauche p {
	color : #000000;
	text-align : justify;
	margin-right : 15px;
	margin-bottom : 0px;
	margin-left : 0px;
	padding: 0px;
}

#partiegauchevue img{
	width : 262px;
	height : 262px;
	background-color:#ffffff;
	margin:0px;
	padding: 0px;
}


/*  /////////////////ces CSS concernent la partie droite de la page vue///////////////////////////  */


#partiedroitevue {
	width : 688px;
	height : 520px;
	background-image: linear-gradient(0deg, rgba(73,65,53,.90) 20%, rgba(104,102,103,.90) 100%);
	background-image:-webkit-linear-gradient(90deg, rgba(73,65,53,.80) 20%, rgba(73,65,53,.80) 100%);
	margin:0px;
	float:left;
	border-top : 2px #494135 solid;
	border-right : 2px #494135 solid;
	border-bottom : 2px #494135 solid;
	border-left : 0px #494135 solid;
}

#partiedroitevue img{
	width : 60px;
	height : 60px;
	position : relative;
	left : -15px;
	top: -39px;
	margin: 0px;
	padding: 0px;
	float:right;
}

#partiedroitevue h1 {
	color : #ffffff;
	font-size : 18px;
	text-decoration : underline;
	margin-right : 20px;
	margin-left : 20px;
	margin-top: 0px;
	padding-top: 10px;
	padding-bottom: 0px;
}


#partiedroitevue p {
	color : #ffffff;
	text-align : justify;
	text-decoration : none;
	line-height: 16px;
	font-size : 14px;
	font-weight: normal;
	letter-spacing: 0,5px;
	margin-right : 20px;
	margin-left : 20px;
	margin-top:10px;
	margin-bottom:0px;
	padding: 0px;
}

Merci de votre aide!!!

Bonsoir,

A première vue, ton problème viens plus de ton code html que de ton css : tu as des imbrications plutôt anarchiques (des éléments pas fermés ou au mauvais endroit). Commence par faire le ménage dans tout ça, et on en reparle après

Exact, IE est beaucoup moins permissif que les autres. À noter aussi que tu utilises un DOCTYPE XHTML Strict, donc tes balises autofermantes doivent être fermées aussi.

Sinon côté css, rien à voir, mais pour info ton letter-spacing:0,5px ne sert à rien et pour deux raisons :

Les chiffres flottant s'écrivent avec un point et non une virgule (donc 0.5 dans ton cas)

Mais surtout les demis pixels n'existent pas...
Modifié par speedkills (08 Jun 2013 - 09:43)

a écrit :
mais pour info ton letter-spacing:0,5px ne sert à rien...

Un espacement de lettre de 0,3 ou 0,7 px marche parfaitement.

OK merci. Tout cela est bien instructif et me fait avancer.

Je reviens sur la remarque de Zelaslan. J'avoue que j'ai commencé à faire des sites il y a très peu de temps et je ne me suis pas trop attardé sur les DOCTYPE. Tu pourrais me donner un exemple dans mon code d'une balise "autofermante" que je n'ai pas fermé? Et plus généralement, est-ce que je ferais mieux d'utiliser un autre DOCTYPE? Merci.

En attendant je vais faire le ménage dans mes balises!!!

a écrit :
Tu pourrais me donner un exemple dans mon code d'une balise "autofermante" que je n'ai pas fermé? Et plus généralement, est-ce que je ferais mieux d'utiliser un autre DOCTYPE? Merci.

la meta keywords dans le head, et une <img />. Un truc super simple à faire et de gros flemmards, c'est d'afficher ton code source avec FF, il te mettra tout ce qui n'est pas bon en rouge. La meilleure façon reste de valider tes codes.
Perso je pense que tu devrais t'orienter vers le HTML5. Si tu commences juste à apprendre c'est encore mieux, au moins tu seras dans l'ère du temps.

OK super!

Mais est-ce que je vais devoir tout apprendre de nouveau? Ca change beaucoup de choses au niveau du code?

Absolument pas ! Il y a de très légères différences, certains attributs obsolètes et d'autres nouveaux ainsi que quelques nouvelles façons d'écrire. De toute façon à mesure que tu coderas tu les apprendras. Rien de méchant bien au contraire.

Ah ben génial. En gros pour le moment je n'ai qu'à remplacer les 3 premières lignes de ma page par <!DOCTYPE html> c'est ça?

Je fais toujours le ménage sur dans mon code là!!! Effectivement il manque pas mal de fermetures de div notamment. Pour ma décharge, je codais encore avec Text Edit pour ce site. Ca n'aide pas!! lol

Merci encore pour tous ces conseils!!

a écrit :
En gros pour le moment je n'ai qu'à remplacer les 3 premières lignes de ma page par <!DOCTYPE html> c'est ça?

Entre autre , ton

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

devient simplement

<meta charset="utf-8" />

Vu que tu seras en HTML5, profite aussi des nouvelles balises beaucoup plus sémantiques telles que <header> <footer> <article> <section> <aside> <nav> et beaucoup d'autres.

Bonjour,

c'est bien ça et c'est de bon conseil : si tu ne connais pas la différence entre XHTML 1.0 et HTML 4.01 (<img blabla /> vs <img blabla>), c'est pas urgent d'apprendre ça... et HTML5 conviendra très bien.
Le doctype HTML5 ne change pas grand chose de toute façon (et c'est voulu), plus simple ensuite, etc

Avant de chercher à déboguer, une page valide http://validator.w3.org/ est essentielle ; c'est la première source d'erreur et elle a un impact sur les autres erreurs possibles ... autant éliminer ça d'avance !

Note concernant l'utilisation de height en CSS et les problèmes que ça peut causer à certains de vos meilleurs clients (ha!) enfin qui ont besoin de corrections bien fortes... Même si le zoom de page est maintenant le plus répandu, il existe toujours le "zoom texte" qui agrandit la taille du texte mais pas les images ou le reste et il y a des mal-voyants utilisateurs de ce type de zoom.
Exemple height: 520px va rester à cette valeur-là pendant que le texte prend de plus en plus de place. A un moment donné ça déborde et en général ça devient illisible
Pour tester : Firefox, menu affichage, "zoom texte seulement" et ensuite Ctrl et +, 0 et - comme d'habitude.
Sur la page en lien, le texte blanc passe rapidement sur la photo gris gris clair, c'est très peu lisible malheureusement.
La solution est relativement simple dans le cas de height qui bloque l'agrandissement : utiliser à la place min-height qui fixe un minimum mais pas de valeur fixe ou de maximum. Ca ne change rien dans le cas normal. A chaque fois qu'on pense "je vais mettre un height", le mieux est de ne rien mettre (pourquoi bloquer la hauteur alors que les navigateurs se débrouillent très bien ?) ou au pire fixer un min-height.
J'ai testé rapidement dans la page en lien, il faut peut-être 526px à la place de 520px et l'espace blanc sous l'image se corrige en changeant la valeur du bloc "Votre vue" je pense.

Et bien, moi qui posais juste une petite question pour finaliser le site... Voilà que je suis en train de le reprendre en entier. Et j'en apprends un paquet!!! pas perdu mon temps sur ce coup là!