Un site qui marche sous IE ?

[smoze]

Voilà, je poste pour savoir si il existe certaines propriétés (CSS) propres à IE. En effet, le site web que j'ai créé passe bien sous Fire Fox ou Opéra, mais avec IE, c'est un peu le bazare !

En fait je pense que le probleme est plutot au niveau de mon site qu'au niveau d'Internet Explorer, mais comme je pense que je ne suis pas le premier à avoir ce genre de difficulté, j'espere que quelqu'un pourra m'aider.

Merci d'avance.

[ndkorn]

En faite, chaque navigateur à son "dogme" de balise. C'est-à-dire que chaque navigateur admet certaine balise ( que se soit des balises html ou css) que d'autre n'admet pas. IE n'étant pas assez mis à jour, certaine balise ne sont pas reconnu.

[smoze]

Ha ok. Par exemple en CSS, il semble bien que IE ne comprenne pas ça:

margin: auto;

[tosqualler]

[cpp]

body

{

font-family:Verdana,Comics, Arial, Helvetica, sans-serif;

font-size: 0.8em;

margin: 0;

padding: 0;

}

#a

{

text-decoration:none

}

li

{

text-decoration: none;

margin-left: 17px;

}

#menu_fond

{

background: url(image/menu_fond.jpg);

height: 19px;

width: 134px;

}

#menu_fond_login

{

background: url(image/menu_fond_login.jpg);

height: 145px;

width: 135px;

}

#header

{

background: url(image/banniere.jpg);

height: 205px;

width: 971px;

margin-left: 18px;

background-color: #E5E5E5;

}

#sousbanniere

{

background: url(image/sousbanniere.jpg);

height: 20px;

width: 971px;

background-color: #99CCCC;

margin-left: 18px;

}

#haut

{

height: 30px;

background-color:#CCCCFF;

}

#conteneur

{

position: absolute;

width: 100%;

background-color: #E5E5E5;

}

#centre

{

width :616px;

height: 651px;

position: absolute;

background-color: #D4D4D4;

margin-top: 1px;

margin-left: 195px;

margin-right: 150px;

}

#centre_titre

{

background: url(image/centre_titre.jpg);

background-color: black;

color: white;

height: 19px;

width: 616px;

margin-top: 0px;

margin-right: 0px;

margin-left : 0px;

padding: 0px;

}

#bordure_gauche

{

background: url(image/bordure_gauche.jpg);

margin: 1px;

float: left;

height: 876px;

width: 19px;

clear: both;

}

#gauche

{

margin-top: 1px;

background-color: black;

float: left;

width: 175px;

}

#droite

{

float: right;

width: 135px;

margin-top: 1px;

margin-right: 40px;

margin-left : 0px;

}

#bordure_droite

{

background: url(image/bordure_droite.jpg);

margin: 0px;

float: right;

height: 876px;

width: 19px;

}

#pied

{

clear:both;

height: 19px;

width: 1005px;

background-color: black;

background: url(image/bordure_bas.jpg);

}

#menu

{

list-style-type: none;

background-color: #E5E5E5;

margin : 0;

padding: 0;

}

#menu_titre

{

background: url(image/menu_titre.jpg);

background-color: black;

color: white;

height: 19px;

width: 174px;

margin: 0;

padding: 0;

}

#menu li

{

margin-bottom: 5px;

}

#menu a

{

margin: 0 2px;

color: #000000;

text-decoration: none;

}

#menu a:hover

{

text-decoration: none;

}

#centre_titre li

{

margin-bottom: 5px;

}

#centre_titre a

{

margin: 0 2px;

color: #000000;

text-decoration: none;

}

#centre_titre a:hover

{

text-decoration: none;

}

#menu_titre_bas

{

background: url(image/menu_titre_bas.jpg);

height: 7px;

width: 174px;

margin: 0;

padding:0;

}

p

{

margin: 0 0 10px 0;

}

[/cpp]

un code ccs de moi qui merde à crever sous IE, pour que le CSS marche bien il faut qu'il soit simple et surtout pas complexe

EDIT ::

margin: 0;

padding: 0;

ça par exemple peut foiré

[smoze]

Bah à mon avis c'est les margin qui merdent

[tosqualler]

j'ai comme bug avec cette source, une image qui apparait 2fois de suite...donc 2barre de "fin menu" qui sont empilée ( je me comprend xD )

je viens de relire ma source et il y a bien un "margin" dedans

[smoze]

[cpp]

margin: 0 0 10px 0;

[/cpp]

Avec ça c'est comme si tu faisais :

[cpp]

margin-top: 0px

margin-right: 0px

margin-bottom: 10px

margin-left: 0px

[/cpp]

Ou un truc de ce genre ? Enfin c'est une sorte de raccourci quoi ?

[caouecs]

Bonjour,

pour définir des propriétés pour IE et les autres, c'est très simple. Imaginons que la classe copyright pose un problème de rendu sur IE et autres.

.copyright {

margin: 200px;

}

html>body .copyright {

margin: 100px;

}

Sous IE, vous aurez une marge de 200px alors que sur les autres, vous aurez une marge de 100px

[mmems]

Ou on peut faire l'inverse :

[cpp]

.copyright {

margin: 100px;

}

/* vu seulement par ie (* html) */

* html .copyright {

margin: 200px;

}

[/cpp]

Pour centrer horizontalement un élément il faut faire normalement :

[cpp]margin: 0 auto;[/cpp]

ou (c'est exactement la même chose mais plus long)

[cpp]margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;[/cpp]

sauf que sur ie il faut dire en plus pour l'élément qui contient celui que l'on veut aligner:

[cpp]text-align: center[/cpp]

et remettre :

[cpp]text-align: left[/cpp]

pour l'élément que l'on veut aligner.

Un très bon site pour ce genre d'astuces : Alsacréation.com

[smoze]

Ok merci

[BeBer007]

Je te conseil ce lien

http://www.siteduzero.com/tuto-3-6352-1-faire-un-site-compatible-ie-et-ff.html

[smoze]

Ha ouais perso c'est sur le site du zéro que j'ai tout appris.

J'avais pas remarqué ce tuto fait par un membre.

Merci