#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    112
    Rep Power
    11

    css positioning a footer - help needed.


    Hello ppl,

    the problem I got is the following:

    I have a set of pages consisting of a header a main content and a footer. I made the footer displaying at the bottom of the page even if the page is empty by the help of the following post: CSS footer

    The problem I have now is:

    in the css file I do not define the variable width for the header and it gets displayed like I would expect it if I said width=100%. Now if I do not define the width of the footer it is really small. If I define it like width=100% it looks ok in IE and like 102% in mozillabased browsers.

    Now I do not want to talk about IE vs. Mozilla issues, I just want to know why defining no width for the header works but not for the footer.

    here is a link to my page where footer has a width=100% : www.ovidius-journeys.de/index.html and the link to the coresponding css file is www.ovidius-journeys.de/tierraverde-screen.css

    here is a link to a test page where footer is lacking a width definition: www.ovidius-journeys.de/test.html and the coresponding css file is www.ovidius-journeys.de/test.css

    Please remember to test both url with IE and Mozilla to see the difference.

    I am seriously determined to fix this misbehaviour. THerefore I made a small drawing to illustrate things: www.ovidius-journeys.de/images/diagramm.jpg
    There is a hotlink protection active, I managed to bypass it a little but you still have to copy the url into a new browser window, meaning only referers from my domain are allowed but entering the url manually without sending a referer will work.
    The drawing shows how my pages are structured. I also added some atributes from the css file as far as I thought them relevant for this problem.
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    You've gotten away from the prototype's structure.
    Code:
    #content <!-- a wrapper for the entire page -->
        #main <!-- a sub-wrapper for the all the content except the footer -->
        #footer <!-- a wrapper for footer data -->
    Try putting the header, the side-bars, and the main-copy in the #main. Double check the wrappers' style rules against the proto.

    If you still have problems, create a minimal test case.

    Should you still be stumped, think of it as an opportunity for edification.

    cheers,

    gary

    nb:&#160;&#160;The prototype referenced can be found at http://scott.sauyet.name/CSS/Demo/FooterDemo1.html.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    112
    Rep Power
    11
    thx for the advice gary,

    I am glad you tried to help as it was you that pointed me to the prototype I am using. I know I have gotten away from the proto, but I thought that was called "innovation" - no just kidding man, I was quite proud I could adopt my stylesheet to that proto.
    To add to this I do not have any problems with the footer position, its just about its size.

    Well, as you saw in the post I had a test.html and test.css. I will follow your advice and try to make those files into a minimal test case.

    I will post again when I have narroved down the bug and need help or solved it by myself.
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I know I have gotten away from the proto, but I thought that was called "innovation" - no just kidding man, I was quite proud I could adopt my stylesheet to that proto.
    To add to this I do not have any problems with the footer position, its just about its size.
    As to the footer size; altered structure has problems, prototype doesn't. Do we have a hint here? It may easily be something else, but if altering one thing is concurrent with altered results elsewhere, doesn't that suggest a connection?

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    112
    Rep Power
    11


    I hope you noticed I was kidding, gary.

    Anyway I isolated the bug. It was something that someone on another forum already suggested: he said I should pay attention when using width: 100% because Moz and IE handle the calculation of the 100% differently. Moz seems to add borders and padding to the 100%, thats why my footer got bigger than 100%

    Now I have 2 choices:

    - stop using width: 100% and use fixed sizes
    - use width: 100% but stop using padding for my footer.

    I will choose #2 and insert another div into the footer div that uses padding. So the footer won't be bothered by the padding.


    Following your hints I rewrote my css based on the proto css. Now it is much closer to the proto and I guess in a few days I will have adopted it completely.


    There is only a small thing that still makes me wonder:
    Why does my header look like width: 100% although I did not specify any width and my footer looks small without the width: 100%?
    But I will post that as a separate post with the coresponding css code when I finish.

    Last problems I am trying to tackle are the size handling of em, ex, mm . There seems to be a huge difference between IE and Moz. I will have to look that up later, atm I am trying to stay somewhere in between so it looks ok in both. Thats not a priority to get it looking exactly the same.
  10. #6
  11. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Yeah, I saw the facetiousness. I've done some wonderful and imaginative innovation my own self that broke stuff. I just wanted to emphasize that you had a working model, added/changed something, and it broke. Returning to the working version is what I call the "whack it back 'til it works" school of debugging. At this point you can add things back in until it breaks, and know which bit broke things.

    Whack-it-back doesn't always work well if the bug is a combination of things. Either bit by itself might not cause a problem, but together they're toxic.

    The minimal test case can be a lot of work if the page is complex. It's my second, or last resort method. It does work for multipart bugs.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo