CSS margin-bottom property problem

[cangoalie]

Hello,
I am new to the forum, so sorry in advance if this falls under the wrong category!
I am in the process of designing a web site for a local charity and I am having problems with the footer. I have set margin-bottom to equal "50px" but this is being ignored and the footer is going to the bottom of the page.
Could anyone please advise on what I am doing wrong?
Thanks very much,
cangoalie

[saltedm8]

welcome to the forums, this is the right place to post your question,

could we have a look at your css sheet and possibly even the html, so to make it easyier to help you

cheers

[cangoalie]

I'm sorry, I just realized I forgot to post the website
www.members.shaw.ca/amnestyinvictoria/

[saltedm8]

i see no

I have set margin-bottom to equal "50px"

please tell me the div and class that you are on about

cheers

[dab42pat]

Give this a try.

HTML: Select all

#footer {
    width:920px;
    height:1px;
    background:#CCC;
    margin:30px 0 50px 0;
    padding:0 20px;
    padding-bottom:50px;
    position:relative;
    float:left;
    display:block;
}

I assume this is a problem in ie.

Pat

[cangoalie]

No, that doesn't work either.
I am working in Safari 3.x (for Macs), and haven't tried any others ... but I assume it would be the same in most other current browsers.

[cangoalie]

Originally Posted by saltedm8

i see no

please tell me the div and class that you are on about

cheers

Hi, the <div> in the website I provided has the id "footer".

[saltedm8]

try this...

Code: Select all

#footer {
    margin:0 auto;
    width:920px;
    background:#CCC;
    padding:0 20px;
    margin-bottom: 50px;
    margin-top:30px;
}

[cangoalie]

Weird - that didn't work initially, but now something has changed and it works fine.
Thanks for your help!

EDIT: Actually, I think that may just be me shortening the height of the photo i was using.. The question is still open..

[saltedm8]

it might be because you have added this part back in

Code: Select all

float:left;
    display:block;
    position:relative;

this part of code above is not needed, remove that part and try again if you have not already tried it

[Jack Franklin]

Originally Posted by cangoalie

but I assume it would be the same in most other current browsers.

Worst assumption ever

It should display the same in all but IE6/7, which is rubbish with CSS.

[cangoalie]

Originally Posted by saltedm8

it might be because you have added this part back in

Code: Select all

float:left;
    display:block;
    position:relative;

this part of code above is not needed, remove that part and try again if you have not already tried it

I find that code quite needed - otherwise, the div starts acting strangely (it does not appear, or the background does not show up, etc.)

[saltedm8]

Originally Posted by cangoalie

I find that code quite needed - otherwise, the div starts acting strangely (it does not appear, or the background does not show up, etc.)

i am sorry to disagree, but those parts are not needed, the browser has all the info it needs to create your footer using just what i have posted , you have position, size and colour.

using float and relative positioning together is a contradiction in terms, first you are giving it a relative position then you are telling it to keep left ??

i have been using it for 4 years and have never had a problem; I see no reason why you would get any problems with it

un-necessary code can in itself cause a problem to the rendering of websites because the browser will get confused as to which to use