Un site qui marche sous IE ?


smoze

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

[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é

Link to comment
Share on other sites

[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 ?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.