Probleme avec internet explorer 5 sur pc

[Lentreprenaute]

Bonjour,

J'ai fait des tests

sur PC ie6, Netscape 7.02, mozilla firebird 0.7

sous mac Ie5.1, 5.2, et un autre navigateur

installé sur les dernieres versions du Mac ( j'ai oublié le nom)!

Resultat j'ai reussi à avoir un affichage identique à quelques petits détails près!

et voila que ce xxxx d'ie 5 pc me fait un gros caca!!! que j'ai eu du mal a resoudre sous ie5 mac, une histoire de float et de clear !!!

l'adresse de la page

http://www.lentreprenaute.com

l'adresse du css

www.lentreprenaute.com/_themes/css/mkt1.php

j'ai un "div container" qui contient un "div menu " & un "div contenu"

le probleme c'est que le "div contenu" passe sous le div menu & cela uniquement

sous ie5 pc (que je n'ai pas donc je suis bien embeté!!!) pour tester. vu le nombre de navigateurs sur lequel j'ai fais les tests et que tout marche, si qq1 a une idée!!!

Visuellement ca fait apparaitre le bloc orange, vert, bleu, sous le menu.

Florent

Modifié 14 Mai 2004 par Lentreprenaute

[LaurentDenis]

Je n'ai pas le temps de regarder ta page en détail, mais les deux sources de problèmes classiques avec un menu en float dans IE5 sont :

- le modèle de boîte IE (des padding/border à modifier pour le contenu)

- le bug d'IE sur les flottant (une marge à réserver pour le flottant)

Si personne ne s'y colle, je tâcherai moyen demain matin...

Mais surtout, pour pouvoir tester facilement le rendu graphique dans divers IE, je rappelle que Ryan Parman a modifié les IE 3 à 6 pour qu'ils puissent être utilisés en "standalone" et cohabiter dans la même session de Windows. J'ai en ce moment ton site ouvert simultanément dans les IE 4.01 - 5.01 - 5.5 de Parman et dans le 6 d'origine.

Un petit menu additionnel dans FireFox ou dans Opera avec les "ouvrir la page courante dans IE..." qui vont bien, et les tests de rendu deviennent une vrai partie de plaisir

ça se télécharge ici : http://www.skyzyx.com/downloads/

(Ne pas installer la version 6 de Parman si on veut garder un IE pleinement fonctionnel, mais garder sa version d'origine. On y perd en effet quelques fonctionnalités comme les favoris...)

[Lentreprenaute]

Merci beaucoup Laurent,

si je resouds mon pb, je te laisserais un message, et sinon un grand merci

pour ce lien, je vais pouvoir faire mes tests, je me sentais coincé de ne pouvoir le faire sous ie5 pc. et ca va mieux enfin j'epere que je vais finir par avoir un css

qui passe partout!

#top, #header, #container {
position:relative;
margin-left: auto;
margin-right: auto;
width: 730px;
border-left: #ffffff solid 3px;
border-right: #ffffff solid 3px;
}

#container {width: 730px;position:relative;background:#F9FBFC url(../images/mkt1/orange/fond_container.gif); }
#menu {position:relative;float:left;clear:left; WIDTH: 230px; overflow :hidden;  } /*colonne gauche*/
#contenu {position:relative;float:left; width:500px;overflow :hidden;}/*colonne droite*/

cela fait donc un div container de 730px avec border left & right a 3px

j'ai fai de petits tests en mettant le div contenu à 494px de width pour voir & ca remonte, le pb c'est que mon design n'est plus correct!

autrement, j'ai fais le test de supprimer code 1 les border letf & right et ca semble s'aligner, mais ca me fait perdre le design des bordures!!! je crois que c'est la 5.5 qui deconne complet le centrage ne semble pas fonctionner aussi!

Florent

Modifié 14 Mai 2004 par Lentreprenaute

[LaurentDenis]

Vite fait : on dirait bien le premier cas de figure, celui où IE5 et IE5.5 déforment tes largeurs en les calculant à leur manière (box model microsoft). Les autres navigateurs appliquent un mode de calcul "standard" de la largeur de ta boîte de contenu (box model CSS2).

Voir http://openweb.eu.org/articles/dimensions_boites_css/ pour les explications et un hack CSS simple.

[Lentreprenaute]

merci tout s'explique )

je corrige ca demain merci de ton passage sur le forum

Un petit menu additionnel dans FireFox ou dans Opera avec les "ouvrir la page courante dans IE..." qui vont bien, et les tests de rendu deviennent une vrai partie de plaisir ?

pourrai tu développé ce propos , je susi pas sur de comprendre?

merci

a+

Modifié 14 Mai 2004 par Lentreprenaute

[LaurentDenis]

Un petit menu additionnel dans FireFox ou dans Opera avec les "ouvrir la page courante dans IE..." qui vont bien, et les tests de rendu deviennent une vrai partie de plaisir ?

pourrai tu développé ce propos , je susi pas sur de comprendre?

J'ai un menu personnalisé dans Opera qui me permet de démarrer les autres navigateurs installés sur ma machine et de leur faire afficher la page que je suis en train de voir dans Opera.

J'affiche donc d'abord ma page en cours de développement dans Opera. Une fois la CSS callée, j'utilise mon menu pour voir le résultat dans les autres navigateurs. Au fur et à mesure des modifications de la CSS, il me suffit d'actualiser les affichages...

On peut faire exactement la même chose en se servant de Mozilla ou de FireFox (Mais là, je laisse le soin à un habitué des extensions de donner les liens et les explications )

Pour Opera, le plus facile est d'installer le W3-dev Menu de Toby A Inkster qui ajoute aux menus standards d'Opera un excellent menu de développement.

Une fois le W3-dev Menu installé, il suffit d'éditer son fichier ini et d'y ajouter les commandes correspondants aux différents navigateurs dont on dispose. Chez moi, ça donne par exemple :

[LaunchWin Menu]
Item, "FireFox"	= Execute program, "firefox", "%U"
Item, "Mozilla"	= Execute program, "mozilla", "%U"
Item, "Internet Explorer 6"  = Execute program, "iexplore", "%U"
Item, "Internet Explorer 5.5"	= Execute program, "C:\Program Files\oldie\ie55\iexplore.exe", "%U"
Item, "Internet Explorer 5.0"	= Execute program, "C:\Program Files\oldie\ie50\iexplore.exe", "%U"

etc

On peut d'ailleurs personnaliser ce menu de toutes sortes de manières pour y mettre des moteurs de recherche spécifiques, des liens vers les traductions des spécifications en français, vers des sites ressources francophones...

Modifié 15 Mai 2004 par LaurentDenis

[Lentreprenaute]

Re,

Laurent, peux tu me confirmer que les standalones d'ie 5.01 & ie 5.5 fonctionnent correctement car j'ai fais les tests avec eux et ca fonctionne bien. mais j'ai un ami

qui dispose d'une version 5.00 et a priori le hack des boites n'a pas l'air de fonctionner chez lui. si je vire les border ca marche chez lui!!!

#top, #header, #container {
position:relative;
margin-left: auto;
margin-right: auto;

border-left: <? echo $couleur_0; ?> solid 3px;
border-right: <? echo $couleur_0; ?> solid 3px; 

width: 736px; /*bug ie5 pc*/
voice-family: "\"}\"";
voice-family:inherit;
width: 730px;
}
html>body #top, #header, #container {/*opera5 */
width: 730px;
}

Est ce bon?

#container {position:relative;background:<? echo $couleur_5; ?> url(../images/mkt1/<? echo $vc;?>/fond_container.gif); }
#menu {position:relative;float:left;clear:left; WIDTH: 230px; overflow :hidden;  } /*colonne gauche*/
#contenu {position:relative;float:left; width:500px;overflow :hidden;}/*colonne droite*/

est ce que je devrais mettre des border ,margin padding a 0px !

Florent

Modifié 17 Mai 2004 par Dan