HighDots Forums  

Footer css positioning problem

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)


Discuss Footer css positioning problem in the Cascading Style Sheets forum.



Reply
 
Thread Tools Display Modes
  #1  
Old   
Tim Charles
 
Posts: n/a

Default Footer css positioning problem - 07-21-2004 , 06:18 AM






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/...TyID=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



Reply With Quote
  #2  
Old   
Els
 
Posts: n/a

Default Re: Footer css positioning problem - 07-21-2004 , 06:33 AM






Tim Charles wrote:

Quote:
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/...sp?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 -


Reply With Quote
  #3  
Old   
DU
 
Posts: n/a

Default Re: Footer css positioning problem - 07-21-2004 , 11:19 AM



Tim Charles wrote:
Quote:
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/...TyID=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?verbos...diecast.co.uk/

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

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

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

Incorrect nesting of elements:
http://www.htmlhelp.com/tools/valida...s.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


Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.