Float left or not ?

Bonjour,

Avant de me prendre les foudres des modos et/ou contributeurs je précise que je connais peu le css et uniquement par approche dichotomiale (marche, marche pas). Et là comme vous pouvez vous en doutez, cela ne marche pas, ou du moins partiellement, sur Opera, Firefox, Safari ca passe, mais pas sur IE. Plutôt que de faire un long discours, voici le lien qui pose problème. http://www.collectifcocktail.fr/collectif . Je souhaite que les membres apparaissent bien en deux colonnes, or sur ie ils ne mettent tous à la ligne. Je ne comprends pas pourquoi. Alors biensur je pourrais me relire Eyrolles, mais je soutiens demain (travail de fin d'étude) et je voudrais caler ce problème.

Merci pour votre compréhension et votre aide.

PS: je trouve aussi que le menu "accroche" sur IE ? je tente à tout hasard.

@+ nopt

Bonjour et bienvenue noptien,

c'est le genre de bugs un peu indépendant de la personne et très dépendant du navigateur pas respectueux des standards, y aura pas de foudre des modos
Perso j'utilise pas mal l'approche dichotomiale pour IE (au moins le 6, moins le 7) mais c'est plus rapide quand tu sais OÙ chercher, c'est sûr

Bref, pour ce qui est du menu je constate qu'au survol de l'item Productions, il y a une règle ligne 482 de style.css?b qui entre en action:

#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li.hover ul {
  display: block;
  left: auto;
}

IE6 et IE7 ne comprennent :hover que sur les liens (<a>) et rien d'autre, donc c'est peine perdue avec cette manière de faire
Tu peux tenter d'appliquer cette règle sur a:hover ul mais il faut 0px entre le lien et le sous-menu sinon ton menu se referme immédiatement (à moins de mettre une temporisation en JS). Ou bien change de menu, voir http://css.maxdesign.com.au/listamatic/ (au pif "Menus dynamiques" de chez dosimple.ch)

<div class="views-row-2 views-row-even">
  <div class="membres2" id="membres-8">
	<div class="avatar">
		<img alt="BALERDI Claire" src="http://www.collectifcocktail.fr/sites/default/files/images/claire_0.png"/>
	</div>
	<div class="texte_membres">
		<h3>BALERDI Claire</h3>
		<p>+++++++++++++++++++</p>
		<p>Présidente de l'Association Cocktail.<br/>
Auteur, metteur en scène et interprète.</p>
		<a href="mailto:aaa@aaa.fr">Email</a>   
		<a target="_blank" href="sites/default/files/pdf/ClaireBALERDI_presentation.pdf">CV</a>
	</div>	
  </div>
</div>

Ton div englobant (views-row-2 views-row-even) n'a aucune règle CSS le visant: il sert à rien? Supprime les 3 premiers div du même genre (ou tous) pour voir ...
L'image d'avatar n'a ni width ni height dans le code HTML: peut-être en rajouter? Et le div .avatar n'a pas de largeur CSS: fixer 100-60%-marge (35%?), ou peut-être fixer en px les largeurs des 2 div frères, pour tester (en virant la marge droite de 10px et en laissant du rab )
Sinon colore tous les éléments à l'intérieur avec des couleurs de fond flashy, voir s'il y en a un qui sous IE conserve une largeur imprévue ou dépasse carrément ...

EDIT: et il reste un coup de

zoom: 1;

pour conférer le hasLayout à des éléments qui sans ça ont parfois ... ou pas ... un comportement erratique sous IE (les div ayant une largeur CSS l'ont, pour le reste ...)
Modifié par Felipe (30 Mar 2009 - 11:39)

Merci pour ce retour,

je vais faire un essai avec tes recommandations. Par contre je n'ai pas la main sur les div view, elles sont "auto-générée"s avec Drupal. Je vais appliquer le reste pour voir

@+

Nopt

Merci au grand merci Felipe, en fixant les tailles en px, tous est rentré dans l'ordre. Le pourcentage ne devait pas passer puisque la class maitre n'avait pas de taille ?

Je vais regardé du coté du menu maintenant.

la bonne journée.

Felipe a écrit :
IE6 et IE7 ne comprennent :hover que sur les liens (<a>) et rien d'autre, donc c'est peine perdue avec cette manière de faire

IE7 comprend la pseudo-classe :hover pour d'autres éléments que les liens. Ta remarque n'est valable que pour IE6.