Footer positioning problem

#1

I am trying to imitate - and adapt - an article I read in A List Apart
(http://www.alistapart.com/articles/flexiblelayouts/) to have a page footer
that sticks to the bottom of my content.

It's mostly working well but I'm having a lot of trouble with one aspect:
the boundaries of the content block encapsulate both the text and the
graphic within the block in IE7 but only the text in Firefox 2.0.0.8 and
Opera 9.23. I know this because I draw separate borders around the
content-main and content-footer divs (strictly for diagnostic purposes) and
the content-main div border cuts right through the middle of the image in
Firefox and Opera but draws itself below the bottom edge of the graphic in
IE7.

Does anyone know the "trick" to make Firefox and Opera set their bottom
borders BELOW the bottom of the image?

My footer's top border is a thin line that extends the entire width of the
content area and it is drawing itself THROUGH the image instead of under
it. I don't want to abandon that line - I need it to separate the footer
text from the main content - so I'm hoping there is a technique that will
help me.

--

Rhino

#2

On 2007-10-20, rhino <No.offline.contact.please (AT) anonymous (DOT) com> wrote:

Quote:

I am trying to imitate - and adapt - an article I read in A List Apart
(http://www.alistapart.com/articles/flexiblelayouts/) to have a page footer
that sticks to the bottom of my content.

It's mostly working well but I'm having a lot of trouble with one aspect:
the boundaries of the content block encapsulate both the text and the
graphic within the block in IE7 but only the text in Firefox 2.0.0.8 and
Opera 9.23. I know this because I draw separate borders around the
content-main and content-footer divs (strictly for diagnostic purposes) and
the content-main div border cuts right through the middle of the image in
Firefox and Opera but draws itself below the bottom edge of the graphic in
IE7.

Does anyone know the "trick" to make Firefox and Opera set their bottom
borders BELOW the bottom of the image?

My footer's top border is a thin line that extends the entire width of the
content area and it is drawing itself THROUGH the image instead of under
it. I don't want to abandon that line - I need it to separate the footer
text from the main content - so I'm hoping there is a technique that will
help me.

Probably the graphic is floated, but you need to post a URL to the page.

#3

"Ben C" <spamspam (AT) spam (DOT) eggs> wrote

Quote:

On 2007-10-20, rhino <No.offline.contact.please (AT) anonymous (DOT) com> wrote:
I am trying to imitate - and adapt - an article I read in A List Apart
(http://www.alistapart.com/articles/flexiblelayouts/) to have a page
footer
that sticks to the bottom of my content.

It's mostly working well but I'm having a lot of trouble with one aspect:
the boundaries of the content block encapsulate both the text and the
graphic within the block in IE7 but only the text in Firefox 2.0.0.8 and
Opera 9.23. I know this because I draw separate borders around the
content-main and content-footer divs (strictly for diagnostic purposes)
and
the content-main div border cuts right through the middle of the image in
Firefox and Opera but draws itself below the bottom edge of the graphic
in
IE7.

Does anyone know the "trick" to make Firefox and Opera set their bottom
borders BELOW the bottom of the image?

My footer's top border is a thin line that extends the entire width of
the
content area and it is drawing itself THROUGH the image instead of under
it. I don't want to abandon that line - I need it to separate the footer
text from the main content - so I'm hoping there is a technique that will
help me.

Probably the graphic is floated, but you need to post a URL to the page.

As requested, here is the URL: http://sfl.london.on.ca/history2.shtml

--

Rhino

#4

On 2007-10-20, rhino <No.offline.contact.please (AT) anonymous (DOT) com> wrote:

Quote:

"Ben C" <spamspam (AT) spam (DOT) eggs> wrote in message
news:slrnfhjfek.5nd.spamspam (AT) bowser (DOT) marioworld...
[...]
Probably the graphic is floated, but you need to post a URL to the page.

As requested, here is the URL: http://sfl.london.on.ca/history2.shtml

As suspected, the problem is the commonly-asked one of how to make a
container grow in height to contain descendent floats.

You can add overflow: hidden to the styles for #content-main. I heard
recently that may not work in IE6 however.

If IE6 is important to you, you could try inserting <div style="clear:
both"> or <br clear="all"> last thing in #content-main. But I don't know
specifically what does or doesn't work in IE6.

#5

"rhino" <No.offline.contact.please (AT) anonymous (DOT) com> wrote

Quote:

As requested, here is the URL: http://sfl.london.on.ca/history2.shtml

Standard float problem.

Stick this at the very bottom of that div with the dotted border:

<div style='clear: both'></div>

Then go over to the specifications and read up on the float bit to find out
why the above works. You will also find a few other ways of achieving what
you require if you google around.

BTW your page breaks when I increase my font size, which I *have to* as you
have naively specified font-size: small. Your nav bar stuff at the left
escapes its cage.

--
Richard.

#6

"rf" <rf (AT) invalid (DOT) com> wrote

Quote:

"rhino" <No.offline.contact.please (AT) anonymous (DOT) com> wrote in message
news:ffcsl4$khe$1 (AT) news (DOT) datemas.de...

As requested, here is the URL: http://sfl.london.on.ca/history2.shtml

Standard float problem.

Stick this at the very bottom of that div with the dotted border:

div style='clear: both'></div

Thanks for that! I tried adding a 'clear: both' to the end of the div that

had the dotted line drawn around it but that did nothing. However, when I
added it to the div that contained the footer, I achieved the desired
result.

Quote:

Then go over to the specifications and read up on the float bit to find
out why the above works. You will also find a few other ways of achieving
what you require if you google around.

I was reading up about float last night before and after I made my original

post but none of the stuff I was trying there was working. Your suggestion -
once I moved it to the content-footer div - did the trick. I'm not sure why
I had to move it since you and Ben C were both clear that it needed to be in
the div that had the dotted line around it but the main thing is that it
worked :-)

Quote:

BTW your page breaks when I increase my font size, which I *have to* as
you have naively specified font-size: small. Your nav bar stuff at the
left escapes its cage.

Thanks for bringing that up; that saves me having to ask that as a separate
question.

I'm still not clear on what the page should do when it "degrades
gracefully", especially with regards to my navigation bar. If you make the
screen small enough, eventually, even the shortest words will be too long to
fit in the allotted space, even with small fonts. So what is the page
supposed to do when the page is made smaller and smaller? Can you point me
to an article that discusses this and that gives best practices for
achieving the desired result?

For what it's worth, I've replaced my 'font-size: small' with a 'font-size:
80%' but it doesn't seem to be changing the behaviour of the page. What else
do I need to do?

--

Rhino

#7

rhino wrote:
(snip)

Quote:

I'm still not clear on what the page should do when it "degrades
gracefully", especially with regards to my navigation bar. If you make the
screen small enough, eventually, even the shortest words will be too long to
fit in the allotted space, even with small fonts. So what is the page
supposed to do when the page is made smaller and smaller? Can you point me
to an article that discusses this and that gives best practices for
achieving the desired result?

For what it's worth, I've replaced my 'font-size: small' with a 'font-size:
80%' but it doesn't seem to be changing the behaviour of the page. What else
do I need to do?

--

Rhino

Rhino,

index-col is set to occupy 12.5% of the window. As the user reduces the
window width or increases the font size, at some point the longest word
will exceed that and the text will flop out of the space allotted for it
and overlay the text in the mid-section.

First, there are limits to everything. At extremes, the longest word
will exceed the entire width of the window and the user will need to
scroll horizontally just to see all of that word. You have to decide
what constitutes an 'extreme' case for your users and how much effort
you want to put into dealing with it.

In this specific case, you could specify the width of index-col in em
units. It will then adjust its width as the user adjusts text size. As
text gets larger, the column will get wider.

This will create a second problem: the navigation column will occupy a
larger and larger percentage of the window width, leaving less and less
room for the content. What would you like to happen in this case? You
could do nothing, in which case the user will have to scroll
horizontally to see the content. Or you could create a rule that says,
"If there is less than a certain amount of space for the content NEXT TO
the navigation, move the content BELOW the navigation". The user will
still need to scroll to see the content, but it will be a vertical
scroll, not a horizontal one, which most here feel is preferable.

How would you specify this rule? Float both the nav column and the
content to the left, so that they 'normally' will sit alongside one
another. Next, specify a minimum width for the content column. If that
column will contain text, that minimum width should be specified in em
units, so that it will adjust to changes in font size.

When text size vs. window width would cause the width available to the
content to drop below the minimum that you have specified, the content
will float BELOW the navigation and will then have the full window width
to work in.

N.B. IE 6 does not do min-width well.

For some examples of what can be done if you want to minimize the width
at which horizontal scrolling appears, see http:augustgold.com (an
ancient effort) and its under-construction replacement,
http://augustgold.com/sandbox/ Note that the latter is an exercise; I'm
doing some things with images that are not really appropriate to this site.

As to what font size you should specify, see
http://pages.prodigy.net/chris_beall...nt%20size.html

Chris Beall

#8

"Chris Beall" <Chris_Beall (AT) prodigy (DOT) net> wrote

Quote:

rhino wrote:
(snip)

I'm still not clear on what the page should do when it "degrades
gracefully", especially with regards to my navigation bar. If you make
the screen small enough, eventually, even the shortest words will be too
long to fit in the allotted space, even with small fonts. So what is the
page supposed to do when the page is made smaller and smaller? Can you
point me to an article that discusses this and that gives best practices
for achieving the desired result?

For what it's worth, I've replaced my 'font-size: small' with a
'font-size: 80%' but it doesn't seem to be changing the behaviour of the
page. What else do I need to do?

--

Rhino

Rhino,

index-col is set to occupy 12.5% of the window. As the user reduces the
window width or increases the font size, at some point the longest word
will exceed that and the text will flop out of the space allotted for it
and overlay the text in the mid-section.

First, there are limits to everything. At extremes, the longest word will
exceed the entire width of the window and the user will need to scroll
horizontally just to see all of that word. You have to decide what
constitutes an 'extreme' case for your users and how much effort you want
to put into dealing with it.

In this specific case, you could specify the width of index-col in em
units. It will then adjust its width as the user adjusts text size. As
text gets larger, the column will get wider.

This will create a second problem: the navigation column will occupy a
larger and larger percentage of the window width, leaving less and less
room for the content. What would you like to happen in this case? You
could do nothing, in which case the user will have to scroll horizontally
to see the content. Or you could create a rule that says, "If there is
less than a certain amount of space for the content NEXT TO the
navigation, move the content BELOW the navigation". The user will still
need to scroll to see the content, but it will be a vertical scroll, not a
horizontal one, which most here feel is preferable.

How would you specify this rule? Float both the nav column and the
content to the left, so that they 'normally' will sit alongside one
another. Next, specify a minimum width for the content column. If that
column will contain text, that minimum width should be specified in em
units, so that it will adjust to changes in font size.

When text size vs. window width would cause the width available to the
content to drop below the minimum that you have specified, the content
will float BELOW the navigation and will then have the full window width
to work in.

N.B. IE 6 does not do min-width well.

For some examples of what can be done if you want to minimize the width at
which horizontal scrolling appears, see http:augustgold.com (an ancient
effort) and its under-construction replacement,
http://augustgold.com/sandbox/ Note that the latter is an exercise; I'm
doing some things with images that are not really appropriate to this
site.

As to what font size you should specify, see
http://pages.prodigy.net/chris_beall...nt%20size.html

I appreciate the guidance on these matters and will try to absorb your

suggestions.

By the way, the numbered list on your fonts page needs a bit of work. All
the points are numbered '1' and the number appears to the left of the _last_
line in the point, not the first line.

--

Rhino

#9

rhino wrote:
(snip)

Quote:

By the way, the numbered list on your fonts page needs a bit of work. All
the points are numbered '1' and the number appears to the left of the _last_
line in the point, not the first line.

--

Rhino

Rhino,

That's a known bug in IE 7, related to max-width on list-item. There's
a workaround, but I elected not to apply it here. I shudder to think
how adding a max-width can screw up the markers, but it does.

Chris Beall

#10

On 20 oct, 16:33, Chris Beall <Chris_Be... (AT) prodigy (DOT) net> wrote:

Quote:

rhino wrote:

(snip)

By the way, the numbered list on your fonts page needs a bit of work. All
the points are numbered '1' and the number appears to the left of the _last_
line in the point, not the first line.

--

Rhino

Rhino,

That's a known bug in IE 7, related to max-width on list-item. There's
a workaround, but I elected not to apply it here. I shudder to think
how adding a max-width can screw up the markers, but it does.

Chris Beall

Chris,

I have listed, mentioned this bug in my website:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
at item #87 :

http://www.gtalbot.org/BrowserBugsSe...ListItems.html

along with a credits note directed to you.

Regards, Gérard