body background color not extending to bottom of page

[jtwalter]

my site www.julianwalter.com does something very strange when viewed in safari. on the home page, everything looks fine, and the off-white background is everywhere. once you visit a gallery page (link at left), the background color only goes to the bottom of the content and then leaves white space underneath. this does not happen in ff or ie. any thoughts?thanks so much! this site has been very helpful to me

[cousineaug]

my site www.julianwalter.com does something very strange when viewed in safari. . . .snip . . . the background color only goes to the bottom of the content and then leaves white space underneath. this does not happen in ff or ie. any thoughts?

Here is my take on background colour. The background should, unless you specify otherwise, fill the container. When that container is fluid (no size specified), the container closes at the end of the content and so does the background/colour. When I view your site in Safari (5.0.3), all pages look the same: the off-white ends at the end of the content.So it seems some browsers deal with background colour differently - what else is new It seems the solution is to make your BODY fill up the screen:

body {height:100%;}

This way, regardless of the viewport size, your body will expand to fill it and so should the background colour. If this does not work the first time, do not give up. Look at the other wrappers and containers inside your body that SHOULD fill up the screen and make them 100% also.Also, when debugging, assign different colour borders to your DIVs - this will make it easier to spot the offending one.I did this on a fluid page layout (not yet published) and it seems to work in IE, FF, Safari, Chrome, and Opera....good luck...Guy

[jtwalter]

thanks for the reply Guy!(I was going to post this paragraph below, but right before doing so, I found the solution)weeeiiiirrddd, I did a body height 100% and checked it in safari, no change. however, on a force reload (shift+click reload), it worked! however#2 I thought it would be good from there, but no, click another gallery link and it goes back to the original I have a wrapper div that only keeps width and centering, which I also gave a height 100%, and no change. but when I gave it a background color (as well as height 100%), there was again no change, which I expected at least to see a center column go down with the background..solution! (from googling 'safari height 100%' duh) from http://blazenewmedia.com/articles/100-height-issues/ :"For percentages to work properly, the elements parent has to have a defined height. For the DIV in question, the parent is BODY whose parent is HTML.So, we have to specifically set the heights of these two elements in the CSS like so; html, body { height: 100%; }"very interesting. hope this mini thread will help someone else :)thanks again!

[cousineaug]

So, we have to specifically set the heights of these two elements in the CSS like so; html, body { height: 100%; }"

of course...I also went back to my site last night and looked at the CSS - it did have the height declaration as you said above. I stumbled upon that solution and then forgot about it.Good thing about getting old - you can re-learn the same thing over and over again and feel you have accomplished something.

[jtwalter]

of course...I also went back to my site last night and looked at the CSS - it did have the height declaration as you said above. I stumbled upon that solution and then forgot about it.Good thing about getting old - you can re-learn the same thing over and over again and feel you have accomplished something.

haha very well said! my mom always nags to my dad about falling asleep during movies, but he just says it's great cause you can watch it again at some point in the future and it's an entirely new movie!