[CSS][HTML] Pb avec FF : ancre et barre de nav horizontal

Version imprimable

13/04/2006, 15h35
PaladinFr

[CSS][HTML] Pb avec FF : ancre et barre de nav horizontal

Bonjour.
J'ai un problème un poil tordu sous firefox.
Alors voila j'explique.
Sur le site dont je m'occupe il y avait un glossaire constitué de 3 frames.
Un frame pour un menu horizontal (les lettres), une frame à gauche pour un menu (les mots) et une frame à droite pour les définitions.

Bon moi les frames ca m'énerve car c'est plus facile en apparence mais quand on veut maintenir le site c'est l'angoisse.

Bref j'ai ré-écris tout ca hier et hop plus de frame.
Pour ca j'ai utilisé la propriété fixed et le hack de IE pour que la page garde la même apparence.
Et ca marche la partie droite avec les définitions scrolle bien et le reste ne bouge pas (j'ai un effet de passage sous le menu de lettre sous firefox mais rien de bien méchant apparement... mais j'y viens justement).

Seulement voila.
il y a des balises <a id=> (des ancres) dans cette page pour que quand on clique sur un mot (partie gauche) on se positionne directement sur la bonne définition (partie droite) mot.
Sous IE tout va bien.
Mais sous firefox ca va pas
En effet pour IE la partie droite de la page (que je vais appeler "content") commence juste après la barre de navigation horizontal (grace au padding-top). Mais sous firefox la partie droite commence bien en haut de la page (l'ascenseur va jusqu'en haut, le padding-top n'affecte que le texte contrairement à IE) et donc quand je clique sur un mot le début de la définition de ce mot est caché par ma barre de navigation horizontal....

Est ce quelqu'un connait un moyen de faire marcher le padding-top sous firefox avec le même comportement que sous ie ?
Ou de changer la position de l'ancre ? (que l'ancre n'aille pas en haut de la page sous firefox)

Voila un exemple illustrant le problème :
http://batraciens.net/css-astuces/zone-fixe-3.htm

Sous IE le texte "s'arrete" au moment ou le menu horizontal commence.
Sous firefox le texte "glisse" sous le menu horizontal (du coup avec une ancre dans la page ca ne marche pas bien)

(j'espere que j'ai ete clair...)
13/04/2006, 16h06
franculo_caoulene

Je pense avoir compris ton problème mais je ne comprends pas l'illustration que tu donnes.
13/04/2006, 16h25
PaladinFr

Sur l'exemple que je donne on voit que l'ascenseur sur IE et sur firefox n'ont pas la même taille.
Sous IE l'ascenseur s'arrete sous la zone figée en haut tandisque que sous firefox la barre va jusqu'en haut de la page.

Alors apparement ca fait pareil sous IE et firefox car la zone figée en haut à une couleur de fond et sous firefox le texte glisse dessous (donc on ne le voit plus il est masqué par la couleur de fond).
Si il n'y avait pas cette couleur de fond on verrait le texte passer sous la zone figée en haut de l'ecran (effet que l'on n'a pas sous IE).

Mais c'est vrai que l'exemple est pas forcément très bon car la zone figée du haut n'est pas tres grande et qu'il n'y a pas d'ancre...
Mais je n'en ai pas d'autre sous la main :(

hum... J'ai compris que les deux premières lignes... Mais je tente quand même une réponse :D

Essaye ç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
36
37
38
39
40
41
42
43
 
html {
    overflow: hidden;
    height: 100%;
}
 
body {
    overflow: auto;
    height: 100%;
  margin: 22px 0% 0% 10% ;
  padding:0
}
 
.content  {
  height: 100%;
  overflow: auto}
 
.menu1   {
  position: absolute;
  top: 0;
  left: 0;
  width: 111%;
  height: 20px;
  background-color:#AFB7D3;
  border-bottom: solid black 1px ;
  text-align:center}
 
.menu2   {
  position: absolute;
  top: 20px;
  left: 0;
  width: 10%;
  height: 100%;
  background-color:#AFB7D3;
  border-right: solid black 1px}
 
.menu-coin   {
  position: absolute;
  top: 10px;
  left: 0;
  width: 10%;
  height: 31px;
  background-color:#AFB7D3}

Sans faire de distinction entre IE et FF, si tu veux le même comportement.

18/04/2006, 10h17
PaladinFr

Merci :)
je vais essayer ca cette semaine (je suis un poil débordé :( )

J'ai essayé et ca marche pas :(
ou bien je n'ai pas réussi à mettre ca en oeuvre.

Voila le code de ma page (expurgé au maximum)
La page glossaire2.html

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
 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="STYLESHEET" type="text/css" href="test.css">
 <!--[if IE]>
 <LINK href="test_IE.css" type=text/css rel=stylesheet>
 <![endif]-->
</head>
<body style="PADDING-TOP:55px">
<!--element fixe horizontal (barre du haut) -->
<div class="fixed" bgcolor="White" style="z-index:4">
 <table style="position:absolute;top:-2px;" width="100%" bgcolor="White">
   <tr><td style="background:#F9F9FB;border-bottom:1px solid gray;>
      <font color="black">Vous êtes ici : </font><font color="red">Glossaire</font>
    </td></tr>
 </table>
 <div  class="onglets-niveau3" bgcolor="White" style="top:30px;">
  <table  border="0" width="400" cellspacing="0" cellpadding="0">
   <tr><td align="center">A</td></tr>
   <!--liste des lettres, ce sont des liens normalement-->
  </table>     
 </div>
</div> 
<!-- element fixe vertical (barre de gauche) -->
<div class="fixed" style="top:60px">
    <div  class="glossaire-mots">
      <a href="glossaire2.html#mot1" target=_self>mot 1</a><br>
      <a href="glossaire2.html#mot2" target=_self>mot 2</a><br>
      <a href="glossaire2.html#mot3" target=_self>mot 3</a><br>
      <a href="glossaire2.html#mot4" target=_self>mot 4</a><br>
    </div> 
</div> 
<!-- zone pouvant "bouger" -->
<div class="content" style="z-index:0">
  <div class="onglets-niveau3" style="position:absolute;left:300px;border-left:1px solid gray;">
  <div  style="position:relative;left:5px;">
  <ul><a id="mot1">Mot 1</a></ul>
  <p>1er def<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
  <ul><a id="mot2">Mot 2</a></ul>
  <p>2eme def<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
  <ul><a id="mot3">Mot 3</a></ul>
  <p>3eme def<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
  <ul><a id="mot4">Mot 4</a></ul>
  <p>4eme def<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
  </div>
  </div>
</div>
</body>

le code de cimd.css :

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
 
@media screen {
  body>div.fixed {
    position: fixed;
  }
}
div.fixed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.onglets-niveau3 {
  position:absolute;
  left:10px;
  right:15px;
  margin:0px;
  z-index:1;
  text-align:justify;
 }
.glossaire-mots {
  position:absolute;
  top:15px;
  left:30px;
  right:10px;
  margin:0px;
  z-index:1;
  text-align:left;
 }

Et enfin de test_IE.css (css qui ne s'execute que sous IE) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
body {
  overflow-y: hidden;
  margin: 0;
 PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 34px 
}
div.content {
  height: 100%;
  overflow: auto;
}
.onglets-niveau3 {
  position:absolute;
  top:0x;
  left:10px;
  right:15px;
  margin:0px;
  z-index:1;
}
.imageIE {
 z-index:-1;
}

J'espere que ca sera plus clair comme ca (j'aurais du commencer par la d'ailleurs)

Sous IE ca marche très bien mais on voit bien le probleme avec les ancres sous firefox