Site non visible sous Firefox [Résolu]

[laurentSc]

Bonjour,

j'ai un site dont beaucoup de parties sont non visibles sous Firefox (c'est en fait du code fait sous Word, sauvegardé en html, puis recopié) : y a-t-il une solution ?

[NoSmoking]

: y a-t-il une solution ?

ne pas utiliser Word, ou/et faire le tri après.

[laurentSc]

faire le tri après

Qu'est-ce que tu veux dire : tester le navigateur et n'afficher le Word que s'il est différent de FF ?

[NoSmoking]

faire le tri c'est quand on obtient, ligne prise au hasard dans la source

Code html :

<div class="MsoNormal" style="margin: 0cm -5.4pt 0.0001pt 0cm; text-align: center; line-height: normal;" align="center">

ce qui entre parenthèse est complétement OUF, le ramener à

Code html :

<div class="class_div">

donc du boulot en perspective...

[laurentSc]

Pour être sûr de comprendre, voilà un exemple du source :

Code :

1
2
3
4
5
6
7
8
9
10
                              <p class="MsoNormal"
 style="margin-bottom: 0.0001pt; line-height: normal; page-break-after: avoid;"><a
 href="http://www.---"><span
 style="color: windowtext; text-decoration: none;"><v:shape
 id="_x0000_i1054" type="#_x0000_t75" alt="058.JPG"
 href="http://www.---"
 style="width: 86.25pt; height: 57pt; visibility: visible;"
 o:button="t"><v:fill o:detectmouseclick="t">
                              <v:imagedata
 src="document_fichiers/image006.jpg" o:title="058"></v:imagedata></v:fill></v:shape></span></a></p>

Que faudrait-il en faire (notamment les balises <v:---> ) ?

[NoSmoking]

pas sûr du tout, mais pour moi il n'y a que cela d'intéressant

Code html :

1
2
3
4
5
6
7
<p>
  <a href="http://www.xxxxxxxx">
    <span>
      <img src="document_fichiers/image006.jpg" title="058">
    </span>
  </a>
</p>

[Bisûnûrs]

Envoyé par laurentSc

Que faudrait-il en faire (notamment les balises <v:---> ) ?

Tout supprimer et tout faire à la main. Ne t'attends pas à ce qu'un logiciel comme Word fasse un code propre et cross-browser.

[laurentSc]

Merci pour ta réponse, et que ferais-tu avec ça :

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
33
34
35
                                    <td
 style="padding: 0cm 5.4pt; width: 115.95pt; height: 172.3pt;"
 width="155">
                                    <p class="MsoNormal"
 style="margin-bottom: 0.0001pt; line-height: normal;"><a
 href="http://www.---"><span
 style="font-size: 12pt; font-family: "Times New Roman","serif"; color: windowtext; text-decoration: none;"><v:shapetype
 id="_x0000_t75" coordsize="21600,21600" o:spt="75"
 o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe"
 filled="f" stroked="f"><v:stroke joinstyle="miter">
                                    <v:formulas><v:f
 eqn="if lineDrawn pixelLineWidth 0">
                                    <v:f eqn="sum @0 1 0"><v:f
 eqn="sum 0 0 @1">
                                    <v:f eqn="prod @2 1 2"><v:f
 eqn="prod @3 21600 pixelWidth">
                                    <v:f
 eqn="prod @3 21600 pixelHeight"><v:f eqn="sum @0 0 1">
                                    <v:f eqn="prod @6 1 2"><v:f
 eqn="prod @7 21600 pixelWidth">
                                    <v:f eqn="sum @8 21600 0"><v:f
 eqn="prod @7 21600 pixelHeight">
                                    <v:f eqn="sum @10 21600 0"></v:f>
                                    <v:path o:extrusionok="f"
 gradientshapeok="t" o:connecttype="rect"><o:lock
 v:ext="edit" aspectratio="t">
                                    </o:lock><v:shape
 id="_x0000_i1059" type="#_x0000_t75" alt="PUB.jpg"
 href="http://www.---"
 style="width: 106.5pt; height: 239.25pt; visibility: visible;"
 o:button="t"><v:fill o:detectmouseclick="t">
                                    <v:imagedata
 src="document_fichiers/image001.jpg" o:title="PUB"></v:imagedata></v:fill></v:shape></v:path></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:f></v:formulas></v:stroke></v:shapetype></span></a><span
 style="font-size: 12pt; font-family: "Times New Roman","serif";"><o:p></o:p></span></p>
                                    </td>

dont l'intérêt est de faire un cadre avec des bords arrondis. (je le sens pas très bien)

[Bisûnûrs]

Avec ça je ne sais pas, vu que je ne sais pas à quoi ce code propriétaire correspond.
Mais pour des bords arrondis :
http://border-radius.com/

[laurentSc]

Qu'est-ce que je fais avec ce lien, vu que même s'il y a un code source à rallonge, sur mon PC, ça ne donne rien (que je regarde avec IE ou avec FF) ? Et sinon, pour faire des bords arrondis, j'ai eu cette idée : le faire en traitement d'images et inclure l'image dans le site. Qu'en penses-tu ?

[NoSmoking]

tu mets le code dans la partie STYLE pour usage

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
#ma_div{
  width : 400px;
  height : 400px;
  border: 1px solid red;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px
}
</style>
</head>
<body>
<div id="ma_div" class="arrondi"></div>
</body>
</html>

mais perso je pense que l'arrondi des angles c'est peanuts à coté du manque d'information liés aux images invisibles, ces images apportent vraiment au contenu du document et accepter de ne pas les voir et vraiment dommageable.

[laurentSc]

Merci pour la réponse ; je pense que si on l'utilise avec ton autre réponse au sujet des images, on peut tout faire sans Word ; par contre, il y a encore un petit hic : autant sous FF, ton code produit bien des bords arrondis, autant sous IE, le cadre est carré...

[NoSmoking]

Envoyé par laurentSc

autant sous FF, ton code produit bien des bords arrondis, autant sous IE, le cadre est carré...

border-radius est pris en compte à partir de IE9, mais il existe des produits de substitution avec par exemple RoundedCornr sur base d'image de fond.

Mais de joli bords arrondis sans images porteuses d'information, c'est très très moyen...je sais j'insiste

[laurentSc]

Merci pour le produit de substitution ; et en plus, ça marche sur les 2 navigateurs, donc je crois que je vais l'adopter.
Et sinon, pourquoi cette remarque :

Mais de joli bords arrondis sans images porteuses d'information, c'est très très moyen

car je compte bien mettre à l'intérieur du cadre une image (porteuse d'information )

Et au fait, il manque un truc dans ton avatar...

[laurentSc]

Et m..., le produit de substitution ne marche plus et pourtant, j'ai copié tout le code qu'ils donnent et téléchargé les 4 images ; quel est mon bug :

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
33
<style>
.roundedcornr_box_612281 {
background: #cccccc;
}
.roundedcornr_top_612281 div {
background: url(roundedcornr_612281_tl.png) no-repeat top left;
}
.roundedcornr_top_612281 {
background: url(roundedcornr_612281_tr.png) no-repeat top right;
}
.roundedcornr_bottom_612281 div {
background: url(roundedcornr_612281_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_612281 {
background: url(roundedcornr_612281_br.png) no-repeat bottom right;
}
.roundedcornr_top_612281 div, .roundedcornr_top_612281, .roundedcornr_bottom_612281 div, .roundedcornr_bottom_612281 {
width: 100%;
height: 30px;
font-size: 1px;
}
.roundedcornr_content_612281 { margin: 0 30px; }
</style>
<div class="roundedcornr_box_612281">
<div class="roundedcornr_top_612281">
<div></div>
</div>
<div class="roundedcornr_content_612281">
Bords arrondis.</div>
<div class="roundedcornr_bottom_612281">
<div></div>
</div>
</div>

[Auteur]

bonjour,

Code html :

margin: 0cm -5.4pt 0.0001pt 0cm

- pour être cohérent essaye de garder la même unité
- en passant le 0.0001pt m'a fait halluciner

Généralement on prend le point (pt) pour la taille des polices, le cm et les pourcentages (%) pour les marges et les dimensions des objets.

[laurentSc]

Je ne te suis pas du tout vu que le code que tu indiques ne vient pas de chez moi (et d'ailleurs, dans mon code, il n'y a pas de souci avec les unités...)

[Auteur]

Envoyé par laurentSc

Je ne te suis pas du tout vu que le code que tu indiques ne vient pas de chez moi (et d'ailleurs, dans mon code, il n'y a pas de souci avec les unités...)

ah... pourtant NoSmoking a posté ce qui semblerait être une partie de ton code source :

Envoyé par NoSmoking

faire le tri c'est quand on obtient, ligne prise au hasard dans la source

Code html :

<div class="MsoNormal" style="margin: 0cm -5.4pt 0.0001pt 0cm; text-align: center; line-height: normal;" align="center">

Toutefois, ce que je voulais dire est qu'il est préférable de conserver une certaine cohérence homogénéité dans les unités, dans l'exemple que j'ai posté il y a un mélange de pt, cm dans la définition des dimensions de la marge.
De plus je me demandais ce que représentait 0.0001pt .... Pour comparer la police des caractères fait généralement 12pt.

[laurentSc]

pourtant NoSmoking a posté ce qui semblerait être une partie de ton code source

C'est exact ! En fait, il faut savoir que là, j'essaie d'aider une personne qui a fait elle-même un site, dont une partie est du code Word importé (dont la ligne que tu cites). Et son problème est que ça ne s'affiche pas sous FF. Donc le code crade que tu as vu a été généré par Bill (et ses sbires) Et surtout, j'essayais de trouver une solution pour se passer de Word ; et comme cette personne veut faire des cadres avec des bords arrondis, j'essayais de le faire sans Word, d'où cet essai (qu'on m'a indiqué) :

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
33
<style>
.roundedcornr_box_612281 {
background: #cccccc;
}
.roundedcornr_top_612281 div {
background: url(roundedcornr_612281_tl.png) no-repeat top left;
}
.roundedcornr_top_612281 {
background: url(roundedcornr_612281_tr.png) no-repeat top right;
}
.roundedcornr_bottom_612281 div {
background: url(roundedcornr_612281_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_612281 {
background: url(roundedcornr_612281_br.png) no-repeat bottom right;
}
.roundedcornr_top_612281 div, .roundedcornr_top_612281, .roundedcornr_bottom_612281 div, .roundedcornr_bottom_612281 {
width: 100%;
height: 30px;
font-size: 1px;
}
.roundedcornr_content_612281 { margin: 0 30px; }
</style>
<div class="roundedcornr_box_612281">
<div class="roundedcornr_top_612281">
<div></div>
</div>
<div class="roundedcornr_content_612281">
Bords arrondis.</div>
<div class="roundedcornr_bottom_612281">
<div></div>
</div>
</div>

et je cherchais le bug, car à un moment, ça a marché, mais ça ne marche plus, et je n'arrive pas à le refaire marcher.

[NoSmoking]

Envoyé par laurentSc

...et je cherchais le bug, car à un moment, ça a marché, mais ça ne marche plus, et je n'arrive pas à le refaire marcher.

problème de chemin d'accés aux fichier ????

-mais je penses que la première chose à faire est de nettoyer le HTML, pour éviter les parasitages.

il y à aussi Coins arrondis CSS