Stylesheets - Footer positioning problem

Author

Footer positioning problem

rhino

2007-10-20, 3:18 am

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

Ben C

2007-10-20, 6:15 am

On 2007-10-20, rhino <No.offline.contact.please@anonymous.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.

rhino

2007-10-20, 6:18 pm

"Ben C" <spamspam@spam.eggs> wrote in message
news:slrnfhjfek.5nd.spamspam@bowser.marioworld...
> On 2007-10-20, rhino <No.offline.contact.please@anonymous.com> wrote:
>
> 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

Ben C

2007-10-20, 6:18 pm

On 2007-10-20, rhino <No.offline.contact.please@anonymous.com> wrote:
>
> "Ben C" <spamspam@spam.eggs> wrote in message
> news:slrnfhjfek.5nd.spamspam@bowser.marioworld...
[...]
>
> 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.

2007-10-20, 6:18 pm

"rhino" <No.offline.contact.please@anonymous.com> wrote in message
news:ffcsl4$khe$1@news.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>

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.

rhino

2007-10-20, 6:18 pm

"rf" <rf@invalid.com> wrote in message
news:kVmSi.2302$CN4.1943@news-server.bigpond.net.au...
> "rhino" <No.offline.contact.please@anonymous.com> wrote in message
> news:ffcsl4$khe$1@news.datemas.de...
>
>
> 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.

> 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 :-)

> 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

Chris Beall

2007-10-20, 6:18 pm

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_beal...ont%20size.html

Chris Beall

rhino

2007-10-20, 6:18 pm

"Chris Beall" <Chris_Beall@prodigy.net> wrote in message
news:YBpSi.15475$JD.1022@newssvr21.news.prodigy.net...
> rhino wrote:
> (snip)
>
> 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_beal...ont%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

Chris Beall

2007-10-20, 6:18 pm

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

GTalbot

2007-11-16, 6:21 pm

On 20 oct, 16:33, Chris Beall <Chris_Be...@prodigy.net> wrote:
> rhino wrote:
>
> (snip)
>
l[color=darkred]
ast_[color=darkred]
>
>
>
> 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/BrowserBugsS...ListItems.html=

along with a credits note directed to you.

Regards, G=E9rard