Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: not2easy

Message Too Old, No Replies

Position: bottom for Firefox

Works right for Chrome and IE, but not FF

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

Junior Member

joined:Jan 9, 2014
posts: 150
votes: 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?
4:20 am on Mar 9, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4965
votes: 10


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...]
6:53 am on Mar 9, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12694
votes: 244


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.
9:32 am on Mar 9, 2014 (gmt 0)

Junior Member

joined:Jan 9, 2014
posts: 150
votes: 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.
8:12 pm on Mar 9, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
posts:12694
votes: 244


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 ::
2:47 am on Mar 10, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members