Different css rendering for span inside td with FF3.5 versus FF3.0

Question

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.

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.

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.

On a third page, with a h3 followed by a span, a smaller font and negative margin, it works fine in Firefox 3.5.

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).

Questions (finally :^):

• Is anyone aware of changes in rendering for span and negative margins for Firefox 3.5?

• How else could I write the HTML or CSS, to obtain the same result w/o browser specific hacks?

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:

<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>

The pertinent (I hope) CSS is:

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;
}

Thanks in advance! PCM

Answer 1

Firefox 3.5.2 is just an improvement to the beta. I would not doubt that this could be something wrong with Firefox, but if Safari does it too it is likely your code.

Check out csszengarden.com, the "better" way to design a website.

Also you should be familiar with table layouts. I have never heard of someone putting a negative margin on a td, or even a float. Tables are laid our rigorously, so if you make one td 200px wide, that is how many all others will be (unless you nest tables inside one another).

I would say just drop the tables unless they are really needed.

And can you send a link to the page so I may see what exactly is wrong (I use Safari 4.x developer on OS X).

Answer 2

Rendering between Firefox 3.0 and 3.5 has been very consistent, in my experience. I think the issue here is the location of the floated SPAN in the markup. Assuming that I am correctly understanding what you are trying to achieve, I would place the floated SPAN before the content of the TD that is to be rendered in the normal document flow.

I created a quick test page (using XHTML Transitional doctype) and implemented the following changes to your code. I am seeing consistent rendering in Firefox 3.0, Firefox 3.5, and Safari 4.0 (all on 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

The combination of the centered text in the td and the right float and negative margin on the span are being rendered differently in the browsers.

Floating something right mean to move it to the right and have content after it displayed to the left. You are floating the text right and then using the negative margin to move it to the baseline of the text before it.

Move the span before the text to the left and it will line up correctly with out the negative margin.

<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;
}