Pb liens et différences entre IE et Firefox

Version imprimable

21/02/2009, 20h31
momofr

1 pièce(s) jointe(s)

Pb liens et différences entre IE et Firefox

Dans l'exemple dont source HTML jointe :
1) les liens sont définis pour que les choix de menu soient affichés en bleu non souligné et italique,
mais ils sont affichés soulignés non italique (couleur purple avec I.E. et bleu avec Firefox).
2) le pied n'est pas affiché avec Firefox.
3) une ligne blanche précède et suit le texte avec Firefox (dans div.prose).

Quelqu'un a-t-il une idée des modifications à apporter pour que cela fonctionne comme attendu :
- choix en bleu non souligné italique.
- pied affiché avec Firefox.
- texte sans ligne blanche avec Firefox (au début et à la fin dans div.prose).

Bonjour,

- Pour la balise <a>Tu as pensé à tout sauf son état initial,
- Tu as top:0 sur tes div .entete et .pied alors qu'aucune n'est positionné,
- .entete et .pied ne sont pas en bon ordre dans le flux, logiquement :

Code:

1
2
3
4
5
6
7
 
<div id="global">
     <div class="entete"> </div>
     <div class="menu"> </div>
     <div class="contenu"> </div>
     <div class="pied"> </div>
</div>

- Tu as deux balise <p> non fermés,
- Ton DOCTYPE HTML 4.01 Transitional incomplet sans URI bascule les navigateurs au mode de rendu Quirks (mode non standard),

Une petite correction donne :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Essai de la première page</title>
    <style type="text/css">
 
      body {
        background: blue;
        text-align: left;
        padding-left: 0em;
        font-size: 12pt;
        font-family: Georgia, "Times New Roman", Times, serif;
        color: black;
        margin: 0;
           }
      a:link {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        text-decoration: none;
        color: navy }
      a:hover {
        font-weight: bolder;
        color: olive;
        text-decoration: none;
              }
      a:active {
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        text-decoration: none;
        color: navy }
      div.global
        {
        top: 0em;
        width: 50em;
        margin-left: auto;
        margin-right: auto;
        background-color: gray;
        overflow :hidden;
        }
      div.menu
        {
        padding-left: 0em;
        background-color: #BFBFBF;
        float: left;
        font-size: 10pt;
        width: 17.4em;
        }
      div.contenu
        {
        float: right;
        background-color: white;
        width: 35.5em;
        margin: 0;
        }
      div.prose
        { width: 34.5em;
          margin: 0.5em 0.5em 0.5em 0.5em;
          text-align: justify;
          font-family: "Times New Roman", Arial, Times, serif; font-size: 12pt }
      div.entete
        {
        text-align: left;
        background-color: yellow;
        margin: 0;
        }
      div.pied
        {
        width: 50em;
        text-align: center;
        background-color: lime;
        margin: 0;
                overflow:hidden;
        }
      img {
        border-style: none;
        }
      .entete pre, .pied pre, .contenu pre, .prose pre { margin:0 }
    </style>
  </head>
 
  <body>
    <div class="global">
	    <div class="entete">
<pre>
        C'est l'en-tête !</pre>
    </div>
    <div class="menu">
      <!-- Menu de navigation du site -->
<br>
<br>
<br>
<br>
<pre>
     Le menu sera ici :     <br>
         <a href="SiteTest.html">Choix 1</a><br>
         <a href="SiteTest.html">Choix 2</a><br>
         <a href="SiteTest.html">Choix 3</a><br>
         <a href="SiteTest.html">Choix 4</a><br>
         <a href="SiteTest.html">Choix 5</a><br>
         <a href="SiteTest.html">Choix 6</a><br>
         <a href="SiteTest.html">Choix 7</a><br>
         <a href="SiteTest.html">Choix 8</a><br>
</pre>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
    </div>
    <div class="contenu">
 
      <!-- Contenu principal -->
    <div class="prose">
    <p>Bienvenue sur la page avec du style !
<br>
<br>
<br>ICI
<a name="ici"></a>
<br>b
<br>
<i>c > d</i>
<br>
<b><i>d e</i></b>
<br>e
<br>f
<br>g
<br>h
<br>i
<br>j
<br>k
<br>l
<br>m
<br>n
<br>o
<br>p
<br>q
<br>r
<br>u
<br>v
<br>w
<br>x
<br>y
<br>z
<br>a
<br>b
<br>c
<br>d
<br>e
<br>f
<br>g
<br>
<a href="#ici">Branchement &agrave; ICI</a> un repositionnement de la page se produit si l'utilisateur clique sur ce lien.
    <p>Il lui manque des images, mais au moins elle a du style et un lien
    &hellip;</p>
 
    <p>Je dois &eacute;tayer, mais je ne sais pas encore comment.</p>
 
    </div>
    </div>
    <div class="pied">
       <pre>
         C'est le pied !</pre>
    </div>
    </div>
  </body>
</html>

22/02/2009, 12h48
momofr

1 pièce(s) jointe(s)
Bonjour,

En fait, je veux l'entête et le pied, tels que je les ai placés et tels qu'ils sont affichés avec I.E. (non symétriques) :
Code:

1 2 3 4 5 6 <div id="global"> <div id="menu"> <div id="contenu"> <div id="entete"> <div id="prose"> <div id="pied">
Le fait d'ajouter "overflow:hidden;" à div.pied permet maintenant d'afficher le pied avec Firefox aussi, comme je souhaitais.

J'ai fermé les 3 balises <p> et complété les 2 lignes entête, mais cela ne semble pas apporter d'amélioration visible.

L'état initial de la balise <a> n'est donc pas d'écrit par "a:link" dans CSS ?
J'ai quelque difficulté à comprendre ...
22/02/2009, 15h01
Macmillenium
Citation:

Envoyé par momofr

J'ai fermé les 3 balises <p> et complété les 2 lignes entête, mais cela ne semble pas apporter d'amélioration visible.

Il te reste quel problème ?

Citation:

Envoyé par momofr

L'état initial de la balise <a> n'est donc pas d'écrit par "a:link" dans CSS ?
J'ai quelque difficulté à comprendre ...

Le pseudo-classe :link s'applique seulement aux liens non visité.
Quand ils sont visité et si tu n'associe pas le pseudo classe :visited, les liens prennent un style appliqué par les feuilles de styles par défaut (bleu souligné généralement).
Ceci dit, soit tu fait :
Code:

1 2 3 4 5 6 a:link, a:visited { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; text-decoration: none; color: navy }
Soit
Code:

1 2 3 4 5 6 a { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; text-decoration: none; color: navy }
22/02/2009, 18h08
momofr

1 pièce(s) jointe(s)

Il reste à résoudre l'écart d'affichage qui devrait être le même avec I.E. et Firefox, concernant l'espace avant la 1ère ligne de texte (ligne "Bienvenue sur la page avec du style !") et après la dernière (ligne "Je dois étayer, mais je ne sais pas encore comment. "), il est correct avec I.E (div.prose).
22/02/2009, 20h04
Macmillenium
Sa vient de tes balises <p>, les feuilles de styles par défaut qui différent d'un navigateur à l'autre, appliquent des marges sur cette balise, il faut donc faire un reset du genre :
Code:

1 2 .prose p { margin:0; padding:1em; }
Ou
Code:

1 2 .prose p { margin:0; padding:0; }
Si t'as vraiment pas besoin de marges.