CSS margin-bottom property problem

This is a discussion on "CSS margin-bottom property problem" within the Web Page Design section. This forum, and the thread "CSS margin-bottom property problem are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices




Reply
 
LinkBack Thread Tools
  #1  
Old Mar 6th, 2008, 20:30
New Member
Join Date: Mar 2008
Location: Canada
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Question CSS margin-bottom property problem

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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote

  #2  
Old Mar 6th, 2008, 20:33
saltedm8's Avatar
SuperMember

SuperMember
Join Date: Nov 2005
Location: here
Age: 27
Posts: 1,521
Blog Entries: 2
Thanks: 1
Thanked 11 Times in 11 Posts
Re: CSS margin-bottom property problem

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
Last Blog Entry: Strict and Transitional Doctype's (Sep 12th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #3  
Old Mar 6th, 2008, 20:34
New Member
Join Date: Mar 2008
Location: Canada
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS margin-bottom property problem

I'm sorry, I just realized I forgot to post the website
www.members.shaw.ca/amnestyinvictoria/
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #4  
Old Mar 6th, 2008, 20:41
saltedm8's Avatar
SuperMember

SuperMember
Join Date: Nov 2005
Location: here
Age: 27
Posts: 1,521
Blog Entries: 2
Thanks: 1
Thanked 11 Times in 11 Posts
Re: CSS margin-bottom property problem

i see no
Quote:
I have set margin-bottom to equal "50px"
please tell me the div and class that you are on about

cheers
Last Blog Entry: Strict and Transitional Doctype's (Sep 12th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #5  
Old Mar 6th, 2008, 21:49
Reputable Member
Join Date: Jun 2007
Location: uk
Posts: 459
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS margin-bottom property problem

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
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #6  
Old Mar 7th, 2008, 03:41
New Member
Join Date: Mar 2008
Location: Canada
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS margin-bottom property problem

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.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #7  
Old Mar 7th, 2008, 15:55
New Member
Join Date: Mar 2008
Location: Canada
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS margin-bottom property problem

Quote:
Originally Posted by saltedm8 View Post
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".
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #8  
Old Mar 7th, 2008, 16:37
saltedm8's Avatar
SuperMember

SuperMember
Join Date: Nov 2005
Location: here
Age: 27
Posts: 1,521
Blog Entries: 2
Thanks: 1
Thanked 11 Times in 11 Posts
Re: CSS margin-bottom property problem

try this...

Code: Select all
#footer {
    margin:0 auto;
    width:920px;
    background:#CCC;
    padding:0 20px;
    margin-bottom: 50px;
    margin-top:30px;
}
Last Blog Entry: Strict and Transitional Doctype's (Sep 12th, 2008)

Last edited by saltedm8; Mar 7th, 2008 at 16:40.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #9  
Old Mar 8th, 2008, 02:32
New Member
Join Date: Mar 2008
Location: Canada
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS margin-bottom property problem

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..

Last edited by cangoalie; Mar 8th, 2008 at 02:42.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #10  
Old Mar 8th, 2008, 09:20
saltedm8's Avatar
SuperMember

SuperMember
Join Date: Nov 2005
Location: here
Age: 27
Posts: 1,521
Blog Entries: 2
Thanks: 1
Thanked 11 Times in 11 Posts
Re: CSS margin-bottom property problem

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
Last Blog Entry: Strict and Transitional Doctype's (Sep 12th, 2008)

Last edited by saltedm8; Mar 8th, 2008 at 09:33.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #11  
Old Mar 8th, 2008, 10:29
Jack Franklin's Avatar
Moderator

SuperMember
Join Date: May 2007
Location: Cornwall, England
Posts: 1,405
Blog Entries: 8
Thanks: 18
Thanked 14 Times in 14 Posts
Re: CSS margin-bottom property problem

Quote:
Originally Posted by cangoalie View Post
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.
__________________
Jack Franklin - Webforumz Moderator
(x)HTML | CSS | PHP | MySQL | JQuery (Javascript)
Contact: My Blog | Twitter | Delicious
Want Lessons? PM me.
If you think I've helped, please press the 'Thanks' Button.
Last Blog Entry: A Week with VBulletin (Aug 28th, 2008)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #12  
Old Mar 8th, 2008, 17:06
New Member
Join Date: Mar 2008
Location: Canada
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Re: CSS margin-bottom property problem

Quote:
Originally Posted by saltedm8 View Post
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.)
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #13  
Old Mar 8th, 2008, 20:40
saltedm8's Avatar
SuperMember

SuperMember
Join Date: Nov 2005
Location: here
Age: 27
Posts: 1,521
Blog Entries: 2
Thanks: 1
Thanked 11 Times in 11 Posts
Re: CSS margin-bottom property problem

Quote:
Originally Posted by cangoalie View Post
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
Last Blog Entry: Strict and Transitional Doctype's (Sep 12th, 2008)

Last edited by saltedm8; Mar 8th, 2008 at 21:04.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem with xml-flash and loading movie property mars Flash & Multimedia Forum 8 Apr 11th, 2008 17:41
Problem with random margin in IE? FF OK bobfish Web Page Design 2 Jul 4th, 2007 08:34
Odd bottom spacing problem FabianN Web Page Design 2 May 6th, 2007 16:27
Padding property problem in nested <div>s mattlowe81 Web Page Design 2 Apr 8th, 2006 16:00
Top and bottom margin for container/wrapper divs jimz Web Page Design 1 Feb 27th, 2006 12:40


All times are GMT. The time now is 03:44.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42