Glue footer to bottom of viewport on short divs & scroll longer d

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I have created a CSS site that has a footer spanning the bottom of the
viewport and whilst I have managed to glue it ot the bottom I have another
div that is behind it even though I think I have set-up the container
properly.

the troublesome page is http://www.cimbian.co.uk/BognorArchers/recurve.htm
and you will see that the bottom of the text in the main pane is obscured.

Basically I have a meta-wrapper for the whole page: and then have the main
content within it. Following on from the content I have the footer and then I
close the meta-wrapper. Something like this:

<div id="meta_wrapper">
<div id="BA_main_content_area" class="clearfix">
<div id="BA_Main_Full_Width">
</div>
<div id="footer">
</div>
</div>

My CSS for this is:

div#meta_wrapper { width: 760px;
margin-left: auto; margin-right: auto;
background-color: yellowgreen;
text-align: left;
position: relative;
min-height: 100%;
height: 100%;
voice-family: "\"}\"";
voice-family: inherit; }

html>body #meta_wrapper { height: auto; }

div#BA_main_content_area {width:760px;
align: center;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;

margin-left: 0;
font-size: 0.85em }

div#BA_Main_Full_Width { border:3px inset yellow;
font-family: Verdana; font-size: 0.85em;
text-align: justify;
position: relative;
width: 500px;
margin: 10px 30px 0px 10px;
padding: 3px;
background-color: #FFFFCC;
float: left; }

div#footer { position: absolute;
bottom: 0;
width:760px;
padding:4px 0;
font-size: 0.6em;
text-align: center;
background-color: white; /* Blue */
border-top:1px solid yellow; border-bottom:2px solid
yellow; margin-top:1.5em;} /* orange border */

As far as I can tell from much web-reading and a couple of books this should
do it.

Any thoughts?
 
Cimbian said:
I have created a CSS site that has a footer spanning the bottom of the
viewport and whilst I have managed to glue it ot the bottom I have
another div that is behind it even though I think I have set-up the
container properly.

the troublesome page is
http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see
that the bottom of the text in the main pane is obscured.
Click to expand...

It looks fine to me.
(Although I can't see this text:
<b>Geof Gibson, Recurve archer</b>)

Perhaps, if this is the problem, it has to do with the positioning of the
<div>s, in order:
relative
not specified
relative
absolute

You may need someone like Murray to answer this one

BTW,
Your CSS intrigues me

What do these do:
voice-family: "\"}\"";
voice-family: inherit;

html>body #meta_wrapper { height: auto; }

I haven't seen these before.
I assume voice-family has to do with software that reads the text
inherit is one I don't know about, as is html>body......

But of course maybe I should also be reading all the good books :-))
 
Trevor,

Thanks for highlighting the bit I forgot to mention... ;-)

Yes the proble in that we cannot see the bottom of the text, in this case:
<b>Geof Gibson, Recurve archer</b>

It is strange, for sure and I know an answer exists, I just can't work it out.

Maybe I should stick to archery ;-)

BTW: I know that it is busted in Netscape due to the box-model problem and I
will fix this one when I get the time but this viewport problem is the one
that is vexing me right now.
 
Caused by your nested divs and the div/styles overlappling
- footer overlaps the the 2 above it

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Trevor,
|
| Thanks for highlighting the bit I forgot to mention... ;-)
|
| Yes the proble in that we cannot see the bottom of the text, in this case:
| <b>Geof Gibson, Recurve archer</b>
|
| It is strange, for sure and I know an answer exists, I just can't work it out.
|
| Maybe I should stick to archery ;-)
|
| BTW: I know that it is busted in Netscape due to the box-model problem and I
| will fix this one when I get the time but this viewport problem is the one
| that is vexing me right now.
|
|
|
| "Trevor L." wrote:
|
| > Cimbian wrote:
| > > I have created a CSS site that has a footer spanning the bottom of the
| > > viewport and whilst I have managed to glue it ot the bottom I have
| > > another div that is behind it even though I think I have set-up the
| > > container properly.
| > >
| > > the troublesome page is
| > > http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see
| > > that the bottom of the text in the main pane is obscured.
| >
| > It looks fine to me.
| > (Although I can't see this text:
| > <b>Geof Gibson, Recurve archer</b>)
| >
| > Perhaps, if this is the problem, it has to do with the positioning of the
| > <div>s, in order:
| > relative
| > not specified
| > relative
| > absolute
| >
| > You may need someone like Murray to answer this one
| >
| > BTW,
| > Your CSS intrigues me
| >
| > What do these do:
| > voice-family: "\"}\"";
| > voice-family: inherit;
| >
| > html>body #meta_wrapper { height: auto; }
| >
| > I haven't seen these before.
| > I assume voice-family has to do with software that reads the text
| > inherit is one I don't know about, as is html>body......
| >
| > But of course maybe I should also be reading all the good books :-))
| > --
| > Cheers,
| > Trevor L.
| > Website: http://tandcl.homemail.com.au
| >
| >
| >
 
Stefan,

Thanks for replying.

I'm sorry but I don't understand what you are saying though as the only div
that is open when I open the footer div is the meta_wrapper.

I close the main_content_area div that has the clearfix class before I open
the footer div.
 
Now this is getting WEIRD!

I thought that I would upload the page with the HTML optimization switched
off so your helpful people could read the source and... Hey presto it now
works okay!

Weird!!

FP2003
 
But your absolute positioning (in your style sheet) forces it over the other 2 divs (hiding BA_Main_Full_Width and
BA_small_picture_right)
- make it relative

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Stefan,
|
| Thanks for replying.
|
| I'm sorry but I don't understand what you are saying though as the only div
| that is open when I open the footer div is the meta_wrapper.
|
| I close the main_content_area div that has the clearfix class before I open
| the footer div.
|
|
|
|
| "Stefan B Rusynko" wrote:
|
| > Caused by your nested divs and the div/styles overlappling
| > - footer overlaps the the 2 above it
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
| > _____________________________________________
| >
| >
| > | Trevor,
| > |
| > | Thanks for highlighting the bit I forgot to mention... ;-)
| > |
| > | Yes the proble in that we cannot see the bottom of the text, in this case:
| > | <b>Geof Gibson, Recurve archer</b>
| > |
| > | It is strange, for sure and I know an answer exists, I just can't work it out.
| > |
| > | Maybe I should stick to archery ;-)
| > |
| > | BTW: I know that it is busted in Netscape due to the box-model problem and I
| > | will fix this one when I get the time but this viewport problem is the one
| > | that is vexing me right now.
| > |
| > |
| > |
| > | "Trevor L." wrote:
| > |
| > | > Cimbian wrote:
| > | > > I have created a CSS site that has a footer spanning the bottom of the
| > | > > viewport and whilst I have managed to glue it ot the bottom I have
| > | > > another div that is behind it even though I think I have set-up the
| > | > > container properly.
| > | > >
| > | > > the troublesome page is
| > | > > http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see
| > | > > that the bottom of the text in the main pane is obscured.
| > | >
| > | > It looks fine to me.
| > | > (Although I can't see this text:
| > | > <b>Geof Gibson, Recurve archer</b>)
| > | >
| > | > Perhaps, if this is the problem, it has to do with the positioning of the
| > | > <div>s, in order:
| > | > relative
| > | > not specified
| > | > relative
| > | > absolute
| > | >
| > | > You may need someone like Murray to answer this one
| > | >
| > | > BTW,
| > | > Your CSS intrigues me
| > | >
| > | > What do these do:
| > | > voice-family: "\"}\"";
| > | > voice-family: inherit;
| > | >
| > | > html>body #meta_wrapper { height: auto; }
| > | >
| > | > I haven't seen these before.
| > | > I assume voice-family has to do with software that reads the text
| > | > inherit is one I don't know about, as is html>body......
| > | >
| > | > But of course maybe I should also be reading all the good books :-))
| > | > --
| > | > Cheers,
| > | > Trevor L.
| > | > Website: http://tandcl.homemail.com.au
| > | >
| > | >
| > | >
| >
| >
| >
 
Doesn't work for me
- bottom still hidden

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Now this is getting WEIRD!
|
| I thought that I would upload the page with the HTML optimization switched
| off so your helpful people could read the source and... Hey presto it now
| works okay!
|
| Weird!!
|
| FP2003
|
| "Stefan B Rusynko" wrote:
|
| > Caused by your nested divs and the div/styles overlappling
| > - footer overlaps the the 2 above it
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
| > _____________________________________________
| >
| >
| > | Trevor,
| > |
| > | Thanks for highlighting the bit I forgot to mention... ;-)
| > |
| > | Yes the proble in that we cannot see the bottom of the text, in this case:
| > | <b>Geof Gibson, Recurve archer</b>
| > |
| > | It is strange, for sure and I know an answer exists, I just can't work it out.
| > |
| > | Maybe I should stick to archery ;-)
| > |
| > | BTW: I know that it is busted in Netscape due to the box-model problem and I
| > | will fix this one when I get the time but this viewport problem is the one
| > | that is vexing me right now.
| > |
| > |
| > |
| > | "Trevor L." wrote:
| > |
| > | > Cimbian wrote:
| > | > > I have created a CSS site that has a footer spanning the bottom of the
| > | > > viewport and whilst I have managed to glue it ot the bottom I have
| > | > > another div that is behind it even though I think I have set-up the
| > | > > container properly.
| > | > >
| > | > > the troublesome page is
| > | > > http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will see
| > | > > that the bottom of the text in the main pane is obscured.
| > | >
| > | > It looks fine to me.
| > | > (Although I can't see this text:
| > | > <b>Geof Gibson, Recurve archer</b>)
| > | >
| > | > Perhaps, if this is the problem, it has to do with the positioning of the
| > | > <div>s, in order:
| > | > relative
| > | > not specified
| > | > relative
| > | > absolute
| > | >
| > | > You may need someone like Murray to answer this one
| > | >
| > | > BTW,
| > | > Your CSS intrigues me
| > | >
| > | > What do these do:
| > | > voice-family: "\"}\"";
| > | > voice-family: inherit;
| > | >
| > | > html>body #meta_wrapper { height: auto; }
| > | >
| > | > I haven't seen these before.
| > | > I assume voice-family has to do with software that reads the text
| > | > inherit is one I don't know about, as is html>body......
| > | >
| > | > But of course maybe I should also be reading all the good books :-))
| > | > --
| > | > Cheers,
| > | > Trevor L.
| > | > Website: http://tandcl.homemail.com.au
| > | >
| > | >
| > | >
| >
| >
| >
 
This is a very tough problem. I suggest you table it....

--
Murray
--------------
MVP FrontPage


Stefan B Rusynko said:
Doesn't work for me
- bottom still hidden

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Now this is getting WEIRD!
|
| I thought that I would upload the page with the HTML optimization
switched
| off so your helpful people could read the source and... Hey presto it
now
| works okay!
|
| Weird!!
|
| FP2003
|
| "Stefan B Rusynko" wrote:
|
| > Caused by your nested divs and the div/styles overlappling
| > - footer overlaps the the 2 above it
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| >
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
| > _____________________________________________
| >
| >
| > | Trevor,
| > |
| > | Thanks for highlighting the bit I forgot to mention... ;-)
| > |
| > | Yes the proble in that we cannot see the bottom of the text, in this
case:
| > | <b>Geof Gibson, Recurve archer</b>
| > |
| > | It is strange, for sure and I know an answer exists, I just can't
work it out.
| > |
| > | Maybe I should stick to archery ;-)
| > |
| > | BTW: I know that it is busted in Netscape due to the box-model
problem and I
| > | will fix this one when I get the time but this viewport problem is
the one
| > | that is vexing me right now.
| > |
| > |
| > |
| > | "Trevor L." wrote:
| > |
| > | > Cimbian wrote:
| > | > > I have created a CSS site that has a footer spanning the bottom
of the
| > | > > viewport and whilst I have managed to glue it ot the bottom I
have
| > | > > another div that is behind it even though I think I have set-up
the
| > | > > container properly.
| > | > >
| > | > > the troublesome page is
| > | > > http://www.cimbian.co.uk/BognorArchers/recurve.htm and you will
see
| > | > > that the bottom of the text in the main pane is obscured.
| > | >
| > | > It looks fine to me.
| > | > (Although I can't see this text:
| > | > <b>Geof Gibson, Recurve archer</b>)
| > | >
| > | > Perhaps, if this is the problem, it has to do with the positioning
of the
| > | > <div>s, in order:
| > | > relative
| > | > not specified
| > | > relative
| > | > absolute
| > | >
| > | > You may need someone like Murray to answer this one
| > | >
| > | > BTW,
| > | > Your CSS intrigues me
| > | >
| > | > What do these do:
| > | > voice-family: "\"}\"";
| > | > voice-family: inherit;
| > | >
| > | > html>body #meta_wrapper { height: auto; }
| > | >
| > | > I haven't seen these before.
| > | > I assume voice-family has to do with software that reads the text
| > | > inherit is one I don't know about, as is html>body......
| > | >
| > | > But of course maybe I should also be reading all the good books
:-))
| > | > --
| > | > Cheers,
| > | > Trevor L.
| > | > Website: http://tandcl.homemail.com.au
| > | >
| > | >
| > | >
| >
| >
| >
Click to expand...
 
Murray said:
This is a very tough problem. I suggest you table it....
Click to expand...

Cimbian,
I thought Murray would reply at some stage.

Murray,
I assume by "table it", you mean that Cimbian should place all the separate
parts, currently <div>s, in rows of a table?
But out of interest, is there anything wrong with the way the <div>s have
been put together, e.g. the relative and absolute positioning ?
I found it diificult to find any reason why it failed. But as you know, I am
still strugling with how to position <div>s :-))
 
That was a bit confusing.

What I meant was to put the attempt on the back burner. It's not an easy
thing to accomplish reliably. To do it, you would have to get involved with
100% height html and body tags, and negative margins, and <shudder> it's
just not worth the effort in my mind.
 
Back
Top