footer positioning at bottom using div, how with Mozilla & Opera!?

[Quintus Snapper]

Hi everyone.

I'm just making new HTML pages for a site. This time round I've
brushed up on my CSS and trying to use as much of it as possible and
as well as trying to keep it W3C compliant. So far everything's been
going well and the code is currently about 1/3 smaller and running it
through the W3C validator doesn't throw any errors! :-)

I've basically got it how I want it minus one problem. And that is
that I can not seem to figure out how to keep the footer right at the
bottom. It works in IE 6, but I get different underirable effects in
both Opera 7.5 & Mozilla Firefox 0.7. I've tried all CSS options I
could find which I thought might work, but without any luck.

What do I have to do to get it to work (without starting to use
tables)? The page can be seen at:
http://www.sansebastianapartments.com/new/

Thanks in advance for any help.

Regards,

Quintus

[Harlan Messinger]

qs******@terra.es (Quintus Snapper) wrote:
I'm not sure what the answer to your problem is, but I have an
unrelated question: Do you not want to do business with people who are
unable to read tiny print? Your page's text is minuscule, and you have
it set at a fixed size so that IE's feature to increase the size of
the displayed text has no effect.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[Mark Tranchant]

Quintus Snapper wrote:

I've basically got it how I want it minus one problem. And that is
that I can not seem to figure out how to keep the footer right at the
bottom. It works in IE 6, but I get different underirable effects in
both Opera 7.5 & Mozilla Firefox 0.7. I've tried all CSS options I
could find which I thought might work, but without any luck.

At the bottom of what? The document? The viewport?

The former is easy - use a relatively-positioned footer div after your
relatively-positioned content div, and enclose both in an
absolutely-positioned div if you need to.

The latter is not, and may well not work as you expect.

From the URL you gave, I think you need to use the CSS clear property
to make sure your div doesn't finish before your content.

--
Mark.

[Barry Pearson]

Quintus Snapper wrote:

Hi everyone. [snip] I've basically got it how I want it minus one problem. And that is
that I can not seem to figure out how to keep the footer right at the
bottom. It works in IE 6, but I get different underirable effects in
both Opera 7.5 & Mozilla Firefox 0.7. I've tried all CSS options I
could find which I thought might work, but without any luck.

What do I have to do to get it to work (without starting to use
tables)? The page can be seen at:
http://www.sansebastianapartments.com/new/

Here is a quick guess. Perhaps it is because you haven't cleared your float:
left before you position the footer. (I didn't find a clear, which is often a
problem after floats).

You may either need to use clear: left on the footer, or you may need a <div>
before the footer that you clear.

Another puzzle: the text size I see in IE is much larger than I see in
Firefox.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Quintus Snapper]

Thanks for your response Mark/Barry.

Thanks a lot, using the clear property on the footer did the job!

Great stuff! :-)

Q

PS I don't have the size difference in Firefox which you described
Barry. Will try to check on anohter machine to see what I get there.
Also taken note of the text being to small.

Mark Tranchant <ma**@tranchant.plus.com> wrote in message news:<3c*********************@stones.force9.net>.. .

Quintus Snapper wrote:

I've basically got it how I want it minus one problem. And that is
that I can not seem to figure out how to keep the footer right at the
bottom. It works in IE 6, but I get different underirable effects in
both Opera 7.5 & Mozilla Firefox 0.7. I've tried all CSS options I
could find which I thought might work, but without any luck.

At the bottom of what? The document? The viewport?

The former is easy - use a relatively-positioned footer div after your
relatively-positioned content div, and enclose both in an
absolutely-positioned div if you need to.

The latter is not, and may well not work as you expect.

From the URL you gave, I think you need to use the CSS clear property
to make sure your div doesn't finish before your content.

[Brian]

Please don't top-post.

Quintus Snapper wrote:

Also taken note of the text being to small.

The solution to that is simple: don't set a font-size for body, table,
tr, td, ul, etc. Set font-size only for headers, to keep them to a
reasonable size, and use percentages for that.

h1 {font-size: 150%}

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Barry Pearson]

Brian wrote:

Quintus Snapper wrote:

Also taken note of the text being to small.

The solution to that is simple: don't set a font-size for body, table,
tr, td, ul, etc. Set font-size only for headers, to keep them to a
reasonable size, and use percentages for that.

h1 {font-size: 150%}

And text can also look too small, or too large, if the author sets the
font-family without changing the font-size. It can result in a clash between
the browser settings and the perceived size of the font used.

See the screen-shots at the following, which show examples of text looking
both larger & smaller than the browser-setting even at 100% font-size.
http://www.barry.pearson.name/articl...comparison.htm

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/