Discussion :

[wellser]

salut à tous
j'ai fait un site avec oscommerce, et dans mon header j'ai une image et un texte défilant positionné sur un endroit précis de l'image.
j'avais du adapter mon code en fonction de ie ou ff car le texte ne se plaçait pas de la meme façon selon l'explorateur.
j'ai fait comme ceci:
<STYLE>
<!--
.cadre{position: relative; width: 1006px; /top: -20px; }
.test{position: absolute; top: 42px; left: 710px; right: 15px; }
-->
</STYLE>

le / devant top ( /top: -20px; )fait que cette portion de code n'est lue que par ie
existe un équivalent de ce / concernant ff 3 ?
je crois me rappeler que pour ff il fallait mettre une *
sinon existe-t-il une autre solution à mon probleme?
je trouve assez ennuyeux que ff3 n'afiche pas le code comme les versions precedentes.
merci d'avance pour vos réponses

[Er3van]

Ce que tu fais s'appelle un hack. L'équivalent pour FF c'est le !important.
En principe, ça fais que l'option sera prioritaire sur toute autre (re)définition de cette même propriété, mais IE 6 ne comprenant pas !important, si tu écris :

Code CSS :

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

1
2
3
4
#monDiv {
    height : 400px !important ;
    height : 300px ;
}

Sous IE 6 (uniquement le 6 !) la hauteur sera de 300px contre 400 pour les autres.

Néanmoins, il est fortement conseillé de privilégier l'utilisation de commentaires conditionnels.
Une petite recherche sur Google ou le forum t'en diras d'avantages sur le sujet.

Ceci étant, pour revenir à ton code :

Code CSS :

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

.test{position: absolute; top: 42px; left: 710px; right: 15px; }

C'est incohérent, tu ne dois pas définir left et right, du moins, si tu ne définis pas width (et padding et border à 0), même si ça n'est pas forcément suceptible de faire planter FF3, à voir...

[wellser]

ok oui je ne me rappelais plus du !important
mais existe-t-il un équivalent pour ff3?

en fait si j'ai inclus ce code c'est que c'est la seule solution que j'ai trouvé à mon probleme
je m'explique, mon header ressemble à ça:

sur un écran de plus de 17 pouces mon site est centré dans la page. il fallait donc que mon texte défilant soit recentré lui aussi c'est pourquoi j'ai inclus un div absolute dans un div relatif (je sais pas si je suis tres clair).

mais mon probleme n'est pas là; dans ff mon texte defilant est centré verticalement (au milieu des 2 blablas), dans ie avec le même code le texte défilant est trop bas (collé au blabla du bas), c'est pourquoi j'ai inclus: /top: -20px;
jusqu'à hier tout allait bien mais hier j'ai installé ff3 qui me décale mon texte défilant vers le bas comme dans ie alors qu'il reste bien positionné dans la version pécédente de ff
ce que je voudrais c'est que ce texte soit bien positionné quelle que soit la version de ff

voilà j'ai éssayé d'être le plus clair possible, j'ajoute un peu de code:

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
<!-- header //-->
<!-- Table de centrage -->
<table align="center" cellpadding="0" cellspacing="0"  width="1006">
<tr><td> <!-- Là tu peux mettre une hauteur pour placer une marge en haut ou un texte --></td></tr> <!-- Ligne de marge du haut -->
<tr><td class="FondPage">
 
<!-- debut du code du texte défilant-->
<STYLE>
<!--
.cadre{position: relative; width: 1006px; /top: -20px; }
.test{position: absolute; top: 42px; left: 710px; right: 15px; }
-->
</STYLE><center><DIV class=cadre><DIV class=test>
<marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="3" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()"></marquee>
<marquee class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="3" scrolldelay="0" onMouseOver="this.stop()" onMouseOut="this.start()">
<font color="#ffffff"><strong>ici mon texte defilant</strong></font>
 
</marquee></DIV></DIV></center>
<!-- Fin du code du texte défilant-->
 
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr class="header">
    <td valign="middle"><a href="http://www.monsite/catalog/index.php?osCsid=0730be19a918363be5dfdfef59821403"><img src="images/heading.jpg" border="0" alt="monsite" title=" monsite"></a></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="1">
  <tr class="headerNavigation">
    <td class="headerNavigation">&nbsp;&nbsp;<a href="http://www.monsite.fr" class="headerNavigation">Accueil</a> &raquo; <a href="http://www.monsite.fr/catalog/index.php?osCsid=0730be19a918363be5dfdfef59821403" class="headerNavigation">Boutique</a></td>

[wellser]

je viens de me renseigner sur les commentaires conditionnels, si j'ai bien compris c'est spécifique à ie donc cela n'arrange pas mon probleme...
a moins que ff3 lise le /top: -20px; lui aussi (je viens de percuter) donc en mettant un commentaire conditionnel pour ie ff3 ne le lirait plus.
bon je vais m'y pencher de suite

[Er3van]

Les commentaires conditionnels sont utilisables pour n'importe quel navigateur. Mais effectivement, IE 6 étant le plus souvent fautif, c'est souvent pour lui qu'on patche.

Au passage, FF3 ayant 71/100 au test ACID3, il y a de forte chance que l'erreur vienne.....de ton code et non de FF3.

Mais pourquoi tu utilises du positionnement absolu ? Pas nécessaire.
Au pire passe par une table, efficace et facile d'utilisation.

[wellser]

c'est encore pire!
voicila modif que j'ai faite:

Code :

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

1
2
3
4
5
6
7
8
9
10
<STYLE>
<!--[if IE]>
.cadre{position: relative; width: 1006px;  top: -20px; }
.test{position: absolute; top: 42px; left: 710px; right: 15px; }
<![endif]-->
<!--
.cadre{position: relative; width: 1006px;  top: -20px; }
.test{position: absolute; top: 42px; left: 710px; right: 15px; }
-->
</STYLE>

ça fonctionne avec ie, mais toujours pas avec ff3 (texte toujours décalé vers le bas et position gauche droite qui se place par rapport à la page plein écran).
avec ff2 position verticale ok mais je n'ai qu'un ecran 17" donc je ne peux pas tester les positions gauche droite.

retour à la case départ!

du coup je ne sais pas trop quoi penser du nouveau firefox

[wellser]

merci Er3van de t'interesser à mon problème
je ne saurais pas te dire exactement pourquoi j'utilise du positionnement absolu.
j'ai trouvé cette solution sur un forum et il s'est avéré que c'est la seule qui à réglé mon probleme de positionnement gauche droite si mon écran fait plus de 17".
le probleme est que ce texte defilant doit rester exactement au meme endroit sur l'image, quelle que soit la taille de l'écran et l'explorateur que j'utilise

mais si je comprends bien je peux mettre un commentaire conditionnel pour ff3 indépendement de ff2c'est peut etre la solution à mon probleme

[wellser]

pour mieux répondre a ta question; comme mon texte défilant est sur une image je suis obligé d'utiliser un div pour le positionner mais comme mon site est centré dans une table de 1006px de large quand la fenetre dépasse 1006px de large mon div se place par rapport à elle et n'est plus calé sur mon image. il faut donc que je place ce div par rapport a un autre div de 1006px de large et centré sur la page comme la table.
ça m'a l'air plutot logique je ne vois pas ou sont les incohérences

j'ai beau chercher je ne trouve pas de commentaires conditionnels pour autre chose que ie et moi j'aurais besoin de differencier ff3 des versions précédentes
puisque j'obtiens ce décélage avec ff3 et pas ff2.
je ne trouve pas de solution

[wellser]

bon me revoilà pour m'excuser de mon incompétence
grace à firebug j'ai capté que j'avais mis 2 fois la ligne :
<marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="3" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()"></marquee>
oui je sais c'est bete...j'ai honte...
promis je vais faire penitence! 5 pater et 3 avé mari_rwana