www.webdeveloper.com
Results 1 to 9 of 9

Thread: Extra space on the right side of the page??

  1. #1
    Join Date
    Feb 2012
    Posts
    102

    Exclamation Extra space on the right side of the page??

    Hello,

    I can't seem to figure this issue out. For some reason the site is adding extra blank space on the right side of the pages. Even when the browser is maxed out there is a horizontal scroll bar that scrolls over to blank space. I have tried setting the width and putting overflow to auto but that does affect anything. It looks right when I put overflow to hidden but then if you make the browser window smaller no scroll bar appears. I am putting this code on the body tag. Here is my website so you can see for yourself - www.realitytvaddict.com
    Here is the CSS that I have for the body:
    Code:
    body {
     margin:0px;
     
     padding :0px;
     text-align:center;
     height:100%;
     width:100%;
     overflow: auto;
     /*background-color: #9B50FF;*/  background-color:#919191;
    
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    Let me know what you think the issue could be as I would like it to not scroll over when the browser window is maxed but have the scroll bar when it is smaller.

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    There is really no reason to specify the width, height and overflow CSS properties in the body tag.
    The height:100% is only useful when you are trying to vertically center the page (first child of the body).
    The overflow:auto causes an horizontal scroll bar to appear even though the page is not wider than my screen size: not aesthetically pleasing and usability problem.

    So my advice is to ditch all the 3 properties mentioned above.

  3. #3
    Join Date
    Feb 2012
    Posts
    102
    Quote Originally Posted by holyhttp View Post
    There is really no reason to specify the width, height and overflow CSS properties in the body tag.
    The height:100% is only useful when you are trying to vertically center the page (first child of the body).
    The overflow:auto causes an horizontal scroll bar to appear even though the page is not wider than my screen size: not aesthetically pleasing and usability problem.

    So my advice is to ditch all the 3 properties mentioned above.
    I did what you suggested but the horizontal scroll bar is still showing up. The only way to remove the extra space, that I have found, is to use : overflow-x: hidden; but then the scroll bar doesn't show up when the browser window is minimized and that is a problem. If you have any other suggestions that could possibly be causing this to happen I would be very happy to try them out.

  4. #4
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    It's then obvious there must be some HTML issue in your web page.
    But because you only have 2 direct child elements of the body, add overflow:hidden;
    on the CSS style of #container and #container1.
    That should resolve the issue.
    If you still see the horizontal scrollbar then double-check your HTML to make sure all tags are properly formatted.

  5. #5
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    Lot's of luck trying to find the specific cause. There is so much absolute positioning, that you don't actually have a layout, you have a drawing. Somewhere the math messes it up, because a position plus width, or the specification of a parent or two unrelated elements interact is breaking it. With that much absolute positioning, it will always be broken in many browser/version/user settings.

    IMO it is an unworkable design.

  6. #6
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    @COBOLdinosaur you are right that too many absolutely positioned elements are not the way to go. That's the mistake most newbies make thinking it give them more control.

    However because #container and #container1 are set to position:relative, by adding overflow:hidden, this should be a temporary fix provided mcco has the HTML properly formated.

  7. #7
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    It may give a short term fix but it is a structure made of very fragile glass and it will keep breaking ever time it is touched. It would be better to just start all over with a flexible approach, instead of trying to limp to the next problem. At some point it will have to be re-done correctly anyway, so why waste resources patching.

  8. #8
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    Every website has to be redesigned at some point. They are all not perfect. Even when you want to make some improvements in your current project, there are some constraints (i.e. time, money, ...) that forces you to go with a "good enough" solution.

    We can only try to help mcco with actual tips and not just ask him to tear everything down and rebuild from scratch. We all learn from our mistakes .... at some point.

    It's an iterative process of refinements.

  9. #9
    Join Date
    Aug 2012
    Location
    Canada
    Posts
    56
    If a developer is under the gun because of time restraints then certainly a quick fix, patch or even a serious hack might be in order, but when there is clearly a reliability issue, it needs to be scheduled for re-write. If it is just allowed to continue limping along, then it may come to a point where it just can't be fixed anymore just as a new "we need this change in a hurry" comes along. If the current work is not mission critical, then fixing it right now makes sense and will reduce maintenance cost of the life of the page.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles