28173 sujets

CSS et mise en forme, CSS3

Pb mise en page entre ie et firefox

Bonjour à tous!

J'ai un petit problème de compatibilité en IE et firefox sur l'affichage d'une des mes pages :

Sous IE :

http://img119.imageshack.us/img119/415/ie9dl.jpg

Sous Firefox :

http://img119.imageshack.us/img119/6044/firefox5fr.jpg

Code du tableau de gauche :

					
<td style='vertical-align: top;'>
	<div class='num_semaine'>
	   <br/><br/>Planning de l'année <?php echo date('Y') ?>
	</div>

	<div class='jour'><span class='centre_jour_1'>Lundi</span></div>
        <div class='matin'><span class='centre_jour_2'>MATIN</span></div>
	<div class='aprem'><span class='centre_jour_2'>APREM</span></div>

	<div class='jour'><span class='centre_jour_1'>Mardi</span></div>
	<div class='matin'><span class='centre_jour_2'>MATIN</span></div>
        <div class='aprem'><span class='centre_jour_2'>APREM</span></div>
	
        <div class='jour'><span class='centre_jour_1'>Mercredi</span></div>
	<div class='matin'><span class='centre_jour_2'>MATIN</span></div>
	<div class='aprem'><span class='centre_jour_2'>APREM</span></div>

	<div class='jour'><span class='centre_jour_1'>Jeudi</span></div>
	<div class='matin'><span class='centre_jour_2'>MATIN</span></div>
	<div class='aprem'><span class='centre_jour_2'>APREM</span></div>

        <div class='jour'><span class='centre_jour_1'>Vendredi</span></div>
	<div class='matin'><span class='centre_jour_2'>MATIN</span></div>
	<div class='aprem'><span class='centre_jour_2'>APREM</span></div>

        <div class='jour'><span class='centre_jour_1'>Samedi</span>
	<div style='background-color: #CADBFF; height: 80px; width: 55px; margin-left: 66px; margin-top: -15px;'><span class='centre_jour_2'>MATIN</span></div>
	<div class='aprem'><span class='centre_jour_2'>APREM</span></div>

</div>
</td>


le CSS :

div
{
 height: 80px;
 border: 1px dashed;
 margin-top: 2px;
 margin-right: 2px;
 width: 120px;
 background-color: #FFFFCC;
}

div.matin
{
 background-color: #CADBFF;
 height: 80px;
 width: 55px;
 margin-left: 66px;
}

div.aprem
{
 background-color: #A6B8FF;
 height: 80px;
 width: 55px;
 margin-left: 66px;
}

div.jour
{
 background-color: #FFFFCC;
 height: 164px;
 width: 60px;
 float: left;
}

.centre_jour_1
{
 position:relative;
 top: 45%;
}

.centre_jour_2
{
 position:relative;
 top: 38%;
}


Voilà c'est un projet assez important donc je ne veux pas avoir de pb de compatibilité avec les navigateurs.

Certains bouts de codes de CSS n'etaient pas necessaires à firefox mais pour optimiser au maximum l'affichage sous ie j'ai été obliger d'en rejouter.

Remarquez dans le code html, tous les div sont independantes sauf la derniere pour samedi si je la mets comme les autres, mon affichage change complétement, les div matin et apres midi n'etant plus en face du jour mais en dessous et cela pour toutes les div aussi..

ça devient assez embetant ces pbs de compatibilité.. Smiley fache
alors si quelqu'un avait une solution a mon pb elle sera la bienvenue!

Merci d'avance
Modifié par DreamHideo (10 Jun 2006 - 19:30)
Heu… d'après ce que j'aperçois à vue de nez, je suis très intrigué : pourquoi est-ce qu'on a des div et pas un tableau, pour faire ce tableau ? Smiley sweatdrop
lol yank j'savais y'avait des snowfrien qui faisaient de la programmation ^^

mpop > tout etait à base de tableau au début mais j'ai changer tout après pour des div qui simplifie grandement la page. Au début je n'avais mis que les cardes verts de reservation en div puis après j'ai voulu passé les jours en div aussi à cause de quelque pb d'alignements et tj un changement entre IE et firefox, avec les div plus de pb d'alignement mais tj une chnagement entre firefox et IE..

Le code d'avant avec les tableaux :

	<td style='vertical-align: top'>
		<table class='tab_planning_inc'>
			<tr>
				<td colspan='2' style='background-color: #FFFFCC; height: 81px'>Planning de l'année <?php echo date('Y') ?></td>
			</tr>
			<tr>
			  <td rowspan='3' class='jour' >Lundi</td></tr>
			  <tr><td class='matin'>MATIN</td></tr>
			  <tr><td class='aprem'>APREM</td></tr>
			</tr>
			<tr>
			  <td rowspan='3' class='jour'>Mardi</td></tr>
			  <tr><td class='matin'>MATIN</td></tr>
			  <tr><td class='aprem'>APREM</td></tr>
			 </tr>
			 <tr>
			    <td rowspan='3' class='jour'>Mercredi</td></tr>
			    <tr><td class='matin'>MATIN</td></tr>
		            <tr><td class='aprem'>APREM</td></tr>
			 </tr>
			 <tr>
			  <td rowspan='3' class='jour'>Jeudi</td></tr>
			  <tr><td class='matin'>MATIN</td></tr>
			  <tr><td class='aprem'>APREM</td></tr>
			</tr>
			<tr>
			  <td rowspan='3' class='jour'>Vendredi</td></tr>
			  <tr><td class='matin'>MATIN</td></tr>
			  <tr><td class='aprem'>APREM</td></tr>
			 </tr>
			 <tr>
			   <td rowspan='3' class='jour'>Samedi</td></tr>
			   <tr><td class='matin'>MATIN</td></tr>
			   <tr><td class='aprem'>APREM</td></tr>
			  </tr>
		</table>
	</td>
mpop a écrit :

Heu… d'après ce que j'aperçois à vue de nez, je suis très intrigué : pourquoi est-ce qu'on a des div et pas un tableau, pour faire ce tableau ? Smiley sweatdrop

Oui. Pourquoi ?

Pour présenter un tableau, c'est de loin préférable d'utiliser l'élément <table> qui a été conçu spécifiquement pour ça.

Il va ressembler à quoi ton tableau si CSS est désactivé ? Ouf ! Quel carnage !

DreamHideo : est-ce que tu pourrais conformément aux règles du forum utiliser un français approprié ? On est pas un tchat ou un SMS.

Merci.
Modifié par Stephan (11 Jun 2006 - 15:31)
Sujet clos
Aller à