Compatibilité des navigateurs web...

[Le Templier]

Salut Dagi...
Je sais d'avance ce que tu vas me dire... Internet explorer c'est de la daube, mais force est de constater (dans les stats) que plus de 75 % des internautes utilisent cette daube pour surfer sur le net... Et je dois dire que le visuel du site est un peu dégueu avec ce navigateur... heureusement, la dernière version de IE 7 accepte les particulartités des images en png (la transparence par exemple), mais avec IE 6, c'est moche et il y a plein de lignes noires dans le menu et au milieu des pages...

J'ai écrit tout ça, non pas pour le plaisir de critiquer, mais pour te dire que je pense qu'on peut tenter de régler pas mal de chose en chipotant les CSS du site et en paramétrant les "div" autrement (pour autant qu'il y en ait)... Serais-tu d'accord de me donner accès à ces fichiers ? que j'y jette un oeil ?

[Dagi]

Argh, je sais... Ou, du moins, je m'en doutais qu'il y aura au moins un browser foireux... Perso, je teste sous FF, Opera et Safari, avant j'avais aussi l'accès au IE, mais plus maintenant. Quand j'ai vu ce que ça donnait sous IE... ben, je vais pas le dire, parce que je suis bien éduquée. Na.

J'ai jamais réussi l'adaptation correcte des css pour IE, j'ai passé des mois chez Benefalux à essayer de tirer au clair quelques feuilles pour leur site - à part de réécrire les feuilles spécifiques pour IE je n'ai pas trouvée de solution valable...

Je veux bien te passer les css de FdL, mais je suis un peu près sure qu'il faut quand-même réécrire une partie avec mention *IE.
Je t'en prie:

Code : Tout sélectionner

 
a{
   color: #000066;
   text-decoration: none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   clip:   rect(5px 10px 5px 0px);
   text-align: justify;
   text-indent: 5pt;



}

div#body{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000066;
   text-decoration: none;
   background-attachment: fixed;
   background-image: url(fdlnew/fondinterieur.jpg);
   background-repeat: no-repeat;
   width: 825px;
   height: 515px;
   position: relative;
   margin: 1px;
   overflow: auto;
   display: block;
   padding: 1px 0px 0px;


}

div#head{
   background-attachment: fixed;
   background-image: url(fdlnew/bannernewfdl.jpg);
   background-repeat: no-repeat;
   position: relative;


}

div#page{
   position: absolute;
   height: 768px;
   width: 1024px;


}

div#menu{
   background-attachment: fixed;
   background-image: url(fdlnew/menu.jpg);
   background-repeat: no-repeat;
   position: relative;

}

div#barreverticale{
   position: relative;

}

div#article{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #000066;
   position: relative;
   margin: 5px;
   text-align: justify;
   clip:      rect(0px 0px 0px 0px);
   text-indent: 5pt;

}

.titre20px{
   color: #990000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;

   

}

div#hierarchie{
   float: right;
   position: relative;
   clip:  rect(auto 2px auto auto);
   margin-right: 5px;

}a:hover {
   font-weight: bold;
   color: #990000;
   text-decoration: none;
}

.filetclair{

   background: url(fdlnew/filetclair2.gif) repeat-x;

}a:link {
   color: #990000;
}
table {
   color: #000066;
   text-decoration: none;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
}
a:visited {
   color: #6600FF;
}

div#menulangue{
   position: relative;
   width: 80px;
   height: 20px;
   top: 65px;
   clear: right;
   float: left;
   overflow: hidden;
   filter: alpha(opacity=50);
   background-color: #FFFFFF;

}
.a{
   margin: 5px;
   text-align: justify;
   text-indent: 5pt;
   clear: les deux;
}
.soustitre{
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000099;
   text-decoration: none;
}

.image {
   text-align: center;
   margin: 5px;
   clear: les deux;
   clip:  rect(2px 2px 2px 2px);
   text-indent: 5pt;
}

img {
   display: inline;
   vertical-align: middle;
   border: 0;
   padding: 0px;
   clip:  rect(2px 2px 2px 2px);
   margin: 0px;
}
p {
   text-align: left;
   margin-top: 1em;
   margin-bottom: 0.5em;
}

Comme tu peux voir, je me bats avec les img qui ne sont pas détourés comme je veux - si tu as une solution à ça aussi - je suis preneuse.

[Le Templier]

On va déjà essayer de retirer les vilaines lignes noires dans le menu...
quand je suis à la maison ce soir, je te ferai un printscreen de IE pour que tu voies...
je sais que Ie est de la m***de en boîte, mais le fait est que la majorité des surfeur l'utilisent... Et si on veux montrer de la qualité dans le travail, il faut essayer que la vitrine (le site) soit la plus belle possible

[Dagi]

Je ne dois pas voir des printscreen pour savoir exactement comment ça se présente... Les divs sont détourées avec du noir et la mise en page saute dans tous les sens...
Je crois savoir aussi que les css pour IE seront compatibles avec la majorité des navigateurs, donc si j'avais un IE sous la main, je commencerais par les écrire pour cette daube, avant de tester sous FF et Opera....

Tiens, je vais aller chercher après un IE pour mon système - il se peut que je m'énerve pour rien...

[Dagi]

J'ai pire...
J'ai trouvé IE pour Mac, le twist est que c'est la version datant de Matusalem - en effet, Microsoft ne developpe plus de IE pour Mac, ils ont laissé tomber, vu que les utilisateurs Mac ont les meilleurs browsers, nativement Mac (Safari) ou plus puissants encore (Firefox).
Donc la derniere version IE pour Mac est la 5.quelquechose... ET je ne vois pas de textes du tout sur la page, les boutons ne sont pas cliquables, enfin - caca totale.

[Le Templier]

Bon, je vais regarder comment j'ai paramétré mes div sur mon site pour que ça ressemble à quelque chose sous IE / FireFox / Opera (mon site est testé sous ces 3 navigateurs là) et je vais voir ce que je peux adapter aux css de FDL

Si tu as le temps et si tu y comprends quelque chose, voici l'adresse de la feuille de style que j'utilise :

http://www.templiers.org/stylemenu.css

IE et Mozilla(firefox et les autres navigateurs de cette série) utilisent des positionnement différents et des "marges" par défaut différentes... Certaines informations pour les css sont lues et comprises par l'un des navigateur, mais l'autre les ignore, comme c'est le cas des padding, indent,... Et il faut chipoter avec ces paramètres pour trouver quelque chose qui va pour les deux navigateurs

[Andrieu Dervenn]

apparemment, y a pas beaucoup de délits dans l'arrondissement de tubize...lol

[Le Templier]

Aujourd'hui c'est calme

[Andrieu Dervenn]

Dites m'sieur l'agent! y a pas moyen d'organiser une surveillance de l'atelier? Non je dis ça comme ça, ya une pensière qu voudrait porter plainte sur l'effraction de l'humidité dans l'atelier.

[Le Templier]

Oué, la demande est faite... il y aura un passage dans l'après-midi cette semaine mais pour que les voleurs ne sachent pas quand, ce sera secret mais entre nous, jeudi ou vendredi ça te va ?

[Dagi]

Si tu as le temps et si tu y comprends quelque chose, voici l'adresse de la feuille de style que j'utilise :

http://www.templiers.org/stylemenu.css

Je comprends ce qu'il est écrit dessus mais je ne vois pas beaucoup de différences entre tes css et les miennes.... à part quelques indent et positions peut-être... Je vais regarder ça de plus près demain, promis.
Aujourd'hui, Tif m'a demandé de faire l'accueil de De Fer Rouge (css en prime, of course), donc j'ai la tête pleine de codes pour l'instant...

[Le Templier]

Ok, si tu as besoin de qqchose...
Et a propos du squellette spip, je ne veux pas modifier les balises en elles-même, mais faire le ménage dans des bouts de code... Je ne dis pas que ça va règler tous les problèmes, mais je suis presque certain que ça va harmoniser une partie de l'affichage...

Voici ce qu'il y a avec le menu :


Si c'était un problème pur avec les css, tout le menu serait affiché de façon homogène (vu qu'il est repris dans un div "menu") et il y aurait juste le problème de l'écart avec le div central à régler... mais les lignes intercallées entre différents éléments du menu montrent qu'il y a là un petit problème dans l'agencement des codes du menu... Tu comprends de quoi je veux parler ??

Et voici deux images pour te montrer l'emplacement de deux "trous" qui, s'ils étaient "effacés", règleraient deux petits problèmes :


A mon avis cette première image montre l'endroit du problème du décalage du titre "présentation" vers la droite


Et ce trou ci est la cause à mon avis d'une petite ligne noire qui apparait du côté droit de la page (j'ai pas fait de printscreen pour celle-ci)

[Dagi]

Mais je t'en prie, nettoie!
Etant donné que je ne vois pas ces lignes sur mon navigateur, je ne saurais pas chipoter moi-même - je ne verrais pas de résultat...

Merci m'sieur l'agent!

[Le Templier]

Ok, je veux bien nettoyer, mais je ne sais pas où aller, ni quel fichier éditer pour nettoyer ce code du squelette... Tu peux me dire ??

Hier soir, j'ai jeté un oeil approfondi sur le code css et le code source des pages et il me semble qu'il y a des petits problèmes de taille de cellules de tableaux par rapport à la taille de div... je vais continuer ce soir...

[Roland Leluern]

Ouhaaaa ça me rappelle mes cours de première année ou je pigeait rien.

vive firefox xD