Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Jul 2007
    Posts
    11
    Member #
    15573
    Hello,

    Im having some problems with my site template that I have been making for use on a project. For some reason, the page has a horizontal scroll bar for no apparent reason, and I dont want a horizontal scroll as it becomes an accessibility nightmare. I was wondering if it was a CSS related problem.

    My site is http://andymonk.awardspace.com for the moment while I am trying to sort this out.

    The CSS file is here http://andymonk.awardspace.com/css/screen.css.

    Also, as you can see at the moment, the footer of the page is suspended and I would like it at the bottom. I have tried to push it down to the bottom before with some CSS, but it appeared to make the horizonatal scroll problem worse.

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    The footer is too wide. I can't check deeper yet, but it's clearly the problem.

    EDIT: I think I've found it. Padding adds to the width of an object, as does margin and border. You have 100% width and 15px padding - this is why, on me, the width becomes 1077 (window width) + 30 (padding).

    Next time, try Firefox with the Web Development Toolbar and Firebug at hand.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Junior Member
    Join Date
    Jul 2007
    Posts
    11
    Member #
    15573
    Thanks for the help Steax, but I'm still having problems. When getting rid of the padding, I still have a similar problem, but this time the header seems to be too wide. Should I change the width?

    BTW, I already use the Firefox web developer toolbar, but will check out FireBug.

    EDIT: Really like FireBug; so useful. Thanks

  5. #4
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    It has a 5 pixel left padding. Firebug's Inspect tool will get you to the element, then use the Layout tab on the right panel. You'll notice a small 5px left padding in your CSS.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  6. #5
    Junior Member
    Join Date
    Jul 2007
    Posts
    11
    Member #
    15573
    Thanks very much, Steax. It works well now .

    Do you have any ideas on how to make the footer position itself at the bottom? I tried bottom: 0 and position: absolute, but if too much content is added it goes beneath the footer. I was testing this on FireBug.

    Thanks very much for your help,
    Andy

  7. #6
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    Here ya go! It doesn't work properly in Opera or Safari (it has approximately a 25px white stripe under the footer that you can see if you scroll down), but I am working on that. It does work in IE7 and FF2.

    CSS
    Page
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  8. #7
    Junior Member
    Join Date
    Jul 2007
    Posts
    11
    Member #
    15573
    Thank you very much chris, I really appreciate this. I will look at the Opera/Safari issue and see if I can see anything.

  9. #8
    Senior Member imagn's Avatar
    Join Date
    Jul 2007
    Location
    Los Angeles
    Posts
    156
    Member #
    15594
    You might want to try determining the height offset of either the containing element or the page. It's a little spotty in FF and Safari (MAC) but might help.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:48 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com