Différents rendus CSS pour span à l'intérieur de td avec FF3.5 par rapport à FF3.0

Question

J'ai une page web qui a une table et à l'intérieur d'un td est span qui utilise une police plus petite, flotter à droite pour le placer à l'extrême droite , et un margin-top négatif, donc il est aligné avec un texte plus grand dans le td.

Avec Firefox 3.0, cela fonctionne très bien, mais je viens de mettre à jour vers Firefox 3.5 et la marge déplace le texte trop loin.

J'ai une autre page, où il y a deux entrées d'étendue, encore une fois la seconde avec une police plus petite et une marge négative et montre le même problème.

Sur une troisième page, avec un h3 suivi d'un span, d'une police plus petite et d'une marge négative, cela fonctionne très bien dans Firefox 3.5.

J'ai installé Safari aujourd'hui et il agit comme Firefox 3.5. Je n'ai pas de problème avec IE, car j'ai un CSS conditionnel pour gérer les différentes versions d'IE (IE 7 utilise une marge négative, mais IE 8 utilise une petite marge positive).

Questions (enfin: ^):

• t-il quelqu'un au courant des changements dans le rendu de la portée et des marges négatives pour Firefox 3.5? Comment sinon pourrais-je écrire le HTML ou le CSS, pour obtenir le même résultat sans des hacks spécifiques au navigateur?

Pour le second cas, je l'ai changé de deux travées, à une h3 et la durée, comme le troisième cas. Le premier cas est vraiment des données tabulaires, donc j'utilise la table. Voici un fragment de la question:

<div id="content"> 
<table id="events2" cellspacing="0"> 
<tr class="month"> 
<td>August 2009<span class="gotop">(go to top)</span> 
</td></tr> 
<tr> 
<td> 
A table row</td> 
</tr> 
</table> 

Le pertinent (je l'espère) CSS est:

div#content { 
    margin: 0; 
    padding: 0 
    width:100%; 
    background: white; 
    color: black; 
    font-size: 80%; 
} 
#events2 td { 
    padding: 4px; 
    border-bottom: 2px solid #BBB; 
} 
#events2 tr.month td { 
    padding: 0.125em 0; 
    font-size: 1.2em; 
    text-align: center; 
    border-top: 3px solid black; 
    border-bottom: 2px solid #BBB; 
} 
#events2 tr.month td .gotop { 
    float: right; 
    font-size: 0.6em; 
    margin-top: -1.4em; 
    padding-bottom: 0.3em; 
} 

Merci à l'avance! PCM

Answer 1

Firefox 3.5.2 est juste une amélioration de la version bêta. Je ne doute pas que cela puisse être un problème avec Firefox, mais si Safari le fait aussi, c'est probablement votre code.

Découvrez csszengarden.com, le "meilleur" moyen de concevoir un site web.

Vous devriez également vous familiariser avec les dispositions de table. Je n'ai jamais entendu quelqu'un mettre une marge négative sur un td, ou même un flotteur. Les tables sont posées rigoureusement, donc si vous faites un td 200px de large, c'est le nombre de tous les autres qui seront (sauf si vous imbriquez des tables les unes dans les autres).

Je dirais qu'il suffit de laisser tomber les tables, sauf si elles sont vraiment nécessaires.

Et pouvez-vous envoyer un lien vers la page afin que je puisse voir ce qui ne va pas (j'utilise Safari 4.x developer sur OS X).

Answer 2

Le rendu entre Firefox 3.0 et 3.5 a été très cohérent, selon mon expérience. Je pense que le problème ici est l'emplacement du SPAN flottant dans le balisage. En supposant que je comprends correctement ce que vous essayez d'obtenir, je placerais le SPAN flottant avant le contenu du TD qui doit être rendu dans le flux de documents normal.

J'ai créé une page de test rapide (en utilisant XHTML Transitional doctype) et implémenté les changements suivants dans votre code. Je vois un rendu cohérent dans Firefox 3.0, Firefox 3.5 et Safari 4.0 (tous sur Windows).

HTML:

<div id="content"> 
    <table id="events2" cellspacing="0"> 
     <tr class="month"> 
      <td><span class="gotop">(go to top)</span>August 2009</td> 
     </tr> 
     <tr> 
      <td>A table row</td> 
     </tr> 
    </table> 
</div> 

CSS:

#events2 tr.month td .gotop { 
    float: right; 
    font-size: 0.6em; 
    /*margin-top: -1.4em;*/ /* REMOVED */ 
    /*padding-bottom: 0.3em;*/ /* REMOVED */ 
    margin-left: 5px; /* ADD */ 
} 

Answer 3

La combinaison du texte centré dans le td et le flotteur droit et la marge négative sur la durée sont rendus différemment dans les navigateurs. Faire flotter quelque chose à droite signifie le déplacer vers la droite et avoir du contenu après l'affichage vers la gauche. Vous faites flotter le texte à droite, puis utilisez la marge négative pour le déplacer vers la ligne de base du texte précédent.

Déplacez l'intervalle avant le texte vers la gauche et il s'alignera correctement sans la marge négative.

<td><span class="gotop">(go to top)</span>August 2009</td> 

#events2 tr.month td .gotop { 
    float: right; 
    font-size: 0.6em; 
    padding-bottom: 0.3em; 
}