28173 sujets

CSS et mise en forme, CSS3

IE le rebelle ou quand les divs se mettent à table

Pages :
Bonjour,

Voilà, j'ai un réelle problème que je ne parviens pas à comprendre.
Je viens de faire un template pour Joomla avec des divs à la place des tableaux pour la mise en forme. Il s'agit de trois colonnes verticales dans un conteneur qui fait 95% de la largeur de l'écran.
Je voudrais donc savoir comment régler la largeur des tables qui sont utilisées dans ces trois colonnes pour qu'elles remplissent tout l'espace car le problème est que si sous Firefox tout est ok avec table{width:100%;} pour la partie centrale, sous IE c'est le chaos. Les tables de la colonne centrale prennent une longueur démesurée et dépassent en largeur de l'écran Smiley biggol .
Je ne sais plus du tout quoi faire.

Merci à ceux qui pourront m'orienter.

Les CSS :
body {
	background-color: #7ab03a;
	background-image: url(../images/bdbg.gif);
	background-repeat:repeat-x;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	color: #52584B;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
#conteneur {
	position: absolute;
	width: 95%;
	background-color:#FFFFFF;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0px;
}
#header {
	height: 102px;
	border-bottom:  solid 2px #7ab03a;
}
#logocentre{
	background-color: #ffffff;
	text-align: left;
	margin-left: 38px;
	margin-right: 8px;
}
#bdeorg{
	height: 30px;
	background-image:url(../images/bandeorange.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-color: #ffffff;
	border-bottom:  solid 2px #7ab03a;
	padding-top: 1px;
	color: #eeeeee;
}
#bordure_inf{
	border-bottom:  solid 2px #7ab03a;
}
.centre {
	background-color:#ffffff;
	margin-left: 150px;
	margin-right: 150px;
	padding-left:10px;
	padding-right:10px;
	margin-bottom: 30px;
}
.centre table{
	width: 100%;
}
#gauche {
	position: absolute;
	left:0;
	width: 150px;
	margin:15px 0px 0px 5px;
	background-color:#ffffff;
}
#droite {
	position: absolute;
	right:0;
	width: 150px;
	margin:15px 5px 0px 0px;
	background-color: #ffffff;
}
#pied {
	height: 30px;
	background-color: #ffffff;
}


Et la structure (faite à partir d'un exemple trouvé sur ce site) :
<body>

<div id="conteneur">

	  <div id="header">
               <div id="logocentre"><?php echo "<img src=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/images/logo.gif\" />" ; ?></div>
          </div>

	  <div id="bdeorg"> </div>

	  <div id="gauche">
               <table border="0" cellspacing="0" cellpasdding="0" width="100%">
                  <tr>
                      <td class="upleft" width="11px" height="14px"></td> <td class="up"> </td> <td class="upright" width="11px"> </td>
                  </tr>
                  <tr>
                      <td class="lleft"> </td> <td> <?php mosloadModules ( 'left' ); ?> </td> <td class="rright"> </td>
                  </tr>
                  <tr>
                      <td class="btleft" height="10px"></td> <td class="bt"> </td> <td class="btright"> </td>
                  </tr>
           </table>
           </div>
	  
	  <?php if ( mosCountModules( 'right' ) > 0 ){?>
	  <div id="droite">
               <table border="0" cellspacing="0" cellpasdding="0" width="100%">
                  <tr>
                      <td class="upleft" width="11px" height="14px"></td> <td class="up"> </td> <td class="upright" width="11px"> </td>
                  </tr>
                  <tr>
                      <td class="lleft"> </td> <td> <?php mosloadModules ( 'right' ); ?> </td> <td class="rright"> </td>
                  </tr>
                  <tr>
                      <td class="btleft" height="10px"></td> <td class="bt"> </td> <td class="btright"> </td>
                  </tr>
           </table>
           </div>
           <?php } ?>
	  
          <div class="centre">
               <div id="pathway"><?php mosPathWay(); ?></div>
               <table border="0" cellspacing="0" cellpasdding="0">
                  <tr>
                      <td class="upleft" width="11px" height="14px"></td> <td class="up"> </td> <td class="upright" width="11px"> </td>
                  </tr>
                  <tr>
                       <td class="lleft"> </td> <td> <?php mosloadModules ( 'user3' ); ?><br /> <?php mosMainBody (); ?> </td> <td class="rright"> </td>
                  </tr>
                  <tr>
                      <td class="btleft" height="10px"></td> <td class="bt"> </td> <td class="btright"> </td>
                  </tr>
           </table>
          </div>
          
          <div id="bordure_inf"></div>
          <div id="bdeorg"> <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?></div>
          

</div>


</body>

Modifié par Athanor (10 Sep 2006 - 17:15)
Je ne sais plus ou j ai vu ca mais le code width:100% n est pas interpreté de la meme maniere entre IE et FF (probleme d arrondi je crois). As tu essayé avec width:99% par exemple?
Merci pour vos réponses.
J'ai bien essayé de descendre peu à peu le pourcentage mais l'effet est complètement différent sous IE et sous Firefox et quoi qu'il en soit, ça ne change rien au problème... Smiley decu
En fait, après lecture dudit article, ce n'est une différence de quelques pixels, mais de beaucoup de pixels.
Bon, je viens de mettre ma skin en place sur mon hébergement. Comme ça vous pourrez vous rendre mieux compte de ce qui se passe...
http://athanor.celeonet.fr/joomla/

Autre petite question, après un clic sur "Liens" dans le menu, je viens de voir que le conteneur ne remplit pas forcément toute la hauteur de la page, ce qui fait que si la colonne de gauche est plus longue, elle dépasse du cadre de la page dans la hauteur.
Modifié par Athanor (29 Aug 2006 - 11:11)
Bien vu ,mpop.
C'est exactement ça.
Cela dit, ils préconisent :
a écrit :
# la solution la plus simple consiste à veiller à attribuer une largeur fixe (en pixels ou en pourcentages) à l'élément parent ;
# si ce n'est pas possible, il faudra éviter de conférer le layout à un enfant direct du bloc parent flottant ou positionné en absolu.

Dans le premier point, ça ne sert donc à rien de faire un template redimensionnable ?
Modifié par Athanor (29 Aug 2006 - 11:26)
Oui, autant pour moi Smiley cligne .
Et c'est vrai qu'en donnant une largeur au parent , ça règle la question du débordement... mais ça règle aussi la question de la fluidité Smiley decu .

Et pour la section lien, une idée ?
Athanor a écrit :

mais ça règle aussi la question de la fluidité Smiley decu .


Non pas du tout, en fait il n'y a pas de problème. Il ne faut pas lire "largeur fixe" dans la solution indiquée par Mpop mais simplement "largeur déterminée". Si c'est en pourcentage alors cela reste fluide et le bug d'IE est bien résolu néanmoins.
Modifié par clb56 (29 Aug 2006 - 11:40)
Smiley biggrin Oui, j'avais oublié ce détail Smiley cligne et de fait, ça marche super bien. Merci beaucoup.

Reste la question de la hauteur du "conteneur" qui parfois est inférieure à celle de la colonne de gauche qui dépasse en dessous du corps de la page.
Enfer et damnation !
Avec width:100% pour le parent, c'est sous Firefox que ça foire. Ca donne le même résultat que sous IE précédemment.
Athanor a écrit :
Enfer et damnation !
Avec width:100% pour le parent, c'est sous Firefox que ça foire. Ca donne le même résultat que sous IE précédemment.


LOL

Ba utilise les commentaires conditionnels

<!--[if IE]>

<style type="text/css">
     element_parent {
     width:100%;
     }
</style>
<![endif]-->
Je ne risquais pas d eles utiliser... je ne savais même pas que ça existait Smiley cligne .
Bon, ça s'ajoute où ce code ?
Athanor a écrit :
Je ne risquais pas d eles utiliser... je ne savais même pas que ça existait Smiley cligne .
Bon, ça s'ajoute où ce code ?


Dans le head après la feuille de style principale. Tu peux aussi créer le fichier pour_IE.css avec dedans :

element_parent {
width:100%;
}


et utiliser les commentaires conditionnels comme suit :

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="/adresse/fichiers_css/pour_IE.css" />
<![endif]-->


Pour en savoir plus tu peux utiliser la fonction recherche du forum ainsi que la faq
Modifié par clb56 (29 Aug 2006 - 12:05)
Bonjour,

Avant de passer au commentaire conditionnel ou autre, je te conseille d'enlever ce prologue XML qui se trouve au début du document : 
<?xml version="1.0" encoding="iso-8859-1"?>

Cela empêche IE6 d'interpréter le document conformément aux standards (du moins autant qu'il le peut)
Modifié par Alan (29 Aug 2006 - 12:46)
Merci à vous deux.

J'ai finalement redéclaré dans ma page les styles de .centre{} dans la balise conditionnelle et ça marche super. Encore merci.

Maintenant, y a-t-il une solution pour la colonne de gauche qui dépasse du reste de la page en longueur ? Il faudrait que la partie du centre soit au moins aussi longue que la plus longue des colonnes latérales.
clb56 a écrit :
Il ne faut pas lire "largeur fixe" dans la solution indiquée par Mpop mais simplement "largeur déterminée".

Bon, je crois qu'il va falloir que je change l'adjectif sur cette page. Smiley cligne
clb56 a écrit :
Comme je t'avais prévenu :
http://forum.alsacreations.com/topic.php?fid=4&tid=15733&s=#p120239

Oui, je crois que c'est à ce moment là que j'avais rajouté la parenthèse. Apparamment ça ne suffit pas pour éviter les confusions.
Ou alors c'est moi, je ne sais pas pourquoi je donne à l'adjectif « fixe » un sens un peu différent de celui du dictionnaire. Hmm, c'est peut-être un glissement de sens depuis l'anglais, il faudrait que je vérifie.
Enfin bon, maintenant ça devrait aller.
Pages :
Sujet clos
Aller à