[XHTML] Opera et les listes horizontales...

Bonjour,

Apres certaines recherches infructueuses je me permets de poster ce sujet:

Mon probleme est le suivant: Sous tous browsers (kernel Gecko, IE & Opera)
la 1ere connection roule impecablement mais sous Opera quand je
change d'onglet et reviens sur cette page mes listes se barent dans
tous les sens et il me faut recharger pour ravoir un aspet correct.

J'ai lu que cette erreur provenait du fait qu'Opera réclamait un "width:"
mais je ne peux lui en fournir un, pour être clair je veux pas koi ;).

Le sujet bien qu'éfleuré ne donnait aucune autre forme de solution si
vous en aviez ce serait idéal ca me ferait gagner pas mal de temps ;)

ps: g aussi changé le header mais rien y fait, cache:0 etc...

Merci, @+ )

Une adresse où l'on puisse constater le problème ne serait pas de trop ;)

2 pièce(s) jointe(s)

Bonjour,

De site avec ce problême: non, Opéra ne me sert que pour une
visibilité/compatibilité, autrement dit je n'ai encore jamais vu
cette bizarrerie autre part.

Je le répete: ce problême a déja été éffleuré mais c'est tout :( du reste je
sais même plus dans quel forum technique. Pas ici il me semble, peut-être
chez... bref aucun intéret...

voila afin de clarifier au mieux j'ai l'avant et après Opéra en .png attaché
pour donner une idéé du problême:

load.png donne un affichage correcte quelque soit le browser
load_opera.png est le résultat obtenu si opéra reload la page sans passer par "shift"

Pour info mon header est a cache:0 mais Opéra doit le gérer de façon curieuse... ;(

Ci-après un bout de code html/css (desolé si je pollue, c''est que c'est très très long...)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#menuFamilyHorz_02 .menuFamilyHorzChild_01                     {                                                  float:left;                                      margin:0px 0px 0px 0px;   padding:0px 0px 0px 0px;              height:16px;  font:10px Verdana, arial, serif; font-weight:bold; line-height:1em; text-align:center; list-style-type:none;                                                        color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_01 li.enabled          { position:relative; display:inline;               float:left;                                      margin:1px 3px 0px 3px;   padding:0px 0px 0px 0px;              height:12px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_01 li.enabled a        {                                                  float:left;                                      margin:0px 0px 0px 0px;   padding:0px 0px 0px 0px;              height:16px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_01 li.enabled a .left  {                                                  float:left;                                      margin:1px 3px 0px 2px;   padding:0px 0px 0px 0px; width:14px;  height:14px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_01 li.enabled a .title {                                                  float:left;                                      margin:2px 0px 0px 0px;   padding:0px 0px 0px 0px;              height:12px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_01 li.enabled a .right {                                                  float:left;                                      margin:1px 0px 0px 2px;   padding:0px 0px 0px 0px; width:14px;  height:14px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_01 li.enabled a:hover  {                                                                                                                                                                                                                                                                                                                                background:#FFBA17;  color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_01 li .separator       {                                                  float:left;                                      margin:1px 0px 0px 1px;   padding:0px 0px 0px 0px; width:0px;   height:14px;                                                                                                                                                                                        border-left:1px #808080 solid; border-right:1px #FFFFFF solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_01 li .bump            {                                                  float:left;                                      margin:1px 0px 0px 1px;   padding:0px 0px 0px 0px; width:0px;   height:14px;                                                                                                                                                                                        border-left:1px #FFFFFF solid; border-right:1px #808080 solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_02                     {                                                  float:left;                                      margin:0px 0px 0px 0px;   padding:0px 0px 0px 0px;              height:16px;  font:10px Verdana, arial, serif; font-weight:bold; line-height:1em; text-align:center; list-style-type:none;                                                        color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_02 li.enabled          { position:relative; display:inline;               float:left;                                      margin:1px 3px 0px 3px;   padding:0px 0px 0px 0px;              height:12px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_02 li.enabled a        {                                                  float:left;                                      margin:0px 0px 0px 0px;   padding:0px 0px 0px 0px;              height:16px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_02 li.enabled a .left  {                                                  float:left;                                      margin:1px 3px 0px 2px;   padding:0px 0px 0px 0px; width:14px;  height:14px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_02 li.enabled a .title {                                                  float:left;                                      margin:2px 0px 0px 0px;   padding:0px 0px 0px 0px;              height:12px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_02 li.enabled a .right {                                                  float:left;                                      margin:1px 0px 0px 2px;   padding:0px 0px 0px 0px; width:14px;  height:14px;                                                                                                                                                                      color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_02 li.enabled a:hover  {                                                                                                                                                                                                                                                                                                                                background:#FFBA17;  color:#000000;    border:0px solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_02 li .separator       {                                                  float:left;                                      margin:1px 0px 0px 1px;   padding:0px 0px 0px 0px; width:0px;   height:14px;                                                                                                                                                                                        border-left:1px #808080 solid; border-right:1px #FFFFFF solid; }
#menuFamilyHorz_02 .menuFamilyHorzChild_02 li .bump            {                                                  float:left;                                      margin:1px 0px 0px 1px;   padding:0px 0px 0px 0px; width:0px;   height:14px;                                                                                                                                                                                        border-left:1px #FFFFFF solid; border-right:1px #808080 solid; }
 
<div id="menuFamilyHorz_02">
   <ul class="menuFamilyHorzChild_01">
      <li class="enabled">
         <a href="#">
            <img src="./graphs/icones/home_01.png" class="left" alt="">
            <span class="title">
               ACCUEIL
            </span>
         </a>
      </li>
   </ul>
   <div class="separator">
   </div>
   <ul class="menuFamilyHorzChild_02">
      <li class="enabled">
         <a href="#">
            <span class="title">
               VOTRE COMPTE
            </span>
            <img src="./graphs/menus/down_arrow.png" class="right" alt="">
         </a>
      </li>
   </ul>
   <div class="separator">
   </div>
   ...

Le site lui même pour info est valide w3c, voila bon cette fois je pense avoir été clair, voir plus précis sur ce problême,

'tite chose encore ca n'arrive que pour ce type de menu, c'est à dire: horizontal, voila, j'y vais, merci à vous.

Bonjour,

Toujours pas de solution au problême évoqué plus haut mais me suis arrangé
autrement.

Dans le futur si jamais l'un d'entre vous avait ce type de bizarrerie et trouvait
une solution qui n'oblige pas à mentionner un "width" qu'il n'hésite pas à le noter à la suite de ce post merci.

En attendant ...[Résolu ou presque]