Site non visible sous Firefox

**laurentSc** · 09/07/2011, 09h45

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** · 09/07/2011, 10h53

: y a-t-il une solution ?

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

**laurentSc** · 09/07/2011, 11h06

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** · 09/07/2011, 11h18

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="class_div">

donc du boulot en perspective...

**laurentSc** · 09/07/2011, 11h31

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 09/07/2011, 11h55

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 09/07/2011, 12h08

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** · 09/07/2011, 12h20

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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: &quot;Times New Roman&quot;,&quot;serif&quot;; 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: &quot;Times New Roman&quot;,&quot;serif&quot;;"><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** · 09/07/2011, 12h39

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** · 09/07/2011, 14h05

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** · 09/07/2011, 17h37

tu mets le code dans la partie STYLE pour usage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 09/07/2011, 19h53

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** · 09/07/2011, 22h30

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** · 09/07/2011, 22h51

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** · 09/07/2011, 23h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 10/07/2011, 14h14

bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 10/07/2011, 18h20

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** · 11/07/2011, 12h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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** · 11/07/2011, 13h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 11/07/2011, 19h01

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

Site non visible sous Firefox

HTML

Discussions similaires

Partager

Partager