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: http://forums.devshed.com/showthrea...39&page=1&pp=15

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.

You've gotten away from the prototype's structure.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:**The prototype referenced can be found at http://scott.sauyet.name/CSS/Demo/FooterDemo1.html.

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.

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

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.

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