Position: bottom for Firefox

Forum Moderators: not2easy

Message Too Old, No Replies

Position: bottom for Firefox

Works right for Chrome and IE, but not FF

GoNC

2:51 am on Mar 9, 2014 (gmt 0)

I have something like:

// CSS
.med_rect {
width: 300px;
height: 250px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #E3E3E3;
background: #F5F7F9
}

// HTML
<table>
. <tr>
. . <td>
. . . <div style="height: 1000px">
. . . . Text
. . . </div>
. . </td>

. . <td>
. . . <div class="med_rect"
. . . . style="position: absolute;
. . . . . bottom: 0;
. . . . . margin: 10px 0 100px 0">
. . . . . . Text 2
. . . </div>
. . </td>
. </tr>
</table>

(I've added . for indention in an attempt to make it a little easier to read)

In Chrome and IE, this positions the <div> in the second cell at the bottom, then pushes it up by 100px, like I expect; the inline "margin" style overrides the class.

In FF, though, the <div> ends up 35px BELOW the bottom of the table; meaning, instead of being 100px above the bottom, it's 35px below.

The doctype is:

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Any suggestions on how to fix this?

Fotiman

4:20 am on Mar 9, 2014 (gmt 0)

Looks correct to me in Firefox. Are you sure you don't have another style triggering that effect? Here's a jsfiddle showing it (which works for me):
[jsfiddle.net...]

lucy24

6:53 am on Mar 9, 2014 (gmt 0)

Why are you futzing around with the div at all? The one unequivocal advantage of a table cell is that you can set a "vertical-align" property on it and be confident it will behave as intended.

GoNC

9:32 am on Mar 9, 2014 (gmt 0)

Lucy, if I understand correctly, I could use vertical-align to align EVERYTHING in the cell to the bottom, right? In practice, I actually have quite a bit of content in the cell, and only want this one section (a Google ad) to be aligned at the bottom.

Fotiman, thanks, I always forget about jsfiddle (helpful site, I should use it more). It helped me to narrow down the exact problem, so thanks again for that. It turns out that I had used "position: relative" on the table cell, and while that's recognized by Chrome and IE, it's not recognized by FF.

The only solution I could figure was to use yet another DIV inside of the TD, like so:

. . <td>
. . . <div style="position: relative">
. . . . <div class="med_rect"
. . . . . style="position: absolute;
. . . . . . bottom: 0;
. . . . . . margin: 10px 0 100px 0">
. . . . . . . Text 2
. . . . </div>
. . . </div>
. . </td>

It seems like a bit of overkill to use a DIV tag inside of a cell, when I should just be able to apply it to the cell, but I guess that positioning a cell really isn't standard, anyway.

lucy24

8:12 pm on Mar 9, 2014 (gmt 0)

Then again, you could set the inner <div> to "display: table-cell".

Vertical alignment is finicky by nature, because browsers simply don't expect it. Web pages are thought of as endless scrolls, where each thing comes hot on the heels of the previous thing. So horizontal alignment is a snap; vertical alignment is a huge bother. You can easily end up with elements nested three deep just to get the verticals right.

:: now back to vexatious question of why elements e and f refuse to stay together when page overflows, even though I've done the identical thing countless times before ::

rainborick

2:47 am on Mar 10, 2014 (gmt 0)

You're right that positioning within table cells is not the same as other block-level elements. The W3C rules for how browsers are supposed to render tables leaves a lot to the discretion of the browser - especially when it comes to calculating heights. And since it can take several passes through the mark-up for a browser to render any table, the vertical positioning of the contents is just bound to be unreliable unless you resort to methods like the nested <div>s you used, which gives the browser a fixed point of reference for the boundaries of the container - at least in terms of cross-browser compatibility.

In the end, you're probably going to want to keep using absolute positioning here. The CSS 'vertical-align' property uses line-boxes for reference. It only works on inline elements, and so it's not the same as the HTML 'align' attribute. My best suggestion is to eliminate the table if at all possible.