SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    question on 100% height bg image

    hi all,

    i'm currently using xhtml strict and employing a basic struture of three divs, floated beside each other, with the two outer divs acting as shadow casters for the center div, roughly like this

    left_shadow - content - right_shadow
    ...
    ...

    im using height:100% on the html, body and relevant div tags to get the full size of the viewport, and here's my question. if, for example your content extends down say 600px and the viewport is resized to 500px, when you then scroll down to the bottom of your content, the background image stops 100px from the end. im assuming this is because all the height settings eventually come from the viewport, which is currently 500px, so does anyone know a way around this?

    to see what im on about, check out http://www.divillysausages.com/test/test.htm , resize the window up, then scroll down to the bottom

  2. #2
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Use min-height: 100%; for the modern browsers with a height: 100%; fed to IE6 and under. On the inner contents that is, not body and html.

    Now, what I don't understand with your design is why you couldn't run a background image down the center of body, drawing both shadow ends and the white center with one image.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi egor, thanks for getting back to me so quick. i tried what you said but no joy. im trying the body background image thing and it's working out better, the only reason i initially tried this approach is cause i've had problems with the body bg image before where ie would push the content out a pixel or two and the whole thing would look stupid. its not really that important that it won't work out another way, but i'm trying to increase my knowledge of xhtml and developing without using tables. cheers for the reply!

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Edit:


    I've put a quick example up here. The styles wrapped in funky-looking comment tags are a few fixes for IE6 and 5. Hopefully it's not too difficult to understand.


    Quote Originally Posted by divillysausages
    hi egor, thanks for getting back to me so quick. i tried what you said but no joy. im trying the body background image thing and it's working out better, the only reason i initially tried this approach is cause i've had problems with the body bg image before where ie would push the content out a pixel or two and the whole thing would look stupid. its not really that important that it won't work out another way, but i'm trying to increase my knowledge of xhtml and developing without using tables. cheers for the reply!
    Ah yes, there is a pixel shift between the body background and contents when you resize the browser window. I think someone posted a fix for this issue before, but can't remember what it was.

    In your case, I would still go with the body background image approach, then make the container 100% high (the shift won't be noticeable on your shadow).

    HTML Code:
    <div id="page">
      <p>Contents here.</p>
    </div>
    Code:
    * { /* Resets below values of ALL elements to 0 */
      margin: 0;
      padding: 0;
    }
    
    body, html {
      height: 100%;
    }
    
    body {
      background: #COLOUR url(images/bg-body.gif) repeat-y center center;
    }
    
    #page {
      background: #FFF;
      min-height: 100%;
      width: 700px;
      margin: 0 auto;
    }
    
    * html #page {
      height: 100%; /* For IE6 and under, as it treats height like min-height */
    }
    Try something like that.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for that egor, im using the body background image as it has the added bonus of keeping all the content in view when you resize the image under 800px (previously there would be a 100px left box to house the left shadow). the "<!--[if lte IE 6]>" thing - is that a css style if comment, or just something that you've commented out?

  6. #6
    SitePoint Enthusiast RogueJedi's Avatar
    Join Date
    Oct 2001
    Location
    Texas
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a conditional comment used by Internet Explorer.

    http://msdn.microsoft.com/workshop/a...omment_ovw.asp
    Rob Nolan
    Do or do not, there is no try.


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
  •