Stylesheets - Footer css positioning problem

Author

Footer css positioning problem

Tim Charles

2004-07-21, 12:17 pm

Hello

I am close to finishing my first properly css-friendly site (at least I hope
it is), and am looking for some general feedback, plus a specific question
answered, if possible.

http://www.ediecast.co.uk/ is the url.

The specific question is whether anyone can give me any help getting the
footer to actually go at the bottom of the page, rather than staying in the
wrong place, see
http://www.ediecast.co.uk/stocklist...rTyID=36&ScID=1

Any sort of comments are welcome. I have made the Cart pages as clear as
possible - to encourage people not to abandon the shopping process.

Thanks

Richard

Els

2004-07-21, 12:17 pm

Tim Charles wrote:

> Hello
>
> I am close to finishing my first properly css-friendly site
> (at least I hope it is), and am looking for some general
> feedback, plus a specific question answered, if possible.
>
> http://www.ediecast.co.uk/ is the url.
>
> The specific question is whether anyone can give me any
> help getting the footer to actually go at the bottom of the
> page, rather than staying in the wrong place, see
> http://www.ediecast.co.uk/stocklist...asp?ManID=30&Pr
> TyID=36&ScID=1
>
> Any sort of comments are welcome.

Try adding a doctype, and then validate the HTML.
http://validator.w3.org/

You've put a <link> element in the footer.
This should be in the head, where you already have it.

You used absolute positioning for the most important divs,
this will never get the footer to the bottom of the page.
Just to scare you a bit: look at your page in a Netscape,
Mozilla or Firefox browser, and press ctrl and '+' once or
twice. This is the direct result of the position:absolute
you're using.
It doesn't do this in IE only, because you used pixels for
font-size, which makes it impossible to scale the size. Very
bad for people with worse eyesight than very good.

Instead, work with floats, and put clear:both on the footer.
put font-size:100% in the body, and use only percentages of
that in other elements where appropriate.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

2004-07-21, 7:17 pm

Tim Charles wrote:
> Hello
>
> I am close to finishing my first properly css-friendly site (at least I hope
> it is), and am looking for some general feedback, plus a specific question
> answered, if possible.
>
> http://www.ediecast.co.uk/ is the url.
>
> The specific question is whether anyone can give me any help getting the
> footer to actually go at the bottom of the page, rather than staying in the
> wrong place, see
> http://www.ediecast.co.uk/stocklist...rTyID=36&ScID=1
>
> Any sort of comments are welcome. I have made the Cart pages as clear as
> possible - to encourage people not to abandon the shopping process.
>
> Thanks
>
> Richard
>
>

You've got hundreds of markup and CSS errors in both files. First,
define a doctype declaration (I recommend you use strict HTML 4.01), put
all your <script>, <link> in the head part and very important, first
validate your document. Elements can not have the same id; id must be
unique for documents. You don't seem to know what improper nesting is:
so you have to start with understanding this very common situation.
You first need to tackle all of these issues. Then and only then,
positioning your footer will be very very easy to do.
I would avoid using absolute positioning, unless this is necessary and
unless of course you know well what abs. pos. means and implies. As far
as I can see, you don't need abs. pos. in your document.

http://validator.w3.org/check?verbo...ediecast.co.uk/

http://validator.w3.org/check?verbo...3D36%26ScID%3D1

http://jigsaw.w3.org/css-validator/...ediecast.co.uk/

http://jigsaw.w3.org/css-validator/...3D36%26ScID%3D1

Incorrect nesting of elements:
http://www.htmlhelp.com/tools/valid...ms.html#nesting

List of valid doctype decl.:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

W3C Quality assurance tips for webmasters:
http://www.w3.org/QA/Tips/

{
Good usage of CSS's font properties
Recommended Practices
(...)
* Do not specify the font-size in pt, or other absolute length
units. They render inconsistently across platforms and can't be resized
by the User Agent (e.g browser).
}
W3C Quality assurance tip for webmasters:
Care with font size
http://www.w3.org/QA/Tips/font-size#goodpractice

DU