CSS Positioning

[mattm591]

Hi,
I am using some CSS to position a footer and header on a page.
I am quite new to CSS positioning, so am not completely comfortable in what I'm doing.
I have the following CSS

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #FFFFFF;
	margin-top: 3%;
	margin-right: 5%;
	margin-bottom: 3%;
	margin-left: 5%;
}
.footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: lighter;
	text-align:center;
	color: #999999;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #999999;
	position: fixed;
	padding-top: 2px;
	padding-bottom: 1%;
	bottom: 0px;
	width: 89%;
}
.header {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #0099CC;
	width: 89%;
	padding-top: 1%;
	padding-bottom: 2px;
	position: fixed;
	top: 0px;
}

which is currently doing several things I am not happy with.

Firstly, in Internet Explorer the footer is moved over to the right and is not central, although this is not an issue in Firefox.

Secondly, the header and footer stay completely in place when I have a page with large amounts of content, which I know is because I have used the fixed positioning attribute, but how can I have it allow the header and footer to stay at the top and bottom and be scrollable too.

Thirdly, with them in place as they are at the moment (which i will want to use in certain situations) the text at the top or bottom of the page scrolls over the header and footers as the page is scrolled. Is there a way to have them jump over it?

Finally there seems to be a faint line always at the top of the page and a thick one at the bottom (although I have only noticed this in Firefox. Not IE 7).

Any help on these issues would be most appreciated.

Thanks a lot!

Matt

[ednark]

Firstly :
For fixed position centering you can use a negative margin trick;
start it at left:50%, and move it back 1/2 its width. This works as long as you use the same unit %,px,em for both the width, and the negative margin. So I will have to make your width divisible by two for "gooder looking".

For no fixed position elements you can always use the trusty "margin: 0px auto;"

.footer {
  position: fixed;
  bottom: 0px;
  left: 50%;
  margin-left: -44%;
  width: 88%;
}

Secondly :
I'm not sure what you mean? Are you saying that you want the footer to always be at the bottom even with little content, but that if content is big enough you want the footer pushed off the visible page at the end of the content so you would have to scroll to see the header?.

Thirdly :
try setting "z-index: INT" the higher the z-indexes clobber the lower ones.

Finally :
no clue about that the top line does not show up on my firefox or IE, it might be a side effect of SpryBar mechanations.

[mattm591]

Thanks for the reply.

I have got the positioning sorted out in IE now.

I was playing around with the spry bits earlier, but the line problem was before that.

The other problem I meant was I want to have it so that the header will always be at the top, but as you scroll the page it disappears and you have to scroll back up to it. And the footer will always be right at the base of the page, even if there is no content on it, but if there is enough content you have to scroll down to see it.

That is what I couldn't work out.

Thanks,

Matt