SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    page cutting off on lower resolutions

    Good day. I am not sure what I can do about this issue. If you go here: http://store.scrapbookingfanatics.com/index.php you will see that the page shows fine on a screen resolution larger than 1024x768. However, when you view it at the 1024x768 res. part of the right side of the page is cut off, forcing you to scroll horizontal to the right. The way it is layed out is the navigation bar and the big white box with all the content in it, is set in a container with a width of 1024px. The graphics around that container have a separate container with a width of 1400px (which is where the problem is). So the 1024px container is sitting inside of the 1400px container. I did this so that the layout would stick together and not "break". Any suggestions on how to solve my 1024x768 screen resolution issue would be greatly appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why don't you apply that background to the middle of a 100% container instead and let it slide off to the side.

    e.g.

    Code:
    #maincontain {
    background:url("images/background.jpg")  no-repeat  50% 0 transparent;
    height:100%;
    min-width:1024px;
    overflow:hidden;
    width:100%;
    You will need a min-width of 1024px to stop it at the edge but it won't work in IE6 though as it doesn't understand min-width.

    The height:100% along with overflow:hidden is an accident waiting to happen (see faq on 100% height). If 100% worked in that position then you would find that any content that goes below the fold would be hidden. Luckily for you you have a form container around the page and therefore the height:100% isn't working and defaults to auto.

    If the form is your page wrapper then you could use that instead of maincontain and apply the image to that instead and save a div.

    Code:
    html,body{
    height:100%;
    margin:0;
    padding:0;
    }
    form#maincontain{
    min-height:100%;
    margin:0;
    overflow:hidden;
    background:url("images/background.jpg")   no-repeat  50% 0 transparent;
    min-width:1024px;
    overflow:hidden;
    width:100%;
    
    
     
    }
    * html form#maincontain{height:100%;overflow:visible}

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply! That makes sense.

    Much appreciated bud!


Bookmarks

Posting Permissions

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