28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous.

Après m'être lancé dans la valse des positionnements pour la prochaine mouture de mon site en mettant ainsi de côté mon petit float que j'affectionnait tant, j'ai trouvé cette approche très enrichissante et prometteuse.

Tout allait plutôt bien, quand je décidait à lancer enfin Opera 8.02, qui en général ne me pose que des soucis mineurs.
Mais là surprise, je positionne un <li> en relatif pour le décaler un peu par rapport aux autres, Firefox et IE ne s'en plaignent pas mais Opera si. Il me décalle les autres items!

La preuve en image

Cette jolie page de test commence à ma rendre fou Smiley biggol

Le principe est de positionné mon menu en bas à droite du div, afin de permettre son agrandissement vers le haut gauche au cas où on titille la molette ^^

Donc le problème est résolu si j'implémente une hauteur fixe à mon <ul> ce qui annule bien sûr son extensibilité vers le haut.


Merci à ceux qui m'auront suivi jusque là :>
Bon je met de côté ce petit souci, j'ai perdu trop de cheveux sur le coup.

Si quelqu'un a une idée qu'il n'hésite pas par contre Smiley langue
Bon je fais un petit up, pour donner la solution que j'ai adopté en attendant mieux.

J'utilise ce hack qui permet de spécifier des règles à opéra 7 et >. Oui les hack c'est mal mais sur le coup le souci m'a dépassé, pourtant rien de bien compliqué.

Donc par contre, je réutilise le post et profite de ce up pour évoquer un autre souci.

J'utilise la méthode évoquée par ce billet d'alsa pour avoir une hauteur de 100%.

Or sous IE et FX, si ce 100% est dépassé, et moyennant un min-height dans mon conteneur, les éléments html et body suivent. Pour opera ce n'est pas le cas.

J'ai donc pensé donner à Opera un min-height, qui résoud mon souci sur des pages de plus de 100% mais qui ne prend plus 100% sur des pages plus courtes.

J'aimerais en faite si c'est FX qui est plus indulgent que Opera ou si c'est Opera qui "bug" sur ce point. Et accessoirement si quelqu'un a une solution.

Je m'en vais préparer une page de test si besoin est, même si ya pas grand chose à montrer.