Databases
StackOverflow2013
Postsdbo
PODifferent css rendering for span inside td with FF3.5 versus FF3.0
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODifferent css rendering for span inside td with FF3.5 versus FF3.0
    text
    copied!<p>I have a web page that has a table and inside one of the td is span that uses a smaller font, float right to place it to the far right, and a negative margin-top, so it is aligned with larger text in the td.</p> <p>With Firefox 3.0 it works fine, but I just updated to Firefox 3.5 and the margin is moving the text up too far.</p> <p>I have another page, where there are two span entries, again the second with a smaller font and negative margin and shows the same issue.</p> <p>On a third page, with a h3 followed by a span, a smaller font and negative margin, it works fine in Firefox 3.5.</p> <p>I installed Safari today and it acts the same as Firefox 3.5. I don't have an issue with IE, as I have conditional CSS to handle the different IE versions (IE 7 uses a negative margin, but IE 8 uses a small positive margin).</p> <p>Questions (finally :^):</p> <ul> <li><p><em>Is anyone aware of changes in rendering for span and negative margins for Firefox 3.5?</em></p></li> <li><p><em>How else could I write the HTML or CSS, to obtain the same result w/o browser specific hacks?</em></p></li> </ul> <p>For the second case, I changed it from two spans, to an h3 and span, like the third case. The first case really is tabular data, so I'm using the table. Here's a fragment of the issue:</p> <pre><code>&lt;div id="content"&gt; &lt;table id="events2" cellspacing="0"&gt; &lt;tr class="month"&gt; &lt;td&gt;August 2009&lt;span class="gotop"&gt;(go to top)&lt;/span&gt; &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt; &lt;td&gt; A table row&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>The pertinent (I hope) CSS is:</p> <pre><code>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; } </code></pre> <p>Thanks in advance! PCM</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload