views:

167

answers:

1

I can't figure out why this page: http://wohf.squarespace.com/newsletter/ gets cut off at the bottom in safari, seems to work fine in all other browsers (as far as I found so far)!!

I am using some jquery and css for the sidebar and the content to match heights and for the canvas to run top to bottom with the footer always at the very bottom of the page. everything is working (as far as I can tell so far) on the rest of the site, the problem is only on this newsletter page and only in safari.

Can anyone see the problem?

Here is the jQuery I am using:

    //***************************************
    // Position Elements on Newsletter Page
    //***************************************
    // Clear previously specified heights
    $("#modulePage6177253, #modulePage6177253 #canvasWrapper, #modulePage6177253 #canvas").height('auto');

    $("#moduleContentWrapper6177535").insertBefore("#modulePage6177253 #pageBodyWrapper");
    $("#moduleContentWrapper6177544").appendTo("#modulePage6177253 #pageFooterWrapper");
    $("#modulePage6177253 #pageFooterWrapper").insertAfter("#modulePage6177253 #canvasWrapper");

    equalHeight($("#modulePage6177253 #sidebar1, #modulePage6177253 #content"));
    equalHeight($("#modulePage6177253, #modulePage6177253 #canvasWrapper, #modulePage6177253 #canvas"));

    $("#modulePage6177253 #canvasWrapper").css("margin-bottom", "-100px");

function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
}
A: 

It is cut off in Firefox for me, but look at your CSS you have overflow: hidden styles everywhere. I would start by removing those.

Dustin Laine
I just went through and deleted every one I could find and it did not help in safari. what version of firefox are you using? mac or pc?
VUELA
looks like i missed one - let me try to find it.
VUELA
PC, latest release.
Dustin Laine
ok the overflow: hidden was also built-into the original cms template used so i had to overwrite it, so I added:#canvasWrapper, #canvas, #pageBodyWrapper, #pageBody, .verticalNavigationBar, #sidebar1Wrapper, #sidebar1, #sidebar1 .section, #contentWrapper, #content { overflow: visible !important; }doesnt seem to help too much though, a little, there are still problems.
VUELA
i just installed latest version of firefox on my pc and the page does not appear cut off? however, now it seems to be having problems in Chrome where it was fine last time I tested, before changing the overflow.
VUELA
it seems that the page works better with overflow set to hidden.and that the problem is for some reason safari 4 does not like my jquery that is being used to equalize the element heights?
VUELA
It was looking fine in FF, Safari and Chrome. The bottom had some issues in OE and Opera, looked like float clearing issue. You understand that when you have a fixed height and overflow: hidden it will hide any content that exceeds the height, which is what was causing your original problem.
Dustin Laine
i'm pretty sure that the fixed height created from the jquery script to equalize heights is what's causing the problem. the problem isnt that content is being hidden outside the container, it's that the container's height is not properly evaluated in safari.
VUELA
i updated my original question to include the jquery used.
VUELA
With that you are either going to have to go with overflow: auto and get scroll bars or cut it off. You can work your jQuery to only set height on shortest column.
Dustin Laine
I don't understand, I think my jquery equalHeight function is checking each element's height to find the tallest and to match them all to that?if(thisHeight > tallest) { tallest = thisHeight; }
VUELA
what's odd is that the problem occurs if i go straight to the page, but does not occur if i navigate to the page from a link elsewhere in the site:so, problem occurs if i go straight to http://wohf.squarespace.com/newsletterbut does not occur if i go to http://wohf.squarespace.com and click the WOHF News button at the bottom right.weird.
VUELA
It looks good in all browsers right not, with cleared cache. There are some issue in opera with the Google Translate drop down, other than that it looks fine.
Dustin Laine
If I go straight to the newsletter page (http://wohf.squarespace.com/newsletter) i still have the page cut off at the bottom when viewing in Safari 4 on Mac. If I go to the page from the homepage instead (http://wohf.squarespace.com - and click the WOHF News icon at the bottom right) then it seems to work fine until I refresh the page. There is also problems with printing the page.
VUELA
Looks good on PC Safari 4 http://img217.imageshack.us/img217/9116/capturejy.png
Dustin Laine