28173 sujets

CSS et mise en forme, CSS3

Compatibilité avec Internet Explorer très mauvaise

Bonjour,

Mes recherches sur les forums et le site ne me dépannant pas, je me permets de créer un nouveau sujet. Voici mon problème :

J'ai créé un site web en XHTML 1.0 Transitional.
J'utilise une feuille de style CSS.

Les pages web sont toutes valides aux normes W3C.
La feuille CSS aussi.

J'obtiens l'affichage que je veux sous Firefox et Opera, aucun soucis de ce côté-là.
Par contre, avec Internet Explorer, c'est pas joli-joli : les calques sont décalés et l'ensemble en est déformé.

Au début je pensais "au diable IE, qu'il se mette aux normes, le vilain".

Mais voilà : mon site est centré sur la sécurité informatique, et est destiné à des internautes "débutants", donc, pour la plupart, utilisateurs de IE. C'est donc un soucis majeur que ces visiteurs arrivent sur mon site tout déformé !

J'ai fait des essais personnels, j'ai tenté d'autres choses en recherchant sur ce site, mais rien. Je n'arrive pas à corriger le problème.

Voici l'adresse de mon site web :
http://benoit.aun.free.fr/securite-facile-php/

Voici le lien vers ma feuille de style :
http://benoit.aun.free.fr/securite-facile-php/style.css

Sauriez-vous me dire quelles modifications je peux apporter pour que IE affiche correctement ce site ?

Par avance, je vous remercie.
Salut

Enlève ça, inutile le div prend par défaut la largeur disponible

#texte {
[#red]width: 685px;
}

En mettant les tailles au pixel prêt, et les navigateur ne calculant pas tout a fait de la même façon, tu récupère des problème comme celui-ci

A+




Modifié par gege71 (20 May 2006 - 21:07)
Bonjour,

Il faudrait supprimer les largeurs qu'il y a sur #visites et #texte.

Etant donné qu'il y a une hauteur sur #visites et qu'il est à coté d'un élément en float, il risque de se produire le bug d'IE des 3 pixels (ce que sera beaucoup moins grave qu'actuellement) : Il y aura 3 pixels d'espace entre le #logo et #visites.
Il serait mieux de créer une div#header qui prendrait toute la largeur, avec la couleur de fond souhaitée et l'image en fond (ou non), et qui engloberait également #visites (qui n'aurait donc plus besoin de couleur de fond ou de hauteur)
Modifié par Alan (20 May 2006 - 21:09)
Bonjour gege71, bonjour Alan,

J'ai suivi vos conseils et supprimé les largeurs inutiles.
J'ai créé un unique div#header avec tes consignes, Alan.

Eh bien ça s'affiche maintenant à la (quasi) perfection sous IE ! Smiley biggrin
Un grand merci à vous deux Smiley cligne

Bonne soirée.
Bonjour,
J'ai un probleme similaire, mon site perso s'affiche tres bien avec firefox mais le texte est decalle vers la droite avec Internet Explorer. J'ai essaye d'eviter de mettre les valeurs en pixel et d'utiliser des '%' mais ca ne change rien sous IE par contre ca ne s'affiche plus correctement sous firefox.
Est ce que vous auriez une idee ?
mon site : http://dywined.free.fr/site_perso/pages/parcours.html
Merci à tous
jp94 a écrit :
ton probleme vient de la
<table width="100%" border="1">



Malheuresement non, ça ne vient pas de là, javais mis un tableau comme exemple de contenu, mais même avec du texte j'ai le même problème, le menu est décalé vers la gauche. Smiley confus
Salut
test ca


body {
margin:0px;
padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

#header {
	height: 90px;
	border-bottom:#000000 solid 1px;
	background-image: url(header_fond.png);
}
#conteneur {
        margin:10px; /* si on veut un cadre*/
	border: thin solid #000000;
	background-image: url(gauche_fond.png);
}
#centre {
	background-image: url(centre_fond.png);
	margin-left: 150px;
	padding-left: 5px;
	padding-right:5px;
	border-right:thin solid #000000;
	border-left:thin solid #000000;
	text-align: justify;
}
#gauche {
	float:left;
        width: 150px;
	padding-left:5px;
}


A+
Sujet clos
Aller à