[RESOLU]Problème de marge sous ie6/7

Question

Farfadam

20 Feb 2007 à 11:15

Bonjour à tous,
je me permet ce petit mail, car je viens de m'apercevoir d'un gros problème au niveau de l'affichage de mon site sous ie6 (Rrrrrr !),
en effet, il semble y avoir un soucis d'interprétation de mes marges...

(voir exemple ci dessous, avec en 1 l'affichage sous ie7 et en 2 l'affichage sous ie6)

http://madafraf.ovh.org/ie.jpg

le code de ma page :

<?php

$IncludeFile = get_included_files() ;
unset( $IncludeFile[0] );
if ( empty( $IncludeFile ) ) {
header( 'Location:  http://'.$_SERVER['SERVER_NAME'].'/v2/index.php?page=accueil');
 
}
?>
 
 

<link href="calendrier/calendar.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="SmoothGallery-1.0.1/css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
		<script type="text/javascript" src="scripts/mootools.js" ></script>
		<script type="text/javascript" src="scripts/jd.gallery.js" ></script>
	


<!-- DEBUT DU SCRIPT -->
<SCRIPT LANGUAGE="JavaScript">
Maintenant = new Date;
TempMaintenant = Maintenant.getTime();
Future = new Date(2007, 2, 31);
TempFuture = Future.getTime();
DiffSec = Math.floor((TempFuture-TempMaintenant)/1000);
DiffMin = Math.floor(DiffSec/60);
Diffheure = Math.floor(DiffMin/60);
DiffJour = Math.floor(Diffheure/24);
while (DiffMin>=60)
		{
		DiffMin = DiffMin-60;
		}
while (Diffheure>=24)
		{
		Diffheure = Diffheure-24;
		}
while (DiffSec>=60)
		{
		DiffSec = DiffSec-60;
		}
</SCRIPT>
<!-- FIN DU SCRIPT -->
<div class="nav">Accueil</div>

<div class="accueil_gauche">

<div class="accueil_menugauche_info">
 
<div class="accueil_menugauche_cal">
  <strong>Calendrier<br/>
  </strong><hr/>
  <div>
    <?php require_once("calendrier/calendar.php"); ?>
    
      <?php Calendar(array("PREFIX" => "cal1_", "PRESERVE_URL" => false)); ?>
  </div>
</div>
  <p><br />
  </p>
  <p>&nbsp;</p>
  <p>&#8226; Mais que vous pr&eacute;pare TAMDEM pour cette ann&eacute;e ?</p>
  <p style="text-align:center"> <strong><a href="index.php?page=noe31" class="link1">Thierry Fan De</a></strong> [+]<br />
    <strong>
	
	<a  href="index.php?page=tamdemsenerve" class="link1">TAMDEM s'enerve</a> </strong>[
    <SCRIPT LANGUAGE="JavaScript">
document.write('J-' + DiffJour + '');
</SCRIPT>]</p>


</div>


</div>
<div class="accueil_menu_droit">
  <p style="text-align:right"><img alt="" src="image/accueil/actepremier.jpg" width="121" height="33" /></p>

  <p>&nbsp;</p>
  
  <div class="accueil_premieracte_droit">
  <strong>F</strong>ond&eacute;e en 1989, l'association TAMDEM (Troupe 
    d&rsquo;Art Musical et Dramatique d&rsquo;Elancourt Maurepas) accueille chaque ann&eacute;e une soixantaine de personnes &agrave; partir de 11 ans.
  <p>&nbsp; </p>
  <p><strong>L</strong>es ateliers hebdomadaires sont l'occasion de d&eacute;couvrir ou de se perfectionner principalement en th&eacute;&acirc;tre, et voir quelque fois en chant. </p>
  <p>&nbsp;</p>
  <p><strong>O</strong>utre les spectacles de fin d'ann&eacute;e pr&eacute;par&eacute;s par les ateliers, les membres de la Troupe participent r&eacute;guli&egrave;rement &agrave; l'&eacute;criture et &agrave; la mise en sc&egrave;ne de diff&eacute;rents spectacles.</p>
  <p>&nbsp;</p>
  
  </div>
  <p style="text-align:right"><img alt="" src="image/accueil/dernier_spectacle.jpg" width="162" height="32" /></p>
  <p>&nbsp;</p>


					

		<script type="text/javascript">
			function startGallery() {
				var myGallery = new gallery($('myGallery'), {
					timed: true,
					showArrows: false,
					showInfopane: false,
					showCarousel: false,
					embedLinks: true,
					delay: 4000
				});
				document.gallery = myGallery;
			}
			window.onDomReady(startGallery);
		</script>
		<div class="content">
		  <div id="myGallery">
		    <div class="imageElement">
					<h3>Item 1 Title</h3>
					<p>Item 1 Description</p>
			    <a href="" title="" class="open"></a>
		      <img src="SmoothGallery-1.0.1/images/photos/1.jpg" alt="Item 1 Title" width="414" height="288" class="full" /></div>
				<div class="imageElement">
					<h3>Item 2 Title</h3>
					<p>Item 2 Description</p>
					<a href="" title="open image" class="open"></a>
				<img src="SmoothGallery-1.0.1/images/photos/2.jpg" alt="Item 2 Title" width="414" height="288"  class="full" /></div>
				<div class="imageElement">
					<h3>Item 3 Title</h3>
					<p>Item 3 Description</p>
					<a href="" title="open image" class="open"></a>
				<img src="SmoothGallery-1.0.1/images/photos/3.jpg" alt="Item 3 Title" width="414" height="288"  class="full" /></div>
				<div class="imageElement">
					<h3>Item 4 Title</h3>
					<p>Item 4 Description</p>
					<a href="" title="open image" class="open"></a>
				<img src="SmoothGallery-1.0.1/images/photos/4.jpg" alt="Item 4 Title"  class="full" /></div>
			<div class="imageElement">
					<h3>Item 5 Title</h3>
					<p>Item 5 Description</p>
				<a href="" title="open image" class="open"></a>
			  <img src="SmoothGallery-1.0.1/images/photos/5.jpg" alt="Item 5 Title" width="414" height="288"  class="full" /></div>
				<div class="imageElement">
					<h3>Item 6 Title</h3>
					<p>Item 6 Description</p>
					<a href="" title="open image" class="open"></a>
				<img src="SmoothGallery-1.0.1/images/photos/6.jpg" alt="Item 6 Title" width="414" height="288"  class="full" /></div>
				<div class="imageElement">
					<p></p>
					<a href="" title="open image" class="open"></a>
				<img src="SmoothGallery-1.0.1/images/photos/7.jpg" alt="Item 7 Title" width="414" height="288"  class="full" /></div>
				<div class="imageElement">
					<p></p>
					<a href="" title="open image" class="open"></a>
				<img src="SmoothGallery-1.0.1/images/photos/8.jpg" alt="Item 8 Title" width="414" height="288"  class="full" /></div>
				<div class="imageElement">
					<p></p>
					<a href="" title="open image" class="open"></a>
				<img src="SmoothGallery-1.0.1/images/photos/9.jpg" alt="Item 9 Title" width="414" height="288"  class="full" /></div>

</div>
			

</div>


 
</div>

la CSS :


/*ACCUEIL>>>>>>>>>>>>>>*/

.accueil_gauche {

	width : 283px;
	float:left;
	height : auto;
	margin-left : 35px;
	margin-top:5px;
	min-height:267px;
	background-image:url(image/accueil/menugauche_haut.jpg);
	background-repeat : no-repeat;
	color:#FFFFFF;
	}



a.link1 {
text-decoration:none;
color:#FFFFFF }

a.link1:visited {
	color: #ffffff;
}
a.link1:active {
	color: #ffffff;
}
a.link1:hover {
background-color:#FFFFFF;
	color: #000000;
}
-->

.accueil_menugauche_info {
	width : 283px;
	margin-top:267px;
	padding-left:13px;
	padding-right:25px;
	font-size:11px;
	background:url(image/accueil/menugauche_bas.jpg);
	background-repeat:no-repeat;
	background-position:bottom;
	padding-bottom:87px;
	color:#FFFFFF;
	}
	
.accueil_menugauche_cal {
	width : 175px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	height : auto;
	color:#000000;
	background-color:#ffffff;
	margin-left : 34px;
	margin-top:0px;
	}
	
	
.accueil_menu_droit {

	width:420px;
	height:auto;
	float:right;	
	margin-right:17px;
	margin-top:12px;
}
.accueil_premieracte_droit{

	width:350px;
	float:left;
	margin-left:12px;
	text-align:justify;

	}
/*<<<<<<<<<<<<<ACCUEIL*/

Modifié par Farfadam (20 Feb 2007 - 13:05)

Hermann

20 Feb 2007 à 12:36

Bonjour,
Problème trés fréquent.
Tu as a faire au IE doubled float-margin bug.
IE7 a corrigé ce bug.
Tu dois ajouter un display:inline à .accueil_gauche
Modifié par Hermann (20 Feb 2007 - 12:38)

Farfadam

20 Feb 2007 à 13:05

Merci mille fois pour cette réponse (très rapide en plus)
C'est tout à fait ce qu'il me fallait,

Merci infiniment (et merci pour le lien aussi Smiley cligne

)

Bonne journée @ tous Smiley cligne

Sujet clos

CSS et mise en forme, CSS3

[RESOLU]Problème de marge sous ie6/7