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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Location
    Australia
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Page not resizing to content

    Hi,

    I'm having an issue with my css. When there is a table or image on my page that is larger than the window size I get a large gap where the rest of the layout is resizing to the window size, not the content size including the table or image.

    The page is here: http://se.nrmspace.com.au/nrmweather...nID=collection

    http://se.nrmspace.com.au/nrmweather/stylesheet.css

    To replicate the problem resize your window so that it is narrower than the image.

    Same problem in IE, Chrome & FF.

    I don't think this is a clear fix issue as I tested it without the floating side menu with the same results.

    Any help would be appreciated.

  • #2
    New to the CF scene
    Join Date
    May 2009
    Location
    Australia
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still looking for a solution on this.

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You could try a min-width on the container?

  • #4
    New to the CF scene
    Join Date
    May 2009
    Location
    Australia
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I have though of using min-width but the image sizes change. I don't want to force the largest page width when it won't always be necessary.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    The page is reacting that way because the image is dynamically rendered. It's reading the width of <html>'s content as one width, then loads the image, which is bigger than that width.

    What I would do is take <html> out of the flow so it reacts more to the browser window. Try changing your CSS from this:

    Code:
    html, body {
     height: 100%;
     width: 100%;
    }
    …to this:

    Code:
    html, body {
     height: 100%;
     float: left; 
    }
    Hope that helps…

  • #6
    New to the CF scene
    Join Date
    May 2009
    Location
    Australia
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Looks interesting. I will give it a go.

    The solution I'm using at the moment is overflow-y: hidden, overflow-x: auto, but there is vertical scrolling required to find the horizontal scroll bar so not the best.


  •  

    Posting Permissions

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