28172 sujets

CSS et mise en forme, CSS3

Décallage IE...évidemment

C'est un pb que je traîne depuis des années (sincèrement) : IE décalle ma bannière et surtout sur la page index.php du site, refuse de garder la largeur fixe de la div conteneur... J'ai cherché un grand nombre de fois, lu vos discussions, etc... et je n'ai jamais rien trouvé qui marche...
Alors j'appelle au secours.


Le CSS en trois colonnes:
#conteneur {
width : 750px;
margin-top : 133px;
margin-left : auto;
margin-right : auto;
text-align : left;
padding : 0;
}
#corps {
margin : 0px;
padding : 10px;
float : left;
width : 500px;

}



#corpslarge {
padding : 10px;
float : right;
width : 600px;
}

#menu_gauche {
float : left;
width : 110px;
}

#menu_droit {
float : right;
width : 110px;
}



le html

<div id="conteneur">


<table align="center" border="0" cellpadding="0" cellspacing="0" > <tbody> <tr> 
<? include ("Library/sommaire_theme.php"); ?>

<td class="fond_noir" height="20"> <strong>|Sur l'agenda</strong></td>
</tr> 
<tr>
<!--menu gauche--> 
<td style="width:10%; margin-right:5px;"><? include ("Library/sommaire_gauche2.php"); ?></td>

<!--nouveau-->
<td style="margin:5px; padding:5px;">
 <a href="http://www.courrierdelaplanete.org/87/index.php"> <img style="border: 2px solid ; float: left;" title="commerce équitable" class="enligne" src="http://www.courrierdelaplanete.org/img/CouvCDP87-WEB.jpg" alt="Commerce équitable" hspace="5" vspace="0"> </a>  
<?php include("87/une.php"); ?> 
	



<hr><!--Regards--> <div class="fond_noir">
<?php include("rst/2009.html"); ?> 
<?php include("rst/observatoire.html"); ?> 
</div> 
</td> 

<!--Agenda-->
<td valign="top" style="width:15%; border-left:1px;">

<ul id="agenda" class="fond_blanc text_petit">

<? include('agenda.php') ?>





</ul>

 </td> 
 </tr> </tbody> </table>
<br><?php include("Library/pied_page.php"); ?> 
</div>



le lienhttp://www.courrierdelaplanete.org

Je suis convaincue que c'est de ma faute...
OK c'est fait
J'ai mis celui-là
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

A tort ou à raison... mais hem, ça ne change rien...
Peux-tu mettre ta version en ligne à jour ? Parce que l'on voit ça pour le moment :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Hello fenice et bienvenue, Smiley smile

fenice a écrit :
A tort ou à raison... mais hem, ça ne change rien...
Eh bien si ! Ça change tout ! Je t'invite à lire cet article pour y voir plus clair...

Tu pourras ensuite utiliser le Squelettor pour partir sur une bonne structure...

Et enfin il ne te restera plus qu'à corriger les erreurs de validation de ta page (à noter que beaucoup sont dues au fait que tu utilises & dans tes liens au lieu de &amp;).

Après cela, et si ton problème n'est pas automatiquement corrigé, on y verra de toutes façons beaucoup plus clair.
Modifié par Heyoan (23 Mar 2009 - 19:47)
Bonsoir, bonsoir
Bon, là je crois que c'est à jour... en tout cas, sur mon IE ça va beaucoup mieux - peut-être à cause d'une largeur d'image qui était en % et à qui j'ai donné une largeur fixe (celle recalculée par FFox)...
Je vais regarder skelettor...
quant aux liens externes utilisant des &rub etc... je n'en suis pas responsable... si je veux aller sur la bonne page, je n'ai pas le choix, si ?
fenice a écrit :
quant aux liens externes utilisant des &rub etc... je n'en suis pas responsable... si je veux aller sur la bonne page, je n'ai pas le choix, si ?


Non, tu peux utiliser &amp; dans les URL, il sera bel et bien interprété comme &, le caractère, et non plus comme &, qui indique un début de caractère spécial. (oué je m'explique mal ^^; )
Merci Laurie-Anne de cette confirmation...
Personne pour me donner une piste sur pourquoi l'image de la bannière reste décalée par rapport au corps du site ? Ni pour me dire si j'ai bien choisi ma DTD maintenant ?
Après promis, je nettoie tout le site sur cette base....
Tu n'as pas mis ton site en ligne à jour avec le DOCTYPE complet. Si ton site est centré sur IE maintenant c'est juste grâce au rajout d'un text-align:center sur le body.

Si ton image est décalée, c'est à cause de la manière dont IE et Firefox gère les scrollbar. En effet, les scrollbar que tu vois sur IE font partie de l'élément html alors que sur Firefox, elles font partie de l'élément body.
Conséquence : Tu as centré en CSS une image de fond, et dans le calcul de la largeur pour le centrage, IE ne tient pas en compte la largeur de la scrollbar affichée alors que Firefox si.
Solution : Mettre un div #header qui sera lui centré avec des marges automatiques et qui comprendra cette image.
Agylus
Mais si j'ai mis le doctype complet
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

et j'ai toujours des décalages entre IE et Firefox sauf en effet sur la page UNE où j'ai rajouté cette ligne de code.
Je comprends que ma méthode empirique agace les puristes.

Si certains peuvent me prendre en pitié, ce qui m'embête (sous IE toujours et uniquement) c'est que la div #corps de mes pages parfois (et pas tout le temps !) se retrouve virée en dessous des menus qui devraient l'encadrer à gauche et à droite...

Plus de détails

<body>
<div id="conteneur">
<!-- L'en-tête--><div id="en_tete"> </div>
<!--Insertion du sommaire gauche--><?php include("http://www.courrierdelaplanete.org/Library/sommaire_gauche.php"); ?><!-- FIN du menu gauche-->
<!-- Le menu droit--><div id="menu_droit">
				<p class="fond_noir gras" height="25" style="display:block">Sur l'agenda</p>
				<ul><? include('http://www.courrierdelaplanete.org/agenda.php') ?> </ul>
			</div><!--FIN menu droit--> 

<div id="corps"><!-- Le corps -->
</div><!--FIN du corps-->
<!--Pied de page--> <?php include("http://www.courrierdelaplanete.org/Library/pied_page.php");?> </div> <!--FIN du pied de page--> 
<!--FIN du conteneur--> </body></html>



J'en suis à me dire que je vais faire une feuille css pour ie...
voilà... des idées ?
Sujet clos
Aller à