28220 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit soucis avec Internet Explorer, alors que mon site marche parfaitement sous Firefox, Opera, et même Safari (j'ai testé avec le lien donné sur ce site, de capture safari).

Mon site (http://min.lledrith.info) se présente comme suit : un en-tête, un pied de page, et entre les deux une colonne de gauche, une de droite, et la colonne centrale. Tout ça sans utiliser de tables, et conforme xhtml 1.1 et valide CSS (sauf de nombreux avertissements concernant des couleurs non définies).

Mais Internet explorer vire ma colonne de droite, en fait il me la met en dehors de la zone d'affichage visible (mon site marche le mieux en 1280x1024).

Sur Firefox on obtient ça :
http://img158.imageshack.us/img158/6066/minfirefox1pb.th.jpg

Alors que sur IE ça me donne ça :
http://img300.imageshack.us/img300/2801/minie4ey.th.jpg

Je ne comprend pas ce qui se passe...

Mon code html, simplifié (sans le pied de page et l'en-tête) :


	<div id="gauche">
		{ma barre de gauche}
	</div>

	<div id="droite">
                 {ma barre de droite}
	</div>

	<div id="milieu">
                  {mon texte au milieu}
	</div>


Et mon CSS pour ces éléments donne ça :

#gauche {
	position:absolute;
	left:0;
	width:250px;
	padding:5px;
}
#droite {
	position:absolute;
	margin-left:980px;
	width:260px;
	padding:5px;
	display:inline;
}
#milieu {
	position:relative;
	margin-left:260px;
	width:685px;
	top:23px;
	background-color:#E2ECBE;
	padding-left:10px;
	padding-right:15px;
	padding-top:10px;
	padding-bottom:10px;
	text-align:justify;
}


Quelqu'un saurait ce qui se passe sous IE, et surtout comment corriger ce bug ?

Merci beaucoup de votre aide, là je sèche complètement...
Modifié par Julien PHAM (24 Feb 2006 - 23:03)
à voir ce que cela donne, cela vient de la magin-left de ton menu de droite.

actuellement IE doit interpreter une marge de 980px a partir de la fin du menu de gauche

donc ton menu de droite se retrouve à 1230 px du bord gauche

essais avec left:980px; ou alors margin-left: 690px; (la valeur de width de ton milieu)
Modifié par Philippe (23 Feb 2006 - 16:46)
Oui enfin le soucis, si je fais 690px de margin left, ce sont les autres navigateurs qui se plantent et me mettent ma colonne trop à gauche.

Mais je vais essayer ta technique de left

Edit : ça marche parfaitement, merci...

Par contre là un autre truc que je comprend pas, c'est que mon titre "MIN DE NICE" ne s'affiche pas à la même position entre firefox et IE...

En fait sur IE elle apparaît un peu trop haut, alors qu'elle est bien centrée sur firefox. Mon code pour ça :


#header {
	height:130px;
  background: url('images/header.gif') repeat-x;
  margin:0 0 0em 0;
}
#header .logo {
  position:absolute;
  left:30px;
  top:32px;
}
#header .sname {
  position:absolute;
  left:200px;
  top:40px;
  width:200px;
  color:#FFF
}
#header .banniere {
  position:absolute;
  left:510px;
  top:2px;
  width:750px;
}

A voir sur http://min.lledrith.info

Savoir donc que logo c'est l'animation swf de gauche, banniere celle de droite, et que le texte est dans sname.

Merci
Modifié par Julien PHAM (23 Feb 2006 - 16:59)
Au passage, tu déclares du XHTML 1.1 que tu déclares en text/html. Il me semble que ce n'est pas possible.

Attention, XHTML 1.1 et XHTML 1.0 n'ont pas les mêmes utilisations. Le 1.0 peut être servi en text/html (ce qui passe bien sur tous les navigateurs) ou en application/xhtml+xml, et le 1.1 en tant que XML uniquement.

Or, certains navigateurs ne comprennent pas le XML.
Pour du web simple, on utilisera un doctype XHTML 1.0 (strict, pourquoi pas), et on servira le document en text/html.

Cf http://www.w3.org/International/articles/serving-xhtml/Overview.fr.html#mime

Ce qui nous donne un code du genre :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />


Tiens, au passage :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>MIN de NICE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Tu as deux déclarations de jeu de caractères contradictoires. Il y en a une de trop Smiley cligne
Mince je vais regarder ça.
Quant au xhtml, avec dreamweaver si je demande une nouvelle page en xhtml 1.1, il me sort :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>


D'après ce que j'ai lu sur le net, le xhtml 1.1 peut très bien être en text/html, c'est une sorte d'arrangement parce que IE (je crois) ne comprend pas le pur xhtml.

Enfin bon, dreamweaver m'ayant mis cet en-tête, je me suis pas posé plus de question que ça...

Sinon, j'ai édité le message juste au dessus du tien pour y rajouter un truc...

Merci
Modifié par Julien PHAM (23 Feb 2006 - 17:11)
Julien PHAM a écrit :
D'après ce que j'ai lu sur le net, le xhtml 1.1 peut très bien être en text/html, c'est une sorte d'arrangement parce que IE (je crois) ne comprend pas le pur xhtml.


Le W3C a l'air de dire le contraire. Et j'ai tendance à faire plus confiance au W3C qu'à Macromédia.
Solution : demander à Dreamweaver du XHTML 1.0
Merci, très intéressante lecture.
J'ai modifié ma page en conséquence, et je l'ai mise en xhtml 1.0 strict.
Modifié par Julien PHAM (24 Feb 2006 - 15:46)