[css] Compatibilté.

Version imprimable

14/02/2006, 18h19
Tamus

[css] Compatibilté.

Bonjour,

Je suis ennuyé par IE et Opéra qui ne prennent pas en compte un {float: left;} contrairement à Firefox.

J'ai un second probleme, le menu à gauche fait une certaine taille, et le contenu en fait une autre. Je souhaiterais que le fond du menu se répète quand la taille du contenu dépasse celle du menu, pour éviter le "trou" entre le menu et le footer.

Je laisse les différents liens : Le site et le css

Merci d'avance pour votre aide :wink:
14/02/2006, 18h26
gorgonite

Citation:

Je suis ennuyé par IE et Opéra qui ne prennent pas en compte un {float: left;} contrairement à Firefox.

Au fait, tu connais cela
http://dean.edwards.name/IE7/
14/02/2006, 18h33
gorgonite

Citation:

J'ai un second probleme, le menu à gauche fait une certaine taille, et le contenu en fait une autre. Je souhaiterais que le fond du menu se répète quand la taille du contenu dépasse celle du menu, pour éviter le "trou" entre le menu et le footer.

vu toutes tes tailles sont définies de manière fixe... pour quoi tu ne fixe pas aussi la hauteur du menu ???
14/02/2006, 19h13
Tamus

Citation:

Envoyé par gorgonite

Au fait, tu connais cela
http://dean.edwards.name/IE7/

Heu ... peux tu être plus explicite :oops:

Et au sujet de fixer la hauteur du menu, non car la hauteur du contenu est ammenée à changée suivant la page.
14/02/2006, 19h26
gorgonite

Citation:

Heu ... peux tu être plus explicite Embarassed

Ben c'est juste un truc qui permet de faire du css2 sous ie...
donc pour ton float :wink:

Citation:

Et au sujet de fixer la hauteur du menu, non car la hauteur du contenu est ammenée à changée suivant la page.

tu peux faire un truc du genre:
ton menu est beaucoup plus grand, (height: xxx%), et ensuite tu places l'image avec position: absolute

mais c'est moche...
14/02/2006, 20h41
ilood

Salut

Citation:

Envoyé par gorgonite

Ben c'est juste un truc qui permet de faire du css2 sous ie...
donc pour ton float :wink:

Oula doucement doucement... IE 6 gère une partie du css 2. Et connait la propriété float, tout comme Opera. Il faut arrêter un peu de mettre Firefox sur un piédestal. Sans vouloir lancer de troll, il est loin d'être parfait.

Avant de proposer des solutions abracadabrantesques, il faudrait se pencher sur le code html et css du site qui pose problème.
15/02/2006, 18h30
Tamus

Citation:

Envoyé par ilood

Oula doucement doucement... IE 6 gère une partie du css 2. Et connait la propriété float, tout comme Opera. Il faut arrêter un peu de mettre Firefox sur un piédestal. Sans vouloir lancer de troll, il est loin d'être parfait.

Avant de proposer des solutions abracadabrantesques, il faudrait se pencher sur le code html et css du site qui pose problème.

Je n'ai en aucun cas voulu lancer de débat interminable sur les navigateurs, j'ai juste fais un constat sur cette situation bien précise.

Donc si quelqu'un pouvait examiner le css et la source html, cela m'aiderais pas mal.

merci d'avance
16/02/2006, 11h40
Tamus

up :)

Il n'y a pas de probleme de float sur IE, pour eviter que ton div "contenu" s'affiche en dessous du menu, ne lui spécifie pas de largeur, un div prend automatique la largeur restante :
Code:

1 2 3 4 5 6 .contenu { margin-left: 185px; background-image: url('images/fond_contenu.jpg'); background-position: right; }
Pour que le fond s'affiche quelles que soient les hauteurs des contenus, ajoutes un 2 eme div "global" à l'intérieur de ton div "centrer" et appliques ces styles (j'ai juste mis ceux qui ont changé ou été ajoutés):
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 .menu { width: 185px; float: left; } .contenu { margin-left: 185px; background-position: right; } #centrer { background: url('images/fond_menu.jpg') repeat-y left top; margin: auto; width: 770px; } #centrer_decoration { background: url('images/fond_contenu.jpg') repeat-y right top; } .footer { width: 770px; height: 124px; background: #FFFFFF url('images/footer.jpg'); background-repeat: no-repeat; padding-top: 110px; margin-top: auto; text-align: center; } .clear { clear: both; font-size: 0; line-height:0; }
Et voilà la structure globale:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <body> <div id="centrer"> <div id="centrer_decoration"> <div class="header"> </div> <div id="gauche"> ... </div> <div class="contenu"> ... </div> <div class="clear"></div> <div class="footer"> ... </div> </div> </div> </body> </html>

16/02/2006, 13h36
Tamus

Je vais essayer :)

merci beaucoup !

Edit : Ca marche parfaitement !! Merci :D