Extend wrapper to both top & bottom of browser..

[jlauren]

Hey all!

Just wondering how I can get my wrapper to extend to both the top and bottom of the browser on ALL pages? And is anyone noticing the shift in the wrapper when clicking to enter the website? I'm using Safari..not sure if that's showing up on IE or FF.

Thank you kindly!

JLauren

[jfriend]

Link to your site please?

[jlauren]

Link to your site please?


Right, right...sorry, trying to do too many things at once

www.jlauren.smugmug.com

[jfriend]

You have several issues going on.
You have defined a div called "wrapper", but it has no closing </div> so it isn't working properly.
The <height=100%> you have right after the wrapper div is invalid. Remove it.
Add this CSS: html, body, #bodyWrapper {height: 100%;}
Test in multiple browsers because we may have to do something different in different browsers. This should work in standard compliant browsers (like Firefox).

[jlauren]

You have several issues going on.
You have defined a div called "wrapper", but it has no closing </div> so it isn't working properly.
The <height=100%> you have right after the wrapper div is invalid. Remove it.
Add this CSS: html, body, #bodyWrapper {height: 100%;}
Test in multiple browsers because we may have to do something different in different browsers. This should work in standard compliant browsers (like Firefox).


Hi there,

I took a break from customizing as I had deadlines to meet, but am back at it again. I initially tried what you suggested and everything on my screen went haywire!

I've currently taken out the <height=%100> from my Custom Header as suggested. And when I added the CSS you suggested, my elements went everywhere. I'm also not sure how to close the "wrapper" div properly...if you can let me know how I will immediately.

Ultimately, I'd like to make sure that my black wrapper extends from top to bottom of every page in every browser. I'll do whatever it takes to fix that. Thank you for your time and consideration.

JLauren

www.jlauren.smugmug.com

[jlauren]

Hi there,

I took a break from customizing as I had deadlines to meet, but am back at it again. I initially tried what you suggested and everything on my screen went haywire!

I've currently taken out the <height=%100> from my Custom Header as suggested. And when I added the CSS you suggested, my elements went everywhere. I'm also not sure how to close the "wrapper" div properly...if you can let me know how I will immediately.

Ultimately, I'd like to make sure that my black wrapper extends from top to bottom of every page in every browser. I'll do whatever it takes to fix that. Thank you for your time and consideration.

JLauren

www.jlauren.smugmug.com


Hi Jfriend,

I know I've asked this question a few times, but I've searched high and low many, MANY times on both the dgrin forum and on google etc. I'm not sure if you got the message sent above, but I'm trying to fix this wrapper again by doing what you suggested and am having quite a bit of trouble with it. Perhaps we could take a stab at fixing it again? Thank you!

Jlauren

www.jaimelaurenphotography.com

[jfriend]

Hi Jfriend,

I know I've asked this question a few times, but I've searched high and low many, MANY times on both the dgrin forum and on google etc. I'm not sure if you got the message sent above, but I'm trying to fix this wrapper again by doing what you suggested and am having quite a bit of trouble with it. Perhaps we could take a stab at fixing it again? Thank you!

Jlauren

www.jaimelaurenphotography.com (http://www.jaimelaurenphotography.com) Sorry, but beyond what I've posted already, I don't know how to do this.

[jlauren]

Sorry, but beyond what I've posted already, I don't know how to do this.


Hi John,

I just thought I'd let you know that I discovered, in an old file tucked away, my original CSS that I lost a couple months back before I started revamping things!!! I feel like I've discovered the holy grail! I've been able to restore things almost completely and have gotten the container to extend to the top and bottom of the browser in all but one case. I thought now that I've got almost everything in order, you might be able to help me this one last time with the container!

In Firefox, my container remains several pixels from the bottom, at least on the computer I'm using. Is it doing so on yours? I've tried changing the footer, the wrapper, the body...to no avail!

In IE, on my client password sign-in pages, my container grows larger to the right! Not sure how to fix this inconsistency: http://www.jaimelaurenphotography.com/Weddings/Clients-2009/Richard-Nicole/10183196_V2Jgs

Here's my main site again: www.jaimelaurenphotography.com

Thank you again for all your help on everything else, I am incredibly thankful!

Cheers!

Jlauren

[jfriend]

Hi John,

I just thought I'd let you know that I discovered, in an old file tucked away, my original CSS that I lost a couple months back before I started revamping things!!! I feel like I've discovered the holy grail! I've been able to restore things almost completely and have gotten the container to extend to the top and bottom of the browser in all but one case. I thought now that I've got almost everything in order, you might be able to help me this one last time with the container!

In Firefox, my container remains several pixels from the bottom, at least on the computer I'm using. Is it doing so on yours? I've tried changing the footer, the wrapper, the body...to no avail!

In IE, on my client password sign-in pages, my container grows larger to the right! Not sure how to fix this inconsistency: http://www.jaimelaurenphotography.com/Weddings/Clients-2009/Richard-Nicole/10183196_V2Jgs

Here's my main site again: www.jaimelaurenphotography.com (http://www.jaimelaurenphotography.com)

Thank you again for all your help on everything else, I am incredibly thankful!

Cheers!

Jlauren Can you remind me again what you're trying to accomplish? I don't understand what the "wrapper" is that you want to extend to the bottom.

FYI, your homepage slideshow does not work in IE7 because you have a script error. Remove the trailing comma on the last line of parameters in your bio (shown in red):

var ssConfig = {
AlbumID: '6997174',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
clickUrl: 'http://jlauren.smugmug.com/Other/New-Gallery/10981473_PJqtX',
showThumbs: 'false',
showButtons: 'false',
crossFadeSpeed: '1000',
borderThickness: '4',
borderColor: 'ffffff',
randomStart: 'true',
padding: '0px',

};

[jlauren]

Can you remind me again what you're trying to accomplish? I don't understand what the "wrapper" is that you want to extend to the bottom.

FYI, your homepage slideshow does not work in IE7 because you have a script error. Remove the trailing comma on the last line of parameters in your bio (shown in red):

var ssConfig = {
AlbumID: '6997174',
newWindow: 'false',
transparent: 'true',
showLogo: 'false',
clickUrl: 'http://jlauren.smugmug.com/Other/New-Gallery/10981473_PJqtX',
showThumbs: 'false',
showButtons: 'false',
crossFadeSpeed: '1000',
borderThickness: '4',
borderColor: 'ffffff',
randomStart: 'true',
padding: '0px',

};



Thank you John for that correction in my slideshow. I'd been assuming that the slideshow didn't play because my husband doesn't have Flash installed on his pc for IE.

Also, the 'wrapper' is the black 'container' (are they not called the same thing? forgive me lack of technical lingo) that holds my content and is on top of my background. Basically all along I've been trying to extend the 'container/wrapper' from top to bottom in every browser. I've almost done that now but still have a few glitches that I explained in the email above. Sorry I wasn't more clear....I'm trying to be!

[jfriend]

Thank you John for that correction in my slideshow. I'd been assuming that the slideshow didn't play because my husband doesn't have Flash installed on his pc for IE.

Also, the 'wrapper' is the black 'container' (are they not called the same thing? forgive me lack of technical lingo) that holds my content and is on top of my background. Basically all along I've been trying to extend the 'container/wrapper' from top to bottom in every browser. I've almost done that now but still have a few glitches that I explained in the email above. Sorry I wasn't more clear....I'm trying to be! It was not going to the bottom of the screen for me in Firefox, IE7 or Safari.

Try replacing this part of your CSS:

CSS: html, body {
height: 1000%;
min-height:1000px;
height:auto !important;
height:1000px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
background-color: #000000;
}

#bodyWrapper {
top:0px;
bottom:0px;
height: 1000%;
min-height:1000px;
height:auto !important;
height:1000px;
background-color:#000000;
width: 900px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
}
with this:

html, body {
margin: 0;
padding: 0;
height: 100%;
}

#bodyWrapper {
height: 100%;
background-color: #000000;
width: 900px;
padding: 10px 0;
margin: 0 auto;
}

[jlauren]

I remember you gave me that coding a while back and, just like that time, when I inserted it again after taking out what you suggested, it threw everything way off! I'm confused--if the code I've got allows me to see everything properly on my browsers, why would it be different on someone else's? I'm not sure how to go about making everything right if I'll never know what it's doing on someone else's screen!

Thanks!

[jfriend]

I remember you gave me that coding a while back and, just like that time, when I inserted it again after taking out what you suggested, it threw everything way off! I'm confused--if the code I've got allows me to see everything properly on my browsers, why would it be different on someone else's? I'm not sure how to go about making everything right if I'll never know what it's doing on someone else's screen!

Thanks! Did you try this code? I don't ever remember giving it to you before and it works perfectly for me in Firefox. I need you to put it in place before I can check it in other browsers, but it should work if you insert it properly without causing errors.

If it doesn't work, you can always just go back to what you had, but you ask for my help and this is what I suggest.

When you say, threw everything off, what did you see and on what pages?

Also, do you realize that this block of CSS is doing nothing because it's a CSS error because of the text I've shown in red? Removing it changes nothing because the browser is ignoring it.

CSS: html, body {
height: 1000%;
min-height:1000px;
height:auto !important;
height:1000px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
background-color: #000000;
}


Do you also realize that you have height set to 1000%, not 100%?

[jlauren]

Did you try this code? I don't ever remember giving it to you before and it works perfectly for me in Firefox. I need you to put it in place before I can check it in other browsers, but it should work if you insert it properly without causing errors.

If it doesn't work, you can always just go back to what you had, but you ask for my help and this is what I suggest.

When you say, threw everything off, what did you see and on what pages?

Also, do you realize that this block of CSS is doing nothing because it's a CSS error because of the text I've shown in red? Removing it changes nothing because the browser is ignoring it.

CSS: html, body {
height: 1000%;
min-height:1000px;
height:auto !important;
height:1000px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px 0;
background-color: #000000;
}


Do you also realize that you have height set to 1000%, not 100%?


Hi John,

Thanks for your quick responses. I've entered the code you suggested so you can take a look. I changed it back so quickly because I didn't want anyone to see the mess it made! It's identical to the code you gave me before (sorry not exactly the same code, but exactly the same results)

"3. Add this CSS: html, body, #bodyWrapper {height: 100%;}"

So, what I'm seeing in Safari now is the following:

Homepage: http://www.jaimelaurenphotography.com/ The wrapper extends to just below the slideshow
Portraits: http://www.jaimelaurenphotography.com/Portraits The wrapper extends to just above Administrator Login
Portraits/Public Galleries: http://www.jaimelaurenphotography.com/Portraits/Public-Galleries The wrapper extends partway down the screen, then shrinks to a smaller size, then ends above "Enter Site"
About: http://jlauren.smugmug.com/gallery/7029389_v2FHy The wrapper extends partway down the page and ends mid-way through the text. The same goes for my Registry and Contact pages.

With Firefox and IE absolutely no additional problems except for the ones I asked about earlier on today (FF--not seeing the wrapper extend down to the last little bit of the screen and IE the wrapper enlarging in size to the right when visiting the client password-required pages)

As far as the 1000% goes, when I found my old code, this is apparently what I had and it worked so I just went with it!

And of course I really appreciate your suggestions. Please don't think I take them lightly!!! I try everything that you suggest but am just wondering why things show up differently on different screens. How can one be certain that everyone viewing your site will be seeing the same thing?

Thank you! I hope this was thorough enough!!!

Oh and I took the "CSS" out. Thank you :-)

Jlauren

[jfriend]

Hi John,

Thanks for your quick responses. I've entered the code you suggested so you can take a look. I changed it back so quickly because I didn't want anyone to see the mess it made! It's identical to the code you gave me before (sorry not exactly the same code, but exactly the same results)

"3. Add this CSS: html, body, #bodyWrapper {height: 100%;}"

So, what I'm seeing in Safari now is the following:

Homepage: http://www.jaimelaurenphotography.com/ The wrapper extends to just below the slideshow
Portraits: http://www.jaimelaurenphotography.com/Portraits The wrapper extends to just above Administrator Login
Portraits/Public Galleries: http://www.jaimelaurenphotography.com/Portraits/Public-Galleries The wrapper extends partway down the screen, then shrinks to a smaller size, then ends above "Enter Site"
about: http://jlauren.smugmug.com/gallery/7029389_v2FHy The wrapper extends partway down the page and ends mid-way through the text. The same goes for my Registry and Contact pages.

With Firefox and IE absolutely no additional problems except for the ones I asked about earlier on today (FF--not seeing the wrapper extend down to the last little bit of the screen and IE the wrapper enlarging in size to the right when visiting the client password-required pages)

As far as the 1000% goes, when I found my old code, this is apparently what I had and it worked so I just went with it!

And of course I really appreciate your suggestions. Please don't think I take them lightly!!! I try everything that you suggest but am just wondering why things show up differently on different screens. How can one be certain that everyone viewing your site will be seeing the same thing?

Thank you! I hope this was thorough enough!!!

Oh and I took the "CSS" out. Thank you :-)

Jlauren What you have now (which looks like the CSS I suggested) is working perfectly for me in Firefox, IE7 and Safari on Windows Vista in all your pages and at all browser window heights. I'd suggest clearing your browser caches because you're surely not seeing the same thing I am.

[jlauren]

What you have now (which looks like the CSS I suggested) is working perfectly for me in Firefox, IE7 and Safari on Windows Vista in all your pages and at all browser window heights. I'd suggest clearing your browser caches because you're surely not seeing the same thing I am.

Hi again,

I've been a royal pain, I'm sure. But even when I cleared my cache, no changes...

[jfriend]

Hi again,

I've been a royal pain, I'm sure. But even when I cleared my cache, no changes... I think something odd is going on at your end because it's working great for me in all browser I try. At this point, I'd suggest you try some other computers. I think you have a working CSS design, but apparently some other issue that's complicating things.

FYI, here are some other errors to fix.

1) Remove this from the img tag in your banner because it's illegal HTML and is not doing anything:

border="solid 1px white"

2) Remove the part in red. It's also illegal and is not doing anything.

<div id="wrapper"><width="900" min-height="100%">

3) Remove the part in red. It's also illegal and is not doing anything.

<div (http://htmlhelp.com/reference/html40/block/div.html) id= "myFooter" align="center" min-height="10%">

4) In your footer, remove the part in red. There is no open <font> tag so the </font> is illegal.

</Font></p></div>

I separately discovered that there appears to be no closing </div> for the <div id="bodyWrapper">. This is Smugmug's issue, not yours so I will post a bug report for them.

[jfriend]

Hi again,

I've been a royal pain, I'm sure. But even when I cleared my cache, no changes... It is possible your issue is caused by this apparent bug: http://www.dgrin.com/showthread.php?t=162305.

You could try a work-around and put a </div> at the very end of your custom footer.

[jlauren]

It is possible your issue is caused by this apparent bug: http://www.dgrin.com/showthread.php?t=162305.

You could try a work-around and put a </div> at the very end of your custom footer.


Hi John,

I fixed all the errors. Also put a </div> at the end of my custom footer, but no changes. It's odd that you don't see anything wrong and for me everything has gone haywire. I'm checking the Safari on my Mac, the IE & Firefox on a PC and then called my husband at work and he checked my site on IE (when I had my coding up) on another PC and my coding looked fine. I'm going to try and put my old coding in the CSS to try again and if you could tell me if you see anything wrong in your browser that'd be great!

Thank you!

JLauren

[jfriend]

Hi John,

I fixed all the errors. Also put a </div> at the end of my custom footer, but no changes. It's odd that you don't see anything wrong and for me everything has gone haywire. I'm checking the Safari on my Mac, the IE & Firefox on a PC and then called my husband at work and he checked my site on IE (when I had my coding up) on another PC and my coding looked fine. I'm going to try and put my old coding in the CSS to try again and if you could tell me if you see anything wrong in your browser that'd be great!

Thank you!

JLauren Here's what I see now:

Firefox:
http://jfriend.smugmug.com/photos/813779266_KjBmj-L.jpg

Safari:
http://jfriend.smugmug.com/photos/813779422_abNZp-L.jpg

IE7:
http://jfriend.smugmug.com/photos/813779323_HTWj7-L.jpg