28172 sujets

CSS et mise en forme, CSS3

[Résolu] Décalage de blocs uniquement sous IE6

Bonjour à tous,

Voilà mon problème de mise en page uniquement sous IE6 (je ne prends pas en compte IE5.5):

upload/28638-IE6.png

Alors que sous IE7, IE8 et tous les autres navigateurs moderne l'affichage est correct, je vous laisse l'URL de mon site http://www.depex.fr

Ci-dessous le code HTML de la page d'accueil:

<body>

<div id="page">

  <div class="bloc_top">
  
  
  </div>
  <div class="bloc_header"></div>

	<ul id="menu1">
		<li id="current"><a href="index.htm"><span class="menu1_centre">ACCUEIL</span></a></li>
		<li><a href="pages/tarifs.htm"><span class="menu1_centre">TARIFS</span></a></li>
		<li><a href="pages/depannage_saverne.htm"><span class="menu1_centre">INTERVENTION</span></a></li>
		<li><a href="pages/partenaires.htm"><span class="menu1_centre">PARTENAIRES</span></a></li>
		<li><a href="pages/contact.htm"><span class="menu1_centre">CONTACT</span></a></li>
	</ul>
	
	
		<div id="column1">

		<div class="head_menu_1">Contactez-nous</div>
		
			<div class="hot_news">
			
				<img src="images/bg_lat_1_haut.png" border="0" alt="coordonnées"><a href="pages/contact.htm" onmouseover="bouton_contact.src='images/bg_lat_1_bas_on.png';" onmouseout="bouton_contact.src='images/bg_lat_1_bas_off.png';"><img src="images/bg_lat_1_bas_off.png" name="bouton_contact" border=0 alt="lien formulaire de contact"></a>
	
			</div>			
			
			<div class="separator"></div>
			
		<div class="head_menu_2">Nos prestations</div>
		
			<div class="separator"></div>
		<div class="newsletter_text"><a href="pages/tarifs.htm" onmouseover="bouton_forfait.src='images/bg_lat_2_on.png';" onmouseout="bouton_forfait.src='images/bg_lat_2_off.png';"><img src="images/bg_lat_2_off.png" name="bouton_forfait" border=0 alt="lien tarifs"></a></div>

		</div>
		

	<div id="column2">
	
		<div class="bloc_search"></div>
     

     <div class="bloc_art">
		
		<img src="images/icone1.png" border="0" class="img_right_art" alt="les joies de l'informatique"/>
		<img src="images/titre1.png" border="0" alt="un service de proximité"/>
		<div class="txt_right_art">Vous avez acheté un ordinateur pour vous simplifier la vie ? La merveille technologique tourne au cauchemar ? <br>En prenant contact avec DEPEX, un technicien sera &agrave; votre écoute pour évaluer vos besoins en <a href="pages/tarifs.htm" class="link_footer3"><strong>dépannage, assistance ou formation</strong></a> et pourra vous proposer un rendez-vous. Nous intervenons directement &agrave; votre domicile, sur une zone de <a href="pages/depannage_saverne.htm" class="link_footer4"><strong>30 km autour de Saverne</strong></a>. Plus besoin de déplacer votre ordinateur, nous nous occupons de tout !</div>
     </div>

     <div class="separator"></div>

     <div class="bloc_art_2">
		
		<img src="images/titre2.png" alt="le sérieux et la qualité"/>
		<div class="txt_right_art">
		<P style="margin-right: 8.40cm">DEPEX est une entreprise de services &agrave; la personne agréée par l&acute;Etat, répondant aux crit&egrave;res de qualités exigés par la loi Borloo (agrément n° N07/11/07 E067 S071). <br>Concr&egrave;tement, cela vous donne droit &agrave; un avantage fiscal sous forme de <a href="http://www.coopenates.com/avantages-fiscaux.php" target="_blank" class="link_footer4"><strong>réduction d&acute;impôts de 50% sur votre facture</strong></a>. Cet agrément vous garantit donc un dépannage &agrave; moindre co&ucirc;t.</P>
		<P style="margin-right: 1.00cm">Les joies de l'informatique deviennent vite indispensables, c'est pourquoi nos techniciens interviennent &agrave; Saverne et ses alentours en moins de 24h !</P>
		<P style="margin-right: 1.00cm">Toutes nos interventions sont garanties durant 30 jours. Si le m&ecirc;me probl&egrave;me réapparait pendant cette période, la seconde visite sera gratuite.</P></div>
	
	</div> 
      	
	</div>
		
	
	<div class="separator"></div>
	<br />
	<div id="footer">
		<div class="texte_footer">
		  <span style="color:#62a7f7;">SIMINDUSTRIE & EMMANUEL LOCH COPYRIGHT 2010</span> - <i>LOGO DESIGN BY</i> <a href="mailto:naelskovitch@hotmail.fr" class="link_footer2"><i>Studio Grafy'</i></a>
		</div>  
	</div>

</div>



</body>
</html>


A mon avis, c'est un problème de magin ou padding mal reconnu par IE6 mais après pas mal de recherche sur le forum et par moi même je ne trouve pas la solution.
Je précise que je ne suis pas le super pro du CSS Smiley biggrin mais je maitrise les notions de bases.
Donc pour moi le problème se situe au niveau de la mise en page de l'ID="column2" qui se place sous l'ID="column1" au lieu de se placer à droite.
Avez-vous une idée pour résoudre de bug ???

Merci d'avance pour vos pistes Smiley cligne Smiley cligne Smiley cligne
Modifié par Symbiose (22 Apr 2010 - 18:16)
Salut,

La faute au "3px Jog", sans doute. Retire 3px de marge sur ta colonne, ça devrait résoudre le problème.

Difficile de donner plus de précision sans code CSS. Smiley cligne
Voilà le CSS
/* FR : Style pour le menu de gauche ------------------------------------------------------------------------------------------------ */
	
#column1 {
	float:left;
	width:190px;
	padding:0px 10px 0px 11px;
	}

/* FR : Style pour la partie droite - premier bloc ------------------------------------------------------------------------------------------------ */
	
#column2 {
	float:left;
	width:799px;
	background:#fff;
	margin:0px;
	}
Arf, pas vu que t'avais donné le lien du site dans ton premier message. Smiley confused 

#page { width:1020px; }
Tu sais que cela signifie un scroll horizontal pour ceux qui sont en 1024 (~23% de tes visiteurs) ?

Sinon, petite remarque sur la technique que tu utilises pour faire tes colonnes, en général on utilise seulement 1 flottant et le décalage se fait avec une marge : 
#column2 { 
margin-left:211px; /* largeur de la colonne de gauche */
width:799px; }


EDIT : J'en ai oublié de parler de ton problème avec IE6.

2 raisons possibles :

- Le 3px jog. Pour le corriger, je te suggère de modifier ton code comme je viens de te l'expliquer, et tenter un margin-left:208px sur #column2 (seulement pour IE6 via les commentaires conditionnels).

- Un problème avec l'élément #hot_news de ta colonne de gauche qui occupe plus d'espace que la largeur disponible : 210px (190px de large + 20px de padding) dans un espace limité à 190px. Rajoute un overflow:hidden sur #column1, ou supprime temporairement #hot_news du code HTML pour voir si ça corrige le problème.
Modifié par BeliG (21 Apr 2010 - 14:53)
Pour être honnête, par manque de temps, j'ai créé le site à partir d'un template "clé en main", mes feuilles de style CSS étaient déjà construites. J'ai eu l'occasion de les décortiquer quand j'ai procédé à la personnalisation.

a écrit :
#page { width:1020px; }

Tu sais que cela signifie un scroll horizontal pour ceux qui sont en 1024 (~23% de tes visiteurs) ?

Ceux qui sont en 1024 ? 1024 de largeur d'écran ? Je ne connais pas vraiment l'interprétation de { width:1020px; }, tu pourrais développer ?

a écrit :
Sinon, petite remarque sur la technique que tu utilises pour faire tes colonnes, en général on utilise seulement 1 flottant et le décalage se fait avec une marge :

#column2 {
margin-left:211px; /* largeur de la colonne de gauche */
width:799px; }

Ce que tu m'explique me parait bien plus logique, j'avais justement du mal à comprendre le raisonnement à partir de la syntaxe d'origine.

a écrit :
Le 3px jog. Pour le corriger, je te suggère de modifier ton code comme je viens de te l'expliquer, et tenter un margin-left:208px sur #column2 (seulement pour IE6 via les commentaires conditionnels).

Euh, marche pas, rien ne bouge.

a écrit :
Un problème avec l'élément #hot_news de ta colonne de gauche qui occupe plus d'espace que la largeur disponible : 210px (190px de large + 20px de padding) dans un espace limité à 190px. Rajoute un overflow:hidden sur #column1, ou supprime temporairement #hot_news du code HTML pour voir si ça corrige le problème.

Ok, je comprends mieux le bug, c'est d'ailleurs un bug du template d'origine, grrr.
Bien vu, rien qu'avec overflow:hidden, ça marche !!!! Par contre, j'ai fait des recherches sur cette fonction (que je ne connaissais pas) et j'ai vu quelle n'est peut être pas compatible avec certains navigateurs. Je vais tester demain matin.
Modifié par Symbiose (21 Apr 2010 - 21:17)
Symbiose a écrit :
Ceux qui sont en 1024 ? 1024 de largeur d'écran ? Je ne connais pas vraiment l'interprétation de { width:1020px; }, tu pourrais développer ?
Résolution horizontale de 1024px, oui. width:1020px signifie que la largeur de ton gabarit est fixée à 1020px, et donc que le navigateur se doit de les restituer. Si la résolution de l'utilisateur est inférieure à cette largeur, ou si sa fenêtre est réduite, il fera apparaître une scrollbar horizontale permettant d'afficher les pixels manquants.

Ok, tu vas dire "1024 > 1020, ça ne devrait pas poser de problème ?". Le souci, c'est que si la scroll est affichée (cas d'une fenêtre réduite ou d'une page avec beaucoup de contenu), la largeur dispo n'est plus de 1024px, mais de 1024 - 30 (~ largeur scrollbar) = 994px. En général, un intégrateur préfèrera travailler avec une valeur arrondie à 990px.

Symbiose a écrit :
rien qu'avec overflow:hidden, ça marche !!!! Par contre, j'ai fait des recherches sur cette fonction (que je ne connaissais pas) et j'ai vu quelle n'est peut être pas compatible avec certains navigateurs.
Ce n'est pas une fonction, mais une propriété, et elle est compatible avec tous les navigateurs. Elle permet de gérer les contenus qui dépassent d'un bloc (+ d'infos). hidden = on coupe (ou cache, ou rogne, ...).
a écrit :
Ok, tu vas dire "1024 > 1020, ça ne devrait pas poser de problème ?". Le souci, c'est que si la scroll est affichée (cas d'une fenêtre réduite ou d'une page avec beaucoup de contenu), la largeur dispo n'est plus de 1024px, mais de 1024 - 30 (~ largeur scrollbar) = 994px. En général, un intégrateur préfèrera travailler avec une valeur arrondie à 990px.

Ok merci pour l'explication, je vais donc passer à 990px. Merci aussi pour le lien vers la propriété overflow.

Problème résolu, merci beaucoup !!!
Sujet clos
Aller à