Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11

Thread: Footer problem

  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Footer problem

    Does anybody have firebug? If yes, would you please inspect my site and just tell me why is the footer behaving in that weird way.

    My site: [LINK]
    user: guest
    pass: guest



    And here is the CSS of #el-footer
    Code:
    #el-footer {
    	color: #626A69;
    	background-color: #FFFFFF;
    	padding: 15px 0 0;
    	position: relative;
    	text-align: center;
    	margin-bottom: -50px;
    	
    	vertical-align: bottom;
    	width: 950px;
    }
    
    #el-footer small {
    	color: #858783;
    	font-size: 100%;
    }
    
    #el-footer ul {
    	margin: 0 0 8px;
    	padding: 0;
    	line-height: normal;
    }
    
    #el-footer li {
    	display: inline;
    	margin: 0;
    	padding: 0;
    	background: url(../images/vline.gif) no-repeat center left;
    }
    
    #el-footer li a {
    	display: inline;
    	line-height: normal;
    	padding: 0 15px;
    }
    
    li.el-firstitem {
    	background: none !important;
    }
    
    .el-footurl {
    	float: none;
    	clear: both;
    }
    I've been trying to solve this problem but I just can't find its code.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Your negative bottom margin in the footer doesn't seem to have any effect at all, which is why your page is dangling above the bottom of the window. I'm not sure how to fix this yet...

    A patch for now could be this:
    Code:
    #el-wrapper {
    background-color:white;
    margin:0 auto;
    padding:0 0 70px;
    width:955px;
    }
    It won't bring your footer any closer to the bottom of the page but it will at least stop the background gap...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    Your negative bottom margin in the footer doesn't seem to have any effect at all, which is why your page is dangling above the bottom of the window. I'm not sure how to fix this yet...

    A patch for now could be this:
    Code:
    #el-wrapper {
    background-color:white;
    margin:0 auto;
    padding:0 0 70px;
    width:955px;
    }
    It won't bring your footer any closer to the bottom of the page but it will at least stop the background gap...
    Thank you, apparently that worked...

  • #4
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Can't look at your site, snitz, because it's got some sort of restricted access. Try to make it more widely available, if possible.

    Out of two browsers, (if you're comparing IE with Firefox), I think you'll find it's IE which carries the most bugs. I was always taught to design for Mozilla and then adjust for IE.

    It might well be something ABOVE the footer, which is causing the problem but since it isn't described here, I can't be sure what the problem is, exactly.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Doctor_Varney View Post
    Can't look at your site, snitz, because it's got some sort of restricted access. Try to make it more widely available, if possible.

    Out of two browsers, (if you're comparing IE with Firefox), I think you'll find it's IE which carries the most bugs. I was always taught to design for Mozilla and then adjust for IE.

    It might well be something ABOVE the footer, which is causing the problem but since it isn't described here, I can't be sure what the problem is, exactly.
    There's a user/pass which I provided at the start of my topic.
    user/pass: guest/guest

    This site is giving me a headache, the alignment of the footer, background, menu isn't 100% accurate. The company I'm working for right now, had another developer to work on it before I got here... so I'm continuing his work and it looks like he did alot of modifications and some of them aren't applicable.

    Can you please take a look and see if it's working? coz at some pcs it's loading just fine and at other pcs, the footer and the menu drift a little bit of the mainbody.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello again Snitz,

    It looks like that notch is appearing in your footer is worse on other pages. Look at the Our Products link and you'll see it 1/3 of the way up the page.

    It's showing up because your #el-wrapper doesn't line up with the white space in bg1.jpg.
    #el-wrapper is width: 950px;
    The white space in bg1.jpg is 942px wide

    Try reducing the width of #el-wrapper. You may have a lot of other things to adjust the width on to fix your box model.
    It would probably be easier to photoshop your bg1.jpg so the white space is 950px wide.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello again Snitz,

    It looks like that notch is appearing in your footer is worse on other pages. Look at the Our Products link and you'll see it 1/3 of the way up the page.

    It's showing up because your #el-wrapper doesn't line up with the white space in bg1.jpg.
    #el-wrapper is width: 950px;
    The white space in bg1.jpg is 942px wide

    Try reducing the width of #el-wrapper. You may have a lot of other things to adjust the width on to fix your box model.
    It would probably be easier to photoshop your bg1.jpg so the white space is 950px wide.
    I photoshopped my background and made the white space 950px, you can see it on the site and it's still showing the same thing.

    Anyway, I tried an alternative method. Instead of using a wallpaper background for the site, I decided to take 1 horizontal line about 27px of height and apply it with repeat-y and looks like it worked.

    EDIT: It worked with the repeated background on Firefox3 and IE7 but on Firefox2 and IE7 it's still doing the same problem; footer notch and menu left border (white)

    Any advise on this?
    Last edited by Snitz; 04-14-2009 at 02:47 PM.

  • #8
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Alright, one more problem out of the many I'm having on this project.

    I've managed to separate the background's divs out of the of the site, I created tables and put everything inside of it with backgrounds on the left and right and its working without any error.

    But if you goto the site now [LINK] (guest/guest)
    Notice the footer, the white border at the bottom, sometimes it's small and sometimes its very big. I couldn't find a css property that leads to this thing... Any advise?

  • #9
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Alright, one more problem out of the many I'm having on this project.

    I've managed to separate the background's divs out of the of the site, I created tables and put everything inside of it with backgrounds on the left and right and its working without any error.

    But if you goto the site now [LINK] (guest/guest)
    Notice the footer, the white border at the bottom, sometimes it's small and sometimes its very big (spot it in the "Press & Events"). I couldn't find a css property that leads to this thing... Any advise?
    Last edited by Snitz; 04-14-2009 at 04:00 PM.

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Snitz View Post
    Alright, one more problem out of the many I'm having on this project.

    I've managed to separate the background's divs out of the of the site, I created tables and put everything inside of it with backgrounds on the left and right and its working without any error.

    But if you goto the site now [LINK] (guest/guest)
    Notice the footer, the white border at the bottom, sometimes it's small and sometimes its very big (spot it in the "Press & Events"). I couldn't find a css property that leads to this thing... Any advise?
    You what? Tables? Nooooooooooooooooooo!

    You're probably going to get some interesting posts from other users now.

    Well anyway, I'm not sure if you're talking about the fact that your page is not stretching all of the way to the bottom of the browser window or if you are talking about something else. Can you clarify? Are you actually seeing a change in the size of the footer itself or are you concerned with the gap below the footer in pages with very short content?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #11
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rowsdower! View Post
    You what? Tables? Nooooooooooooooooooo!

    You're probably going to get some interesting posts from other users now.

    Well anyway, I'm not sure if you're talking about the fact that your page is not stretching all of the way to the bottom of the browser window or if you are talking about something else. Can you clarify? Are you actually seeing a change in the size of the footer itself or are you concerned with the gap below the footer in pages with very short content?
    I'm actually concerned about the gap in the footer and that the background isn't loading on the page all the way down.

    I know tables don't seem the right choice but I simply don't know what else to do to debug it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •