Position of footer

Okay i'm slightly confused on this. Top and bottom paragraph in the footer, Or in the text above it etc?
 
Sorry it is not online. The contents of the footer is fine it appears as it should inside the footer. The problem is the position of the footer is obscurring the bottom of the content within my wrapper.
The CSS link above instructs you to remove all margins and padding to ensure the footer is positioned correctly
*{padding:0;
margin:0;
},
and this works - but I want a space between my paragraphs so I have added a top and bottom margin
p{margin:5px 0 5px 0}
but the minute this is added the bottom of the text in my main content is obscured by the footer. I could drop this by playing with the margin-top command in the footer or the padding-bottom command in the content, but I want to ensure any bodge is is going to work in all browsers and does not need adjusting everytime I change the text!
 
Hi Ann,

If it's not online yet, just post your HTML and CSS here instead. Otherwise it's near impossible to determine where the issue lies.
 
Thanks for the offer to look through the code, I am really still playing around with the templates for my pages and so it wont be available online for a while. I am going to use a temporary fix for now, and revisit it once it is more together.
If it helps my footer CSS is this:
#footer {
border: 1px solid #000000;
background-color: #ffffff;
width: 800px;
margin: 0 auto;
padding: 2px 0 2px 0;
position:relative;
margin-top: -40px;
height: 40px;
z-index:6;
clear:both;
}
and in the footer in HTML is placed subsequent to my wrapper and contents, and my content CSS is
#content {
position: relative;
top:8px;
padding-bottom: 40px;
background-color: #FFFFFF;
}
As I already said I have followed the footer instructions from the above link designed to ensure shorter pages footers stay at the bottom of the page but will move lower on longer pages. It requires the removal margings and padding - and it works beautifully! My problem is I have readded margins for my paragraph which it does not seem to cope with.
 
I found one of my errors in the footer definition. I have declared margins twice, once to centre the footer (width 800px) the other to move the margin up by -40px to position it correctly vertically.
I have replaced both oth these with:
margin: -40px auto;
but this no longer centralises the footer horizontally.
Please can someone let me know where I am going wrong?
 
You must log in or register to reply here.
Back
Top