Problème mise en page / cadres & co. avec Firefox

[kellan]

Salut!
Voilà, j'ai récemment propulsé mon site à l'époque (presque) moderne en lui intégrant log, forum, galerie flash et livre d'or.
Sous Internet Explorer, mon navigateur par défaut, tout fonctionnait parfaitement. On m'a fait remarqué cependant qu'avec Firefox et Opera, c'était carrément la merde.
J'ai donc installé Firefox que finalement je préfère (et de loin) à merdows et effectivement, rien ne va plus:
- les cadres de mon log s'envoient en l'air;
- les paragraphes de mes textes partent en bad trip;
et d'autres trucs je suppose...

Moi pas comprendre! Je suis un littéraire, pas un matheux et encore moins un programmeur. J'ai pris des scripts tout fait sur DotClear par exemple et je les ai adaptés pour harmoniser le tout avec le reste de mon site en HTML. Apparemment, j'ai merdé quelque part et je sais pas où.

Si quelqu'un peut me renseigner, ce serait sympa. Je me casse et le 10 octobre, fini le net. J'aimerais que tout soit prêt avant.

Mon site: http://kellan.free.fr

Merci à vous tous!

[calimo]

Mouahahahaha !!! Il n'y a qu'un seul lien qui fonctionne, c'est le lien pointant sur la page d'accueil elle-même

C'est donc très grave docteur

Ça mérite d'ailleurs d'être déplacé dans la rubrique Développement web par un modérateur
(parce que ce n'est pas lié à Firefox, mais bien au "Optimisé pour IE")

Edit : ah ben il faut pas chercher plus loin

Code : Tout sélectionner

<meta name="generator" content="Namo WebEditor v6.0">

Argl, c'est foutu d'avance là

[kellan]

Merci pour ta réponse mais je sais déjà qu'il est optimisé pour IE, c'est inscrit dans la seule page que t'es parvenu à ouvrir (au passage, d'autres ont réussi à ouvrir le reste). Bref, ça fait rien avancer! ;o)

Pourquoi est-ce foutu d'avance avec Namo?

[Mori]

en autorisant javascript, j'ouvre toutes les popups.

[kellan]

Oui, oui, les ouvertures de pages fonctionnent mais c'est pas pratique en fait, je vais changer ça à terme.

En fait, je viens de voir la page OpenWeb, listée dans le forum des Développeurs Web.
Je savais déjà que j'étais né 400 piges trop tard, mais alors là côté informatique, j'ai quelques années à rattraper également.

D'autres longues nuits m'attendent j'en ai peur!

Merci en tout cas.

[calimo]

Merci pour ta réponse mais je sais déjà qu'il est optimisé pour IE, c'est inscrit dans la seule page que t'es parvenu à ouvrir (au passage, d'autres ont réussi à ouvrir le reste). Bref, ça fait rien avancer! ;o)

Si, on est au bon endroit maintenant

Pourquoi est-ce foutu d'avance avec Namo?

Ben, disons que d'expérience on a très souvent des gens qui viennent, leur page fonctionne mal et on découvre vite qu'ils utilisent Namo...
Il faut dire qu'il produit un code particulièrement pourri, presque au niveau de Word et Front Page, c'est pas peu dire

Pour en revenir au liens de la page d'acceuil j'ai, comme 10% des internautes (source, autre source) le javascript désactivé. Donc impossible de suivre les liens "javascript:..."
Il y a un moyen de faire des popups qu'on peut suivre sans javascript, le mieux étant encore à mon avis de ne pas faire de popups du tout...

C'est assez vite corrigé, mais il faudra aller directement dans le code.

Pour le reste, je ne sais pas trop ce qui ne passe pas...

[kellan]

Tu parles d'une affaire, lol!

Je viens de me rendre compte que qu'il faut que je refasse tout de A à Z sachant qu'en informatique, un gosse de 13 ans s'en sortirait mieux que moi.
Fiouu, dure à accepter la fosse générationnelle, lol!

Pour moi, c'est du mandarin tout ça et pour couronner le tout, Dreamweaver MX ne veut même pas s'installer sur ma machine car il lui manque des fichiers ou quelque chose comme ça - j'ai donc prix Namo WebEditor 6. C'était bien quand les tableaux suffisaient, bah c'est plus le cas.

Courage mon grand, t'as encore trois semaines pour devenir un gosse de 13 ans!

[calimo]

Courage mon grand, t'as encore trois semaines pour devenir un gosse de 13 ans!

Non, surtout pas !
S'il y a bien une chose à ne pas faire, c'est n'importe quoi (et ça un gamin de 13 ans il sait faire )

Surtout, la meilleure chose à faire c'est de rester calme et ne pas s'énerver.

Prenons l'exemple de ces liens qui posent problème. La colonne de droite a le code suivant :

Code : Tout sélectionner

        <td align="center" valign="middle" style="border-width:1px; border-color:black; border-style:none;" width="25%">
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center">&nbsp;</p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><font face="Perpetua"><span style="font-size:9pt;">[ </span></font><a href="javascript:na_open_window('win', 'presentation_01.htm', 200, 20, 450, 600, 0, 0, 0, 1, 0)" target="_self"><font face="Perpetua"><span style="font-size:9pt;">pr&eacute;sentation</span></font></a><font face="Perpetua"><span style="font-size:9pt;"> ]</span></font><span style="font-size:9pt;"></span></p>

            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:9pt;">&nbsp;</span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:9pt;">&nbsp;</span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:9pt;">&nbsp;</span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><font face="Perpetua"><span style="font-size:9pt;">[ <a href="javascript:na_open_window('win', 'bibliotheque/index_litteraire.htm', 200, 20, 600, 600, 0, 0, 0, 1, 0)" target="_self">textes</a> ]</span></font><span style="font-size:9pt;"></span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:9pt;">&nbsp;</span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:9pt;">&nbsp;</span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:9pt;">&nbsp;</span></p>

            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><font face="Perpetua"><span style="font-size:9pt;">[ </span></font><span style="font-size:9pt;"><font face="Perpetua" color="black"><a href="javascript:na_open_window('win', 'fig/index.html', 150, 50, 700, 530, 0, 0, 0, 0, 0)" target="_self">gallery</a></font></span><font face="Perpetua"><span style="font-size:9pt;"> ]</span></font><span style="font-size:9pt;"></span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:9pt;">&nbsp;</span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:9pt;">&nbsp;</span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:9pt;">&nbsp;</span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center"><span style="font-size:20pt;"><font face="Inkburrow"><b><a href="javascript:na_open_window('win', 'http://kellan.free.fr/weblog', 200, 20, 600, 650, 0, 0, 0, 1, 0)" target="_self">weblog</a></b></font></span></p>
            <p style="line-height:120%; margin-top:0; margin-bottom:0;" align="center">&nbsp;</p>

        </td>

On peut le simplifier, et ça donne ça :

Code : Tout sélectionner

        <td style="border: 1px none black;" align="center" valign="middle" width="25%">
            <p style="line-height: 120%; margin-top: 10pt; margin-bottom: 50pt; text-align:center; font-family:Perpetua, serif; font-size:9pt;">[ <a href="presentation_01.htm">présentation</a> ]</p>
            <p style="line-height: 120%; margin-top: 50pt; margin-bottom: 50pt; text-align:center; font-family:Perpetua, serif; font-size:9pt;">[ <a href="bibliotheque/index_litteraire.htm">textes</a> ]</p>
            <p style="line-height: 120%; margin-top: 50pt; margin-bottom: 50pt; text-align:center; font-family:Perpetua, serif; font-size:9pt;">[ <a href="fig/index.html">gallery</a> ]</p>
            <p style="line-height: 120%; margin-top: 0pt; margin-bottom: 0pt; text-align:center; font-family:Inkburrow, serif; font-size:20pt; font-weight:bold;"><a href="weblog">weblog</a></p>
        </td>

Ça ne te dis peut-être pas grand chose, mais on voit déjà que c'est plus simple non ? Plus lisible... on voit la structure apparaître peu à peu.

Ce que j'ai fait c'est essentiellement supprimer des déclarations inutiles, et surtout les liens, qui sont maintenant parfaitement fonctionnels sans javascript. En fait, il suffit de mettre la page cible dans l'attribut "href", rien de plus.

Quant aux autres problèmes dont tu parles, les paragraphes qui partent en "bad trip" je n'ai pas vraiment vu où...
Pour le blog là ça sera surement plus compliqué... tu as édité les "templates" avec Namo ? Argh !

[kellan]

Je viens de ranger le bordel que j'avais foutu sur mon site à cause de Firefox, des standards tout ça. D'ailleurs, pour fêter l'évènement j'ai acheté un nom de domaine, un espace privé (et une bouteille de gin).
BREF, j'ai encore deux ou trois petits problèmes.

Tout d'abord le nouveau lien: http://www.kellan.org

- dans la rubrique 'lettres', les paragraphes des textes ne sont pas alignés, c'est toujours l'orgie sous Firefox et je comprends pas pourquoi alors que sous IE, les 5 espaces de début de paragraphe sont respectés.
- Dans le log, c'est la margin-top de la page qui est plus grande que sous IE et là non plus je comprends pas pourquoi.

J'ai pas dormi, désolé donc pour la rhétorique, si quelqu'un peut me renseigner, ce serait cool. Merci d'avance.

[calimo]

Salut,

Félicitations, c'est tout de suite nettement mieux

- dans la rubrique 'lettres', les paragraphes des textes ne sont pas alignés, c'est toujours l'orgie sous Firefox et je comprends pas pourquoi alors que sous IE, les 5 espaces de début de paragraphe sont respectés.

Chez moi ils y sont bien, mais je pense que tu aurais meilleur temps d'utiliser la propriété CSS destinée spécialement à faire ça : text-indent

- Dans le log, c'est la margin-top de la page qui est plus grande que sous IE et là non plus je comprends pas pourquoi.

Code : Tout sélectionner

html, body {
	margin-top: 40px;

Ça fait 80px, a vue de nez c'est correct dans Firefox... c'est IE qui pose problème et n'en applique qu'un...

Edit : attention aux polices ! Tu dois définir des polices génériques qui seront appliquées si les polices que tu as définies ne sont pas présentes sur le poste de l'utilisateur... et je doute que beaucoup de monde ait les fontes perpetua et inkburrow

Code : Tout sélectionner

font-family: Perpetua, Georgia, Garamond, 'Times new roman', Times, Serif;

et

font-family: Inkburrow, fantasy;
(ou bien cursive à la place de fantasy selon tes préférences)

[kellan]

Le text-indent ne fonctionne que pour les paragraphes apparemment, pas pour les simples retours à la ligne.

Le top-margin @!"#&$ FAIT *^#&% MICROSOFT, lol!

Enfin pour les font-family, j'ai pensé que ce serait inutile d'en éditer une série puisqu'il y a un package de font sur la page d'accueil mais bon, c'est un connerie je vais le faire merci.

[calimo]

Le text-indent ne fonctionne que pour les paragraphes apparemment, pas pour les simples retours à la ligne.

Ah oui en effet...

Enfin pour les font-family, j'ai pensé que ce serait inutile d'en éditer une série puisqu'il y a un package de font sur la page d'accueil mais bon, c'est un connerie je vais le faire merci.

On estime qu'en général tu peux t'estimer heureux si 1% de tes visiteurs télécharge tes polices
Pour les 99% restants, des fontes alternatives plus courantes s'imposent.
J'ai vu ça récemment : http://www.empyree.org/informatique/web-safe.html

[kellan]

Ne sais-tu pas qu'il ne faut pas croire tout ce qu'on lit?

Mis à part les quelques centaines d'homos qui cliquent sur mon lien dans les sites de rencontre, les visiteurs sont des gens plus élevés quand même, lol, donc ça va j'me fait pas de souci!

Pour en revenir au sujet, la mise en forme, c'est vraiment galère, ça m'saoule. Y'en a marre des trucs différents qui changent tout l'temps, de taper sur les majors et de préférer les alter mondialistes toujours.

Bon ok, IE c'est merdique mais au moins tout le monde l'a par défaut, lol.

J'sais pas moi, qu'il se mettent d'accord, qu'ils fassent un seul navigateur génial comme ça tout le monde sera content! ;op

Bon, assez d'utopie et de propositions de bar PMU là, il est tard/tôt, bonne nuit/jour et merci Calimo, tu m'as bien aidé quand même!

[calimo]

Pour en revenir au sujet, la mise en forme, c'est vraiment galère, ça m'saoule. Y'en a marre des trucs différents qui changent tout l'temps, de taper sur les majors et de préférer les alter mondialistes toujours.

Bon ok, IE c'est merdique mais au moins tout le monde l'a par défaut, lol.

Tout le monde ? Non, je ne crois pas
Pense à tous ceux qui n'ont pas Windows XP...

J'sais pas moi, qu'il se mettent d'accord, qu'ils fassent un seul navigateur génial comme ça tout le monde sera content! ;op

Non, mais qu'ils fassent des navigateurs qui respectent tous parfaitement les standards et les choses iront mieux

Pour les espaces, il faut mettre des espaces insécables :  
Parce que plusieurs espaces "simples" à la suite sont considérés comme un seul espace selon les recommandations du W3C. Donc en mettant des espaces insécables ça devrait aller

[kellan]

Justement, ils sont pas majoritaires je crois ceux-là, lol. XP ou pas XP, IE est sous merdows.

J'utilise les espaces insécables quand il s'agit d'en mettre plusieurs, c'est pour ça que je comprends pas. C'est pas grave, ça m'a saoulé tous ces codes.
Mon côté vierge (astralement parlant hein) va s'asseoir sur son perfectionnisme et pi c tout! ;op

Merci pour ton aide toujours, bonne continuation!