28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème colonne flottante IE7

Bonjour,

Je viens vers vous après quelque temps de recherche pour essayer de résoudre un problème récalcitrant.
Pour commencer voilà l'adresse du site sur lequel je travaille : http://www.webapart.fr/agencek/, le problème se manifeste sur IE7.

Ce site est développé avec Joomla, mais j'ai créé le template en me basant sur un tutoriel Alsacréations "Design XHTML/CSS complet avec 2 colonnes de même hauteur". J'ai dû adapter ce tutoriel puisque mon menu est horizontal.

Bref le problème est le suivant : sur ie7, la page s'affiche correctement au départ mais au passage de la souris sur le menu, la colonne de droite va se placer sous la colonne de gauche.
Je précise que le problème n'apparaît pas sur toutes les pages mais uniquement quand la colonne de gauche est plus haute que la colonne de droite (par exemple sur la page Portraits).
J'avoue que le lien avec le menu m'échappe complètement. Je précise aussi que le menu est un module Joomla généré automatiquement et que j'ai testé plusieurs menu sans que le problème disparaisse.
J'ai également essayé de réduire la largeur des colonnes en me disant que peut être la somme des deux largeurs était plus grande que la largeur de la page ce qui induirait effectivement le passage d'une colonne sous l'autre, mais sans résultat.

Voici la source de la page simplifiée :


<div id="global">
	<div id="header"></div>
	<div id="center">
		<div id="menu">
			<div style="float:left;">
				<!--swMenuFree5.0J_1.5 transmenu by  http://www.swmenupro.com-->
 
				<div id="wrap" class="menu" align="left">
					<table cellspacing="0" cellpadding="0" id="menu" class="menu" > 
						<tr> 
							<td> 
							<a id="menu1" href="/agencek/a-la-une" >À la une</a>
							</td><td><img src='http://www.webapart.fr/agencek/modules/mod_swmenufree/images/transmenu/menu-sep.gif' /></td> 
							<td> 
							<a id="menu34" href="/agencek/portraits" >Portraits</a>
							</td><td><img src='http://www.webapart.fr/agencek/modules/mod_swmenufree/images/transmenu/menu-sep.gif' /></td> 
							<td> 
							<a id="menu41" href="/agencek/focus" >Focus</a>
							</td><td><img src='http://www.webapart.fr/agencek/modules/mod_swmenufree/images/transmenu/menu-sep.gif' /></td> 
							<td> 
							<a id="menu56" href="/agencek/sport" >Sport</a>
							</td><td><img src='http://www.webapart.fr/agencek/modules/mod_swmenufree/images/transmenu/menu-sep.gif' /></td> 
						</tr> 
					</table>
				</div> 
				<div id="subwrap"> 
					<script type="text/javascript">
						<!--script du menu déroulant -->
					</script>
				</div>
				<!--End swMenuFree menu module-->
			</div>
			<div id="search">
				<!-- module de recherche -->
			</div>
			<div style="clear:both"></div>
		</div> <!-- end menu -->
		
		<div id="sous-menu">
			<div id="pathway">
				<!-- module breadcrumbs -->
			</div>
		</div> <!-- end sous-menu -->
		
		
		<div id="content">
			<!-- liste des articles -->
		</div>
		
		<div id="sidebar">
			<ul id="vertical" class="simple">
				<li>
					<!-- module image du mois -->		
				</li>
				<li>
					<!-- module en bref -->	
				</li>
				<li>
					<!-- module coup de coeur -->	
				</li>
				<li>
					<!-- module humeur -->	
				</li>
			</ul>
			
		</div><!-- end sidebar -->
		
	</div><!-- end center -->
</div> <!-- end global -->
<div id="pre-footer"></div>
<div id="footer">
	<div id="footer_l">
		<div id="footer_r">
			<div id="syndicate">
				<a href="/agencek/portraits?format=feed&amp;type=rss">
					<img src="/agencek/images/M_images/livemarks.png" alt=""  /> <span>Feed Entries</span>
				</a>
			</div>
			<div id="power_by">
	 		 	&copy 2008 Agence K'
	 		</div>
		</div>
	</div>
</div><!-- end footer -->


et la feuille de style simplifiée aussi


html, body {
	height: 100%;
	margin: 0;
	background: #333;
	font-family:Trebuchet MS, Arial;
	color:#333;
	font-size:12px;
}

p { margin-top: 0; margin-bottom: 5px; }


div#global {
	min-height: 100%;
	width: 917px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	padding: 0 10px;
	background: url(../images/global.gif) center repeat-y;
}

div#center {
	/* Pour ?viter la superposition 
	du pied de page et du contenu : */
	padding-bottom: 50px; 
	overflow: auto;
}

div#header {
	background: #7fcf2e url(../images/header.png) no-repeat;
	color: #fff;
	height: 227px;
}

div#header h1 {
	margin: 0;
}

#pre-footer {
	margin: 0 auto;
	background: url(../images/pre-footer.gif) repeat-y;
	width: 939px;
	height:30px;
	background-color:#F4F7EF;
}

div#footer {
	margin: 0 auto;
	width: 939px;
	bottom: 0;
	background: #f7f7f7 url(../images/mw_footer_b.png) 0 repeat-x;
}

div#footer_l {
	background: url(../images/mw_footer_b_l.png) 0 0 no-repeat;
}

div#footer_r {
	background: url(../images/mw_footer_b_r.png) 100% 0 no-repeat;
}

div#footer_r {
	padding-top: 10px;
	padding-left:30px;
	height: 47px;
	overflow: hidden;
}

div#footer_r div {
	text-align: center;
	font-size: .90em;
	color: #aaa;
}

div#footer_r a:link, div#footer_r a:visited  {
	color: #999;
}

div#content {
	float: left;
	width: 670px;
	padding-left:9px;
	padding-right:9px;
}

div#sidebar {
	float: left;
	width: 204px;
	padding-left:9px;
	padding-right:9px;
}

div#menu {
	background-image: url(../images/menu.jpg);
	background-repeat:no-repeat;
	margin-left:15px;
	height:37px;
	font-size:12px;
}

#menu li:hover, #menu li.hover {
	position:static;
}



/***************/
/*** Sidebar ***/
/***************/

ul#vertical {
	list-style-type: none;
	margin:0px;
	padding:0px;
}

#sous-menu {
	background-color:#F4F7EF;
	padding-top:10px;
	padding-bottom:20px;
}
#pathway {
	padding: 0px 10px 8px;
	width: auto;
	text-align: left;
}

#search {
	float:right;
	margin-top:6px; 
	margin-right:40px;
}


Merci pour vos suggestions...
Modifié par Web a part (01 Dec 2008 - 16:45)
Après moult recherches et tests divers j'ai un peu avancé, j'ai même résolu le problème, mais je ne l'ai pas compris...
Voici ce que j'ai fait pour résoudre mon premier problème :
j'ai remarqué qu'en changeant les padding de la classe #sidebar la colonne de droite ne passe plus à la ligne.
Ceci dit, étant très surprise, j'ai recalculé la largeur totale de ma page avant la modification des padding :
colonne de gauche (#content) = 670 + 18 (deux padding de 9px) = 688 px
colonne de droite (#sidebar) = 204 + 18 (deux padding de 9px) = 222 px
688+222 = 910 px la largeur du div #global qui les entoure étant de 917px je ne comprend pas trop pourquoi le fait de changer les padding de #sidebar résoud mon problème... bref admettons
donc le nouveau code de ma feuille de style est le suivant :

div#sidebar {
	float: left;
	width: 204px;
	padding-left:4px;
	padding-right:5px;
}

Cependant, si ma colonne de droite ne passe plus en dessous de la colonne de gauche, un nouveau problème est quand même apparu (ça aurait été trop beau) : toujours lors du passage de la souris sur le menu déroulant, une scrollbar verticale s'affiche pour permettre d'afficher toute la hauteur du contenu de la page (c'est à dire que quand on s'en sert pour aller vers le bas, le menu disparait sous la bannière et la suite de l'article apparait).
Autre surprise la scrollbar disparait au passage de la souris sur la colonne de droite...
Bref autre changement pour résoudre ce problème, le overflow de #center qui était à auto devient visible :

div#center {
	/* Pour ?viter la superposition 
	du pied de page et du contenu : */
	padding-bottom: 50px; 
	overflow: visible;
}


Bref le problème est plus ou moins résolu puisque au passage de la souris des éléments se décalent toujours, mais le décalage n'est plus gênant au niveau de l'affichage.
Si quelqu'un a une explication, je suis preneuse.

Merci.
Sujet clos
Aller à