[pas réglé...] Mon CSS sous ie ?

[Raoull]

J'ai réalisé 2 templates en css, presque similaires, pour des sites dont je m'occupe, qui passe parfaitement sous opera et firefox.

Par contre, je ne peux pas tester sous IE...
Sans vous raconter les détails de mes mésaventures, je tourne sous win98 avec IE4 (impossible d'installer IE6), qui ne gère pas du tout le CSS, donc impossible de voir ce que ca donne sous IE !

J'aimerai juste que qlqu'un regarde ce que donne les pages d'accueil de ces 2 sites, d'abord avec opera ou firefox, puis avec IE6 et/ou IE7 pour comparer et me dise si ca passe nikel. Ou mieux, me fasse un ptit screenshot si ya un blem.

Voila, c'est plutot inhabituel, mais ca me dépannerait vraiment !

Les pages sont :
http://xparangon.free.fr/index.php
et
http://isoat.free.fr/index.php

merci d'avance !

[orditeck]

Comme on peut constater tu sais t'y prendre
Quand un design est bien, il passe #1 sous FireFox et sous IE7.

Donc voilà, les deux passe #1 sous IE7 et sous FireFox.
IE6 aucune idée, je suis sous Vista.

Mais bon, maintenant la MAJ de IE6 vers IE7 est proposé avec Windows XP.

[Edit :]
Screen :

[Raoull]

Super !

Pas d'image de l'autre site, pourtant j'ai très peur de savoir si IE aligne correctement le float avec les "boutons" sur la droite...

Mais tu n'as rien dit, c'est donc que ca passe bien aussi, suis content

Merci Orditeck !

[Sephi-Chan]

Voila un screenshot du site Isoat :


Les flottants de droite ne sont pas des block sur IE. oO?

[Raoull]

ha merci !

Je m'en doutais, les float merdent toujours un peu généralement sous ie, mais là ca a l'air pas trop méchant.

A première vue, le DIV des boutons de droite ne garde pas les propriétés du DIV parent (boutons de gauche) et donc le border-top et le padding n'apparaissent pas. Suffirait donc de les rajouter dans la déclaration de ce DIV, même si ca fait double emploi pour les autres navigateurs...

[Sephi-Chan]

Les floats, moins je m'en sers, mieux je me porte !

[Raoull]

Ca y est ca devrait être corrigé.

Le probleme avec ce float à droite, c'est que si j'ai trop de boutons à gauche, et qu'un visiteur a une fenêtre pas assez large, les "boutons" de gauche vont passer sur 2 lignes et se chevaucher.
Line-height devrait régler ca, mais ca donne pas grand chose...

C'est pourtant bien pratique les float, pour mettre un menu à gauche ou à droite en css, par exemple. Et ca n'a rien de sorcier

Ce qui est plus aléatoire, enfin je crois, c'est les position absolute. J'avais pas trop testé, et la j'ai fait une 2eme version du style de isoat (normal2) où les boutons de doite se retrouve au dessus de la ligne (pour parer ce probleme de chevauchement).
Calculé au pixel près, ca passe bien sous firefox et opera pour l'instant.

[Sephi-Chan]

Hm.. C'est toujours pareil sur le site. Le problème est le même.

Si tu veux modifier en live, viens sur IRC comme ça je peux tester des que tu fais une modif' .

[Raoull]

Merci mais c bon, j'ai installé IE6, et j'ai donc modifié mon css pour ie, pas mal alourdi d'ailleurs, obligé de passer par 3 div au leiu de 2.

Ca passe donc toujours aussi bien sous FF et opera, mais j'ai encore un souci avec isoat sous IE6...

Le "border-bottom: 1px solid #444444;" ne passe pas du tout pour les boutons à droite (préférences, inscription, connexion)... C'est très bizarre... je comprends vraiement pas où est le probleme...

Voila mon css pour les 3 duvs (menu, menu_gauche, menu_droit) :

Code :

#menu {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

#menu_gauche {
    margin: 0;
    padding: 0;
    padding: 5px 0 5px 0;
}
#menu_gauche a {
    margin: 0;
    padding: 5px 8px;
    background-color: #EFEFEF;
    color: #444444;
    border-right: 1px solid #444444;
    border-bottom: #444444 1px solid;
    text-decoration: none;
}
#menu_gauche a:hover{
    margin: 0;
    padding: 5px 8px;
    background-color: #FFFFFF;
    color: #000000;
    border-color: #000;
    text-decoration: none;
}

#menu_droit {
    float: right;
    margin: 0;
    padding: 0;
    padding: 5px 0;
}
#menu_droit a {
    margin: 0;
    padding: 5px 8px;
    background-color: #EFEFEF;
    color: #444444;
    border-left: 1px solid #444444;
    border-bottom: 1px solid #444444; /* <--- ca ne passe pas sous ie */
    text-decoration: none;
}
#menu_droit a:hover{
    margin: 0;
    padding: 5px 8px;
    background-color: #FFFFFF;
    color: #000000;
    border-color: #000;
    text-decoration: none;
}