Problème de d'alignement de div sur IE ou firefox

Question

gautchier

3 Oct 2008 à 20:16

J'ai fait un tableau html (table td tr) sur lequel je souhaite positionner un ou plusieurs div correspondant à certaines cases de mon tableau. Le problème est que l'affichage n'est jamais le même sur IE ou FF. Si mon div est bien placé sur IE, il est décalé de qqles pixels sur FF ou inversement.

Pouvez-vous me dire si il y a un moyen de solutionner cela ?

voici mon code html :

<!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=utf-8" />

<link href="style.css" rel="stylesheet" type="text/css"/>

<title>Document sans nom</title>

</head>

<body>

<div id="global">
<div id="calendrier" style="HEIGHT: 320px;width:100%;">
<table id="tableau_2" cellspacing="0" cellpadding="0" border="0" >

<tr>
<td style="text-align:center;width:42px;height:20px;" class="colonnegauche">08:00</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="text-align:center;width:42px;height:20px;" class="colonnedroite">08:00</td>
</tr>

<tr>
<td style="height:20px;text-align:center;" class="colonnegauche">08:30</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">08:30</td>
</tr>
<tr>
<td style="height:20px;text-align:center;" class="colonnegauche">09:00</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">09:00</td>
</tr>

<tr>
<td style="height:20px;text-align:center;" class="colonnegauche">09:30</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">09:30</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">10:00</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">10:00</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">10:30</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">10:30</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">11:00</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">11:00</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">11:30</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">11:30</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">12:00</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">12:00</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">12:30</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">12:30</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">13:30</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">13:30</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">14:00</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">14:00</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">14:30</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">14:30</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">15:00</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">15:00</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">15:30</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">15:30</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">16:00</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">16:00</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">16:30</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">16:30</td>
</tr>
<tr >

<td style="height:20px;text-align:center;" class="colonnegauche">17:00</td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="width:150px;text-align:center;" class="centre1" > </td>
<td style="width:150px;text-align:center;" class="centre1" > </td>

<td style="height:20px;text-align:center;" class="colonnedroite">17:00</td>
</tr>
</table>

<div id="itemwrapper_0">
<div style="position: absolute; left: 191px; top: 42px;" class="slotborders" id="g008103111513_B640CFFB-05EE-4A14_outer">
<div class="freeslot" style="width: 149px; height: 41px;" id="g008103111513_B640CFFB-05EE-4A14">
<span class="slottext"/>
</div></div></div>

</div>
</div>
</body>
</html>

et mon code css :

@charset "utf-8";
/* CSS Document */

#global { width:1006px; border:1px solid #4e4e4e;}

#jour{ text-align:center;}

.celullejour { background-color: #d7e3c4 ;border-bottom:1px solid #4e4e4e;}

.celullejourgauche { background-color:#d7e3c4 ;border-bottom:1px solid #4e4e4e;}

.celullejourdroit { background-color:#d7e3c4;border-bottom:1px solid #4e4e4e;}

td, div {color:#000000;
font-family:Arial,Helvetica,Sans-serif;
font-size:11px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;

}

#tableau_2 { background-color: #fff;}

#calendrier{overflow: auto; position: relative;}

.colonnegauche { font: 10px Arial, Helvetica, Sans-serif; border-top: 1px solid #e2e2e2; background-color: #f1f1f1; text-align: center; }

.colonnedroite { font: 10px Arial, Helvetica, Sans-serif; border: 1px solid #e2e2e2; border-bottom-width: 0; background-color: #f1f1f1; text-align: center; }

.centre1 { FONT: 11px Arial, Helvetica, Sans-serif; border-top: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2;}

#rdv {
left:196px;
top:20px;
position: absolute;
height: 19px;
width: 149px;
background:#C8E1FD;
cursor:pointer;
/margin-top:1px ;
/margin-left:-3px ;
}

.rdvtexte {color:#000000;
display:block;
margin:2px 0 0 5px;}

#plageinternet{
background-color:#78A277;
position:absolute;
left: 346px;
top: 0px;
width: 149px;
height: 19px;
/margin-top:1px ;
/margin-left:-3px ;
display:block;

}

.slotborders { border: 1px solid #ff0000;}

.slottext { color: #FF6600; display: block; margin: 3px 0 0 5px; }
.slottextinternal { color: #000; display: block; margin: 3px 0 0 5px; }

.freetime { position: relative; border-left: 7px solid #4ED765; padding: 1px 1px 1px 3px; margin-top: 2px; cursor: pointer;}
.freeslot { position: relative; background: #F8ECE0; padding: 0; overflow: hidden; white-space: nowrap; cursor: pointer;}
.blockedslot { position: relative; background: #f1f1f1; padding: 0; overflow: hidden; white-space: nowrap; cursor: pointer;}
.bookedslot { position: relative; background: #ffffff; padding: 0; overflow: hidden; white-space: nowrap; cursor: pointer;}
.bookedhome { position: relative; background: #fff; border-left: 5px solid #FF6873; padding: 0; overflow: hidden; white-space: nowrap; cursor: pointer;}

Merci de votre aide.

Gautchier[code]
Modifié par gautchier (04 Oct 2008 - 14:03)

Hermann

3 Oct 2008 à 21:39

Bonjour et bienvenue Smiley cligne

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Problème de d'alignement de div sur IE ou firefox