28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Tout est indiqué dans le sujet du post Smiley murf

Copie d'écran sous IE 7 :
http://img211.imageshack.us/img211/5555/ie7ci1.jpg
Copie d'écran sous IE 6 :
http://img185.imageshack.us/img185/5793/ie6fo7.jpg

Extrait de la feuille CSS :

/*Header global*/
#header {
	width: 970px;
	height: 162px;
	margin-left: auto;
	margin-right: auto;
	background: url(./pictures/header.png) left top no-repeat;
	border: 1px solid #75775f;
	overflow: visible;
	margin-bottom: 10px;
}

/*Header partie gauche*/
#header_g {
	width: 33%;
	height: 156px;
	float: left;
	margin-top: 2px;
	margin-left: 2px;
	overflow: visible;
}

/*Header central*/
#header_c {
	width: 33%;
	height: 156px;
	float: left;
	margin-top: 2px;
	margin-left: 0px;
	overflow: visible;
}

/*Header partie droite*/
#header_d {
	width: 33%;
	height: 156px;
	text-align: right;
	float: left;
	margin-top: 2px;
	margin-left: 0px;
	overflow: visible;
}

/*Header connectés*/
#connect {
	width: 100%;
	height: 18%;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	overflow: visible;
}

/*Header logo*/
#logo {
	width: 100%;
	height: 60%;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	overflow: visible;
}

/*Header date*/
#date {
	width: 100%;
	height: 18%;
	text-align: center;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	overflow: visible;
	padding-top: 8px;
}

/*Header classements*/
#rank {
	width: 100%;
	height: 30%;
	text-align: center;
	padding-top: 10px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	overflow: visible;
}

/*Header liens*/
#links {
	width: 100%;
	height: 68%;
	text-align: left;
	padding-top: 10px;
	margin-right: auto;
	margin-left: auto;
	overflow: visible;
}


Extrait du source de la page :

<!-- DEBUT header -->    
<div id="header">
	<!-- DEBUT header gauche -->    
	<div id="header_g">
		<!-- DEBUT classements -->
		<div id="rank">
      <!-- Tri -->
      <form name="myformul" action="{NOM_PAGE}" method="post">
  <!-- gestion Catégorie -->
        <select name="FTypeCategorie" size="1" onchange="javascript:window.document.myformul.submit()">
          <option value="">
          - - Changer de classement - -
          </option>
          <option value="0">
          Toutes les catégories
          </option>
          <!-- BEGIN CATEGORIE -->
          <option {VALEUR_CATEGORIE}>
          Classement {LIBELLE_CATEGORIE} catégorie
          </option>
          <!-- END CATEGORIE -->
        </select>
  <!-- gestion Team -->
        <select name="FTypeTeam" size="1" onchange="javascript:window.document.myformul.submit()">
          <option value="">
          - - Tous les inscrits - -
          </option>
          <!-- BEGIN TEAM -->
          <option {VALEUR_TEAM}>
          {LIBELLE_TEAM}
          </option>
          <!-- END TEAM -->
        </select>
      </form>
      <!-- Fin Tri -->
		</div>
		<!-- FIN classements -->
		<!-- DEBUT links -->
		<div id="links">	
<h3><img class="image" src="./pictures/li.gif" align="bottom" alt="Quelle belle puce !" /> <a href="javascript:popup('top_one.html')">Participez au Top Index</a><br />
<img class="image" src="./pictures/li.gif" align="bottom" alt="Quelle belle puce !" /> <a href="javascript:popup('top_index.html')">Fonctionnement du Top Index</a><br />
<img class="image" src="./pictures/li.gif" align="bottom" alt="Quelle belle puce !" /> <a href="mailto:ouebmaster@escalopetour.com?subject=Tapez ici le titre de votre message">Ecrire au Ouebmaster</a><br />
<img class="image" src="./pictures/li.gif" align="bottom" alt="Quelle belle puce !" /> <a href="./edit/index.php" target="_blank">Modifier ma fiche perso.</a><br />
<img class="image" src="./pictures/li.gif" align="bottom" alt="Quelle belle puce !" /> <a href="http://www.escalopetour.com/">Retour à l'accueil de l'ETC</a></h3>		
		</div>
		<!-- FIN links -->		
	</div>
	<!-- FIN  header gauche --> 	
	<!-- DEBUT header central-->    
	<div id="header_c">
		<!-- DEBUT connectés -->
		<div id="connect"><h3>Z'êtes actuellement {NB_CONNECTES} connectés à glandouiller sur le site</h3></div>
		<!-- FIN connectés -->	
		<!-- DEBUT logo -->
		<div id="logo">
      <img class="image" src="./pictures/logo.png" title="Quel splendide logo n'est-ce pas ?" alt="Quel splendide logo n'est-ce pas ?" />		
		</div>
		<!-- FIN logo -->	
		<!-- DEBUT date -->
		<div id="date"><h4>Classement du {DATE_CLASSEMENT}</h4></div>
		<!-- FIN date -->		
	</div>
	<!-- FIN  header central --> 	
	<!-- DEBUT header droit -->    
	<div id="header_d">
    <marquee id="marquee" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1" scrolldelay="1" direction="up" behavior="scroll" style="display:block; height:156px;">
<!--
      <table>
        <tr>
          <td class="gen">
-->
{VAR_NEWS}
<!--
          </td>
        </tr>
      </table>
-->
    </marquee>
	</div>
	<!-- FIN  header droit --> 	
</div>
<!-- FIN header -->  


D'après vous quelle est la solution pour résoudre ce problème d'affichage ?

Merci d'avance pour votre aide Smiley cligne
Modifié par Ouebma_ETC (23 Jan 2008 - 11:31)
Pour ceux qui auraient un jour ce problème, il suffit de remplacer les " overflow: visible" par "overflow: hidden".

Smiley cligne