Web Analytics Made Easy -
StatCounter Footer problem - CodingForum

Announcement

Collapse
No announcement yet.

Footer problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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 {
    [B][COLOR="Red"]background-color:white;[/COLOR][/B]
    margin:0 auto;
    padding:0 0 [B][COLOR="Red"]70px[/COLOR][/B];
    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

    Comment


    • #3
      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 {
      [B][COLOR="Red"]background-color:white;[/COLOR][/B]
      margin:0 auto;
      padding:0 0 [B][COLOR="Red"]70px[/COLOR][/B];
      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...

      Comment


      • #4
        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.

        Comment


        • #5
          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.

          Comment


          • #6
            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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

            Comment


            • #7
              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; Apr 14, 2009, 09:47 AM.

              Comment


              • #8
                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?

                Comment


                • #9
                  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; Apr 14, 2009, 11:00 AM.

                  Comment


                  • #10
                    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

                    Comment


                    • #11
                      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.

                      Comment

                      Working...
                      X