[RÉSOLU] Position absolute décale mon flux (+ ifixpng inside)

Hello les gens,

je suis confronté à un problème et je tourne en rond sans trouver

Voici un menu en rollover avec de la transparence PNG. Il y a 2 problèmes sous IE
* le survol décale un des éléments du menu juste à droite (l'espace vertical n'est pas le même
* l'ombré en bas (le <li class="fix"> du code en bas) est "mangé"

Le rendu sous Firefox


Le rendu sous IE6


L'ombrage (IE6 seulement)
Pour l'histoire de l'ombré du bas, il est normalement positionné en absolu avec un top: 100% (100% du contenu, le menu ombré donc). Seulement je ne le vois pas dans ce cas.
En décallant à moins de 100%, je le vois apparaître ... mais il s'arrête à la limite de son parent.

À noter que ce problème n'apparaît pas quand je n'applique pas la transparence sur <ol class="subgroup"> ... J'utilise ifixpng (légèrement modifié) mais j'ai bien vérifié que le parent était en absolute (à coup d'echo bien placé).

Le décallage du texte (IE6/7)
Le problème est lié à la présence de <ol class="subgroup">. Dès qu'il est masqué, le décalage disparait.
Même si je le décale très loin sur la gauche (et que rien ne touche), même problème.

Le code allégé du HTML :

<div id="corporate">
  <p id="corporate-logo">
    <a href="#">Bla bla</a>
  </p>
  <ol id="corporate-menu">
    <li class="toplevel">
      <a href="#"><span>Make Up Class</span></a>
      <ol class="subgroup">
        <li><a href="#">Délice couture</a></li>
        <li><a href="#">Une envie d'été</a></li>
        <li><a href="#">Collection smoky flowers</a></li>
        <li class="fix"></li>
      </ol>
    </li>
    <li class="toplevel">
      <a href="#"><span>Maquillage</span></a>
    </li>
  </ol>
  <p class="open-close"><a href="#corporate-menu" id="corporate-opener"><span>Afficher le menu</span></a></p>
</div>

Le CSS, allégé aussi :

    #corporate-menu ol{
      background: url('images/corporate-menu-bg.png') no-repeat left top;
      display: none;
      left: -155px;
      margin: 0 0 0 1px;
      padding: 3px 0;
      position: absolute;
      text-align: right;
      top: 0;
      width: 165px; /* background[width] */
    }

    #corporate-menu li.fix{
      background: url('images/corporate-menu-bg-bottom.png') no-repeat left top;
      height: 13px;
      position: absolute;
      left: 0;
      top: 100%;
      width: 165px;
      zoom: 1; /* pour IE */
    }

Merci d'avance pour votre, et j 'en ai besoin !
Modifié par Oncle Tom (04 Sep 2008 - 07:45)

Salut;
Interessant mais plus qu'allegé ton code ... difficile sans voir les images, les classes hover etc ... js ou css le blème ?

Bonjour,

Pour maitriser ce que l'on fait, je serais d'avis de ne PAS utiliser de script de type «PNGfix», mais d'utiliser les filtres AlphaImageLoader à la main. La FAQ du forum en parle.

personnellement je suis tout a fait d'accord, même si jquery a bonne réputation, pure css c'est mieux, mais j'ai une petite question pourquoi deux images sur ton ss menu ? un bg et un drop shadow en bas, est il censé s'agrandir ? si non pourquoi ne pas intégrer le shadow du li.fix dans le corporate-menu-bg.png et caller tout en bg avec css ???? Ceci dit la superposition de 2 png 24 est tout a fait possible dans le pire des cas. De plus tes hover sont ils gérés en css ou avec un getelementbyd ????

Remarque en passant: personnellement, je n'essaierais pas d'avoir l'effet de transparence sous IE6. Le filtre DirectX AlphaImageLoader est trop restrictif, notamment en ce qui concerne les liens, pour que ça soit utilisable directement sur les éléments d'un menu. Via un commentaire conditionnel pour IE6, je me contenterais d'indiquer des images de fond alternatives, sans effet d'ombre portée (peut-être avec une petite bordure opaque si on veut souligner l'élément survolé).

Avec des parts de marché d'IE6 vers les 25-30% (et en descente régulière), ça devient tout à fait gérable et défendable devant un client ou un chef de projet.

Florent V. a écrit :
Bonjour,

Pour maitriser ce que l'on fait, je serais d'avis de ne PAS utiliser de script de type «PNGfix», mais d'utiliser les filtres AlphaImageLoader à la main. La FAQ du forum en parle.

Remarque pertinente, je vais tenter la transparence à la main pour cette partie.
Ceci dit les fix PNG en JavaScript ne font pas grand chose d'autre que jongler avec ce filtre AlphaLoader.

@zincou : j'utilise 2 images dans le sous-menu parce qu'on ne peut pas utiliser le positionnement avec le filtre de transparence. Comme je le voulais en "bottom left" ...
Et effectivement, j'ai plusieurs sous-menu et je voulais utiliser une solution générique et étirable.

@Florent (dernier message) : perso j'aurais laissé tomber IE6 aussi mais c'est une demande "client" on dira et ils tiennent très fortement à IE6 (moi non et c'est difficilement négociable à ce stade du projet).

Je vais tenter tout ça, je vous dirai après coup.

salut,

j'ai fais un petit test rapidement et en mettant tout en float cela semble fonctionner ( 2 bg transparents + liens) ss ff, ie6, ie7 et mac.
Alors peut etre n'ai je pas compris reelement ce que tu voulais ??? oops ...
voici le code: (il ya a surement des trucs inutiles)
css :

{
margin:0;
padding:0;
font-size:12px;
}
ul
{
float:left;
width:165px;
height:auto;
display:block;
position:relative;
}
li
{
float:left;
width:155px;
height:auto;
display:block;
padding-left:10px;
background:url(corporate-menu-bg.png) top left repeat-y;
_background-image:none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='corporate-menu-bg.png', sizingMethod='scale');
z-index:100;
}
li.fix
{
float:left;
width:165px;
height:7px;
display:block;
padding-left:0;
z-index:1000;
background:url(corporate-menu-bg-bottom.png) top left no-repeat;
_background-image:none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='corporate-menu-bg-bottom.png', sizingMethod='crop');
}
li.sepa
{
height:10px;
}
li a
{
width:155px;
height:7;
display:block;
position:relative;
z-index:2000px;
color:#fff;
text-decoration:none;
}
li a:hover
{
text-decoration:underline;
}

html:

<ul>
<li><a href="http://www.zob.com">Délice couture</a></li>
<li><a href="#">Une envie d'été</a></li>
<li><a href="zob.com">Délice couture</a></li>
<li><a href="#">Une envie d'été</a></li>
<li><a href="zob.com">Délice couture</a></li>
<li><a href="#">Une envie d'été</a></li>
<li><a href="#">Collection smoky flowers</a></li>
<li class="sepa"></li>
<li class="fix"></li>
</ul>

c'est pas tres jojo , désolé
un petit apercu ici
http://jeanmarc.dache.free.fr/double_transp/test.html

c'est ça que tu veux ?

@+

Au passage, depuis le temps, j'ai résolu le problème.

Pour IE6 ça a été simple : version dégradée sans ombrage.

Pour IE7 et le décalage de texte lors du survol, j'ai appliqué la propriété inline-block comme suit :

#corporate-menu a{
  display: inline-block;
}

J'ai eu 2-3 autres pétouilles en devant faire le rendu des textes en images + rollover qui change leur couleur mais ça roule maintenant

Merci beaucoup en tous cas.