6 Replies Latest reply on Jul 26, 2007 12:33 PM by Newsgroup_User

    content disappears below footer in Firefox and Netscape

    Level 7
      I have a layout with the footer positioned at the bottom of the browser
      window. When the content exceeds the space available in the browser window
      the content pushes down and the footer remains at the bottom below the
      content. This works in IE. However, in the Firefox and Netscape, some of
      the content disappears below the footer.

      For example, I added about 7 paragraphs of placeholder text underneath the
      login boxes (link provided below) and Firefox and Netscape pushes the
      content down to about 3 paragraphs and then the remaining paragraphs are
      hidden behind the footer.


      I have the following style rule that should prevent this from happening:

      #content {margin-bottom:82px;}

      and

      <br style="clear:both" />

      82px is the height of the image placed within the footer.

      Here is a page to see the example:
      http://www.clodysseyhighschool.com/duvallogin.aspx

      In order to see the problem it will be necessary to lower the monitor
      resolution.


      Thanks for any help.


        • 1. Re: content disappears below footer in Firefox and Netscape
          Level 7
          The problem is that you are not understanding how absolute positioning
          works. Elements that are absolutely positioned are completely removed from
          the normal flow. This means that other page elements behave as if the
          absolutely positioned element is not even there. That's what you are seeing
          in FF/NN and it's the correct behavior. The float clearing won't help
          because it's not a float issue. The bottom margin won't help because
          margins do not affect absolutely positioned elements.

          The best way to manage this would be to discard the sense that you want this
          graphc to be at the bottom of the viewport, and let it just sit below the
          contents. By removing the positioning from the footer, you will allow it to
          do that. Then your margins will kick in.

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.dreamweavermx-templates.com - Template Triage!
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
          ==================


          "-D-" <nobody@nospam.com> wrote in message
          news:f8abep$dft$1@forums.macromedia.com...
          >I have a layout with the footer positioned at the bottom of the browser
          >window. When the content exceeds the space available in the browser window
          >the content pushes down and the footer remains at the bottom below the
          >content. This works in IE. However, in the Firefox and Netscape, some of
          >the content disappears below the footer.
          >
          > For example, I added about 7 paragraphs of placeholder text underneath the
          > login boxes (link provided below) and Firefox and Netscape pushes the
          > content down to about 3 paragraphs and then the remaining paragraphs are
          > hidden behind the footer.
          >
          >
          > I have the following style rule that should prevent this from happening:
          >
          > #content {margin-bottom:82px;}
          >
          > and
          >
          > <br style="clear:both" />
          >
          > 82px is the height of the image placed within the footer.
          >
          > Here is a page to see the example:
          > http://www.clodysseyhighschool.com/duvallogin.aspx
          >
          > In order to see the problem it will be necessary to lower the monitor
          > resolution.
          >
          >
          > Thanks for any help.
          >
          >


          • 2. Re: content disappears below footer in Firefox and Netscape
            Level 7
            And by the way, monitor resolution has nothing to do with it (at this
            stage). It's browser viewport size. You will see the effect by just making
            your browser's height smaller.

            --
            Murray --- ICQ 71997575
            Adobe Community Expert
            (If you *MUST* email me, don't LAUGH when you do so!)
            ==================
            http://www.dreamweavermx-templates.com - Template Triage!
            http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
            http://www.dwfaq.com - DW FAQs, Tutorials & Resources
            http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
            ==================


            "-D-" <nobody@nospam.com> wrote in message
            news:f8abep$dft$1@forums.macromedia.com...
            >I have a layout with the footer positioned at the bottom of the browser
            >window. When the content exceeds the space available in the browser window
            >the content pushes down and the footer remains at the bottom below the
            >content. This works in IE. However, in the Firefox and Netscape, some of
            >the content disappears below the footer.
            >
            > For example, I added about 7 paragraphs of placeholder text underneath the
            > login boxes (link provided below) and Firefox and Netscape pushes the
            > content down to about 3 paragraphs and then the remaining paragraphs are
            > hidden behind the footer.
            >
            >
            > I have the following style rule that should prevent this from happening:
            >
            > #content {margin-bottom:82px;}
            >
            > and
            >
            > <br style="clear:both" />
            >
            > 82px is the height of the image placed within the footer.
            >
            > Here is a page to see the example:
            > http://www.clodysseyhighschool.com/duvallogin.aspx
            >
            > In order to see the problem it will be necessary to lower the monitor
            > resolution.
            >
            >
            > Thanks for any help.
            >
            >


            • 3. Re: content disappears below footer in Firefox and Netscape
              Level 7
              Hmmm...okay, well, I was using the same idea discussed in the following
              article to position a footer at the bottom of the page or the browser window
              (whichever is lower).

              http://www.alistapart.com/articles/footers

              I do understand what you are saying, but it seems odd that Firefox and
              Netscape push the content down some. It just stops after several
              paragraphs. If I understand correctly, based on your comments, it shouldn't
              work at all. Meaning as soon as the content reached the footer is would
              disappear below, which is not the case.

              Is the article incorrect? Is there not a way to position a footer at the
              bottom of the browser window or at the bottom of the page depending on the
              which is lower?

              Thanks.
              Regards.


              "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
              news:f8ajlt$nde$1@forums.macromedia.com...
              > And by the way, monitor resolution has nothing to do with it (at this
              > stage). It's browser viewport size. You will see the effect by just
              > making your browser's height smaller.
              >
              > --
              > Murray --- ICQ 71997575
              > Adobe Community Expert
              > (If you *MUST* email me, don't LAUGH when you do so!)
              > ==================
              > http://www.dreamweavermx-templates.com - Template Triage!
              > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              > http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
              > ==================
              >
              >
              > "-D-" <nobody@nospam.com> wrote in message
              > news:f8abep$dft$1@forums.macromedia.com...
              >>I have a layout with the footer positioned at the bottom of the browser
              >>window. When the content exceeds the space available in the browser
              >>window the content pushes down and the footer remains at the bottom below
              >>the content. This works in IE. However, in the Firefox and Netscape,
              >>some of the content disappears below the footer.
              >>
              >> For example, I added about 7 paragraphs of placeholder text underneath
              >> the login boxes (link provided below) and Firefox and Netscape pushes the
              >> content down to about 3 paragraphs and then the remaining paragraphs are
              >> hidden behind the footer.
              >>
              >>
              >> I have the following style rule that should prevent this from happening:
              >>
              >> #content {margin-bottom:82px;}
              >>
              >> and
              >>
              >> <br style="clear:both" />
              >>
              >> 82px is the height of the image placed within the footer.
              >>
              >> Here is a page to see the example:
              >> http://www.clodysseyhighschool.com/duvallogin.aspx
              >>
              >> In order to see the problem it will be necessary to lower the monitor
              >> resolution.
              >>
              >>
              >> Thanks for any help.
              >>
              >>
              >
              >


              • 4. Re: content disappears below footer in Firefox and Netscape
                Level 7
                Alistapart often contains suggestions that are impractical although
                theoretically accurate. I take their stuff with a grain of salt.

                > Is there not a way to position a footer at the bottom of the browser
                > window or at the bottom of the page depending on the which is lower?

                There are two reliable ways that I know of -

                1. Use frames. Ew.
                2. Use negative margins on an absolutely positioned element, e.g.,

                <div style="height:50px;margin-bottom:-50px;position:absolute;bottom:0;">

                In other words, the element is placed right at the bottom and then backed
                off by an amount equal to the height of the element. But that would mean
                I'd have to use negative margins, and they give me the willies.

                --
                Murray --- ICQ 71997575
                Adobe Community Expert
                (If you *MUST* email me, don't LAUGH when you do so!)
                ==================
                http://www.dreamweavermx-templates.com - Template Triage!
                http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                ==================


                "-D-" <nobody@nospam.com> wrote in message
                news:f8ap9k$123$1@forums.macromedia.com...
                > Hmmm...okay, well, I was using the same idea discussed in the following
                > article to position a footer at the bottom of the page or the browser
                > window (whichever is lower).
                >
                > http://www.alistapart.com/articles/footers
                >
                > I do understand what you are saying, but it seems odd that Firefox and
                > Netscape push the content down some. It just stops after several
                > paragraphs. If I understand correctly, based on your comments, it
                > shouldn't work at all. Meaning as soon as the content reached the footer
                > is would disappear below, which is not the case.
                >
                > Is the article incorrect? Is there not a way to position a footer at the
                > bottom of the browser window or at the bottom of the page depending on the
                > which is lower?
                >
                > Thanks.
                > Regards.
                >
                >
                > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                > news:f8ajlt$nde$1@forums.macromedia.com...
                >> And by the way, monitor resolution has nothing to do with it (at this
                >> stage). It's browser viewport size. You will see the effect by just
                >> making your browser's height smaller.
                >>
                >> --
                >> Murray --- ICQ 71997575
                >> Adobe Community Expert
                >> (If you *MUST* email me, don't LAUGH when you do so!)
                >> ==================
                >> http://www.dreamweavermx-templates.com - Template Triage!
                >> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                >> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                >> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                >> ==================
                >>
                >>
                >> "-D-" <nobody@nospam.com> wrote in message
                >> news:f8abep$dft$1@forums.macromedia.com...
                >>>I have a layout with the footer positioned at the bottom of the browser
                >>>window. When the content exceeds the space available in the browser
                >>>window the content pushes down and the footer remains at the bottom below
                >>>the content. This works in IE. However, in the Firefox and Netscape,
                >>>some of the content disappears below the footer.
                >>>
                >>> For example, I added about 7 paragraphs of placeholder text underneath
                >>> the login boxes (link provided below) and Firefox and Netscape pushes
                >>> the content down to about 3 paragraphs and then the remaining paragraphs
                >>> are hidden behind the footer.
                >>>
                >>>
                >>> I have the following style rule that should prevent this from happening:
                >>>
                >>> #content {margin-bottom:82px;}
                >>>
                >>> and
                >>>
                >>> <br style="clear:both" />
                >>>
                >>> 82px is the height of the image placed within the footer.
                >>>
                >>> Here is a page to see the example:
                >>> http://www.clodysseyhighschool.com/duvallogin.aspx
                >>>
                >>> In order to see the problem it will be necessary to lower the monitor
                >>> resolution.
                >>>
                >>>
                >>> Thanks for any help.
                >>>
                >>>
                >>
                >>
                >
                >


                • 5. Re: content disappears below footer in Firefox and Netscape
                  Level 7
                  Yeah, frames is out. I'm not going there.

                  I've seen the example of the using a negative margin to position a footer at
                  the bottom of the browser
                  window or at the bottom of the page and I've attempted that implementation,
                  but came up with some inconsistent results.

                  Hmmm? okay, well, I'll see what I can come up with?

                  Thanks for your help and input.

                  I appreciate it.
                  Regards.


                  "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                  news:f8apng$1j3$1@forums.macromedia.com...
                  > Alistapart often contains suggestions that are impractical although
                  > theoretically accurate. I take their stuff with a grain of salt.
                  >
                  >> Is there not a way to position a footer at the bottom of the browser
                  >> window or at the bottom of the page depending on the which is lower?
                  >
                  > There are two reliable ways that I know of -
                  >
                  > 1. Use frames. Ew.
                  > 2. Use negative margins on an absolutely positioned element, e.g.,
                  >
                  > <div style="height:50px;margin-bottom:-50px;position:absolute;bottom:0;">
                  >
                  > In other words, the element is placed right at the bottom and then backed
                  > off by an amount equal to the height of the element. But that would mean
                  > I'd have to use negative margins, and they give me the willies.
                  >
                  > --
                  > Murray --- ICQ 71997575
                  > Adobe Community Expert
                  > (If you *MUST* email me, don't LAUGH when you do so!)
                  > ==================
                  > http://www.dreamweavermx-templates.com - Template Triage!
                  > http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  > http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  > http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                  > ==================
                  >
                  >
                  > "-D-" <nobody@nospam.com> wrote in message
                  > news:f8ap9k$123$1@forums.macromedia.com...
                  >> Hmmm...okay, well, I was using the same idea discussed in the following
                  >> article to position a footer at the bottom of the page or the browser
                  >> window (whichever is lower).
                  >>
                  >> http://www.alistapart.com/articles/footers
                  >>
                  >> I do understand what you are saying, but it seems odd that Firefox and
                  >> Netscape push the content down some. It just stops after several
                  >> paragraphs. If I understand correctly, based on your comments, it
                  >> shouldn't work at all. Meaning as soon as the content reached the footer
                  >> is would disappear below, which is not the case.
                  >>
                  >> Is the article incorrect? Is there not a way to position a footer at the
                  >> bottom of the browser window or at the bottom of the page depending on
                  >> the which is lower?
                  >>
                  >> Thanks.
                  >> Regards.
                  >>
                  >>
                  >> "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                  >> news:f8ajlt$nde$1@forums.macromedia.com...
                  >>> And by the way, monitor resolution has nothing to do with it (at this
                  >>> stage). It's browser viewport size. You will see the effect by just
                  >>> making your browser's height smaller.
                  >>>
                  >>> --
                  >>> Murray --- ICQ 71997575
                  >>> Adobe Community Expert
                  >>> (If you *MUST* email me, don't LAUGH when you do so!)
                  >>> ==================
                  >>> http://www.dreamweavermx-templates.com - Template Triage!
                  >>> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                  >>> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                  >>> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                  >>> ==================
                  >>>
                  >>>
                  >>> "-D-" <nobody@nospam.com> wrote in message
                  >>> news:f8abep$dft$1@forums.macromedia.com...
                  >>>>I have a layout with the footer positioned at the bottom of the browser
                  >>>>window. When the content exceeds the space available in the browser
                  >>>>window the content pushes down and the footer remains at the bottom
                  >>>>below the content. This works in IE. However, in the Firefox and
                  >>>>Netscape, some of the content disappears below the footer.
                  >>>>
                  >>>> For example, I added about 7 paragraphs of placeholder text underneath
                  >>>> the login boxes (link provided below) and Firefox and Netscape pushes
                  >>>> the content down to about 3 paragraphs and then the remaining
                  >>>> paragraphs are hidden behind the footer.
                  >>>>
                  >>>>
                  >>>> I have the following style rule that should prevent this from
                  >>>> happening:
                  >>>>
                  >>>> #content {margin-bottom:82px;}
                  >>>>
                  >>>> and
                  >>>>
                  >>>> <br style="clear:both" />
                  >>>>
                  >>>> 82px is the height of the image placed within the footer.
                  >>>>
                  >>>> Here is a page to see the example:
                  >>>> http://www.clodysseyhighschool.com/duvallogin.aspx
                  >>>>
                  >>>> In order to see the problem it will be necessary to lower the monitor
                  >>>> resolution.
                  >>>>
                  >>>>
                  >>>> Thanks for any help.
                  >>>>
                  >>>>
                  >>>
                  >>>
                  >>
                  >>
                  >
                  >


                  • 6. Re: content disappears below footer in Firefox and Netscape
                    Level 7
                    Just give up on having something flush with the bottom of the browser
                    viewport. Remove the positioning altogether and place it underneath the
                    content on the page.

                    --
                    Murray --- ICQ 71997575
                    Adobe Community Expert
                    (If you *MUST* email me, don't LAUGH when you do so!)
                    ==================
                    http://www.dreamweavermx-templates.com - Template Triage!
                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                    ==================


                    "-D-" <nobody@nospam.com> wrote in message
                    news:f8as8j$4kd$1@forums.macromedia.com...
                    > Yeah, frames is out. I'm not going there.
                    >
                    > I've seen the example of the using a negative margin to position a footer
                    > at the bottom of the browser
                    > window or at the bottom of the page and I've attempted that
                    > implementation, but came up with some inconsistent results.
                    >
                    > Hmmm? okay, well, I'll see what I can come up with?
                    >
                    > Thanks for your help and input.
                    >
                    > I appreciate it.
                    > Regards.
                    >
                    >
                    > "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                    > news:f8apng$1j3$1@forums.macromedia.com...
                    >> Alistapart often contains suggestions that are impractical although
                    >> theoretically accurate. I take their stuff with a grain of salt.
                    >>
                    >>> Is there not a way to position a footer at the bottom of the browser
                    >>> window or at the bottom of the page depending on the which is lower?
                    >>
                    >> There are two reliable ways that I know of -
                    >>
                    >> 1. Use frames. Ew.
                    >> 2. Use negative margins on an absolutely positioned element, e.g.,
                    >>
                    >> <div style="height:50px;margin-bottom:-50px;position:absolute;bottom:0;">
                    >>
                    >> In other words, the element is placed right at the bottom and then backed
                    >> off by an amount equal to the height of the element. But that would mean
                    >> I'd have to use negative margins, and they give me the willies.
                    >>
                    >> --
                    >> Murray --- ICQ 71997575
                    >> Adobe Community Expert
                    >> (If you *MUST* email me, don't LAUGH when you do so!)
                    >> ==================
                    >> http://www.dreamweavermx-templates.com - Template Triage!
                    >> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    >> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    >> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                    >> ==================
                    >>
                    >>
                    >> "-D-" <nobody@nospam.com> wrote in message
                    >> news:f8ap9k$123$1@forums.macromedia.com...
                    >>> Hmmm...okay, well, I was using the same idea discussed in the following
                    >>> article to position a footer at the bottom of the page or the browser
                    >>> window (whichever is lower).
                    >>>
                    >>> http://www.alistapart.com/articles/footers
                    >>>
                    >>> I do understand what you are saying, but it seems odd that Firefox and
                    >>> Netscape push the content down some. It just stops after several
                    >>> paragraphs. If I understand correctly, based on your comments, it
                    >>> shouldn't work at all. Meaning as soon as the content reached the
                    >>> footer is would disappear below, which is not the case.
                    >>>
                    >>> Is the article incorrect? Is there not a way to position a footer at
                    >>> the bottom of the browser window or at the bottom of the page depending
                    >>> on the which is lower?
                    >>>
                    >>> Thanks.
                    >>> Regards.
                    >>>
                    >>>
                    >>> "Murray *ACE*" <forums@HAHAgreat-web-sights.com> wrote in message
                    >>> news:f8ajlt$nde$1@forums.macromedia.com...
                    >>>> And by the way, monitor resolution has nothing to do with it (at this
                    >>>> stage). It's browser viewport size. You will see the effect by just
                    >>>> making your browser's height smaller.
                    >>>>
                    >>>> --
                    >>>> Murray --- ICQ 71997575
                    >>>> Adobe Community Expert
                    >>>> (If you *MUST* email me, don't LAUGH when you do so!)
                    >>>> ==================
                    >>>> http://www.dreamweavermx-templates.com - Template Triage!
                    >>>> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    >>>> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    >>>> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
                    >>>> ==================
                    >>>>
                    >>>>
                    >>>> "-D-" <nobody@nospam.com> wrote in message
                    >>>> news:f8abep$dft$1@forums.macromedia.com...
                    >>>>>I have a layout with the footer positioned at the bottom of the browser
                    >>>>>window. When the content exceeds the space available in the browser
                    >>>>>window the content pushes down and the footer remains at the bottom
                    >>>>>below the content. This works in IE. However, in the Firefox and
                    >>>>>Netscape, some of the content disappears below the footer.
                    >>>>>
                    >>>>> For example, I added about 7 paragraphs of placeholder text underneath
                    >>>>> the login boxes (link provided below) and Firefox and Netscape pushes
                    >>>>> the content down to about 3 paragraphs and then the remaining
                    >>>>> paragraphs are hidden behind the footer.
                    >>>>>
                    >>>>>
                    >>>>> I have the following style rule that should prevent this from
                    >>>>> happening:
                    >>>>>
                    >>>>> #content {margin-bottom:82px;}
                    >>>>>
                    >>>>> and
                    >>>>>
                    >>>>> <br style="clear:both" />
                    >>>>>
                    >>>>> 82px is the height of the image placed within the footer.
                    >>>>>
                    >>>>> Here is a page to see the example:
                    >>>>> http://www.clodysseyhighschool.com/duvallogin.aspx
                    >>>>>
                    >>>>> In order to see the problem it will be necessary to lower the monitor
                    >>>>> resolution.
                    >>>>>
                    >>>>>
                    >>>>> Thanks for any help.
                    >>>>>
                    >>>>>
                    >>>>
                    >>>>
                    >>>
                    >>>
                    >>
                    >>
                    >
                    >