6

I have this HTML source:

<!DOCTYPE html>
<html>
    <head>
        <title>Stylish Web Page</title>
        <style type="text/css">
            body { padding: 0; margin: 0; }
            div.table { display: table;}
            div.tableRow { display: table-row;}
            div.tableCell { display: table-cell;}
            div.contentWrapper { width: 100%; height: 760px; position: relative;
                margin: 0 auto; padding: 0; }
            div.footerBar { width: inherit; height: 60px; background-image: url("BarBG.png");
                background-repeat: repeat-x; position: absolute; bottom: 0; }
        </style>
    </head>
    <body>
        <div class="table contentWrapper">
            <div class="tableRow">&#160;</div>
            <div class="footerBar">&#160;</div>
        </div>
    </body>
</html>

The footer is supposed to appear at the bottom of the page, and it does so in Opera and Chrome; However, in Firefox, there's a lot of empty room following the footer. What am I doing wrong? How to fix it?

Here's a screenshot: The blue highlight is the footer.

(Please note: "position: fixed" is not what I want; I want the footer to show up at the bottom of the page, not the browser window.)

Mr. X
  • 706
  • 12
  • 23
  • Have you try with another doctype because DOCTYPE HTML is NOT a standard yet ? [http://www.w3.org/QA/2002/04/valid-dtd-list.html](http://www.w3.org/QA/2002/04/valid-dtd-list.html) – Jean-Charles Sep 06 '11 at 14:55
  • may be you want an sticky footer http://ryanfait.com/sticky-footer/ – sandeep Sep 06 '11 at 15:02
  • 1
    @Jean-Charles: I doubt it would make much difference in a recent browser; they aren't going to treat a DOCTYPE wrongly just because the standard isn't complete. – Matthew Wilson Sep 06 '11 at 15:07
  • @jame-Charles; html5 doctype means it's not accept by the w3c but browsers implement it. – sandeep Sep 06 '11 at 15:12
  • @Matthew and Sandepp: Ok html 5 doctype is support by recents browsers (https://developer.mozilla.org/en/HTML/HTML5), but we don't know the version of the FF used. I just try to eliminate bad solutions... I've never said this is the solution. Ajith, Wich version do you use ? – Jean-Charles Sep 06 '11 at 15:36
  • Interesting. If I comment out the `display: table;` then the background position appears where I'd expect it to. I don't know much about `display: table` and how it should affect things, though. Digging in, it looks like you might be running into [this problem](http://stackoverflow.com/questions/7256004/firefox-issue-with-displayabsolute-in-a-table-cell). – Matt Gibson Sep 06 '11 at 16:24
  • I'm also suspecting a relation to [this Firefox bug](https://bugzilla.mozilla.org/show_bug.cgi?id=35168#c11), though technially that doesn't seem to relate to `table` elements, only cells. But your problem certainly seems to be showing an incompatibility between `display: table` and `position: relative` in Firefox. Slightly icky though it is, [turning your single table/wrapper into a separate table and wrapper div, and positioning the div while leaving the table as-is seems to produce a decent result](http://jsfiddle.net/gothick/bcGLp/3/). – Matt Gibson Sep 06 '11 at 16:36

2 Answers2

6

The issue in Firefox is caused by display:table. Essentially you are telling Firefox to treat this element as a table.

In Firefox position:relative is not supported on table elements. It isn't a bug though, as in the spec the treatment of position:relative table elements is undefined.

This means that in your example the footer is being positioned relative to the window and not the container.

One solution is to use display:block instead or just remove the display rule entirely. You will see the footer will drop down to its rightful place.

A second solution would be to wrap another non-table div around the container and set position:relative to that instead.

A third option is to add position:relative to the body. Live example: http://jsfiddle.net/tw16/NbVTH/

body {
    padding: 0;
    margin: 0;
    position: relative; /* add this */
}
tw16
  • 29,215
  • 7
  • 63
  • 64
0

What version of FF do you have? In FF 6 it displays correctly: http://screencast.com/t/zAjuG8FP99nX

Have you cleared the cache? Maybe there's something left from previous versions of the page.

Did you close the Firebug window? That pushes the content up when open.

Later edit: the last line means: "after you close firebug, scrollbars disappear and div is at the bottom"

Marius Stuparu
  • 474
  • 3
  • 14
  • Seems to work for me in Firefox 3.5.5, too, unless I'm misunderstanding what's needed. ([jsfiddle](http://jsfiddle.net/gothick/bcGLp/1/)). – Matt Gibson Sep 06 '11 at 16:10
  • Actually, I take that back. [Now I've put a background colour on the content wrapper](http://jsfiddle.net/gothick/bcGLp/2/), I think I can see the empty space @Ajith is talking about. Works fine in other browsers (even including IE!), though. – Matt Gibson Sep 06 '11 at 16:17
  • The screenshot you've linked to quite clearly shows vertical scrollbars. If you scroll down to the bottom, you will see just as in the OP's screenshot the footer is no longer at the bottom. – tw16 Sep 06 '11 at 21:40
  • @tw16 - scrollbars appear only as long as firebug is open. when i close it, no scrollbars and div goes to bottom – Marius Stuparu Sep 19 '11 at 12:57
  • @marius: I think you are missing the point of the question. The reason there are no scrollbars when Firebug is closed, is because you must have a window that is taller than 760px. However, some people might have smaller screens or might be browsing in a smaller window. The **main issue** is that when you have to scroll down the footer is not stuck to the bottom of the container e.g. For you when Firebug is open if you scroll to the bottom you will see that the footer stays in the middle of the page. – tw16 Sep 19 '11 at 16:01