Hi,

 

Got an odd issue i can't seem to fix where when you go to any 404 page, because the site is the shortest it is than any other page, a gap exposing the body background is displayed under the footer. I tried a clearfix class on the footer to remedy a possible issue with height but that didn't work amongst the usual.

 

An example 404 page is: http://www.voltronik.com/2010/082

 

Anyone have any suggestions?

 

Many thanks,

-Jack

Looks fine here (FF3.6).

 

What browsers is this happening in?

Looks fine here (FF3.6).

 

What browsers is this happening in?

 

 

Safari 5.0.1 on Mac OS X 10.6.4

 

It seems to work in IE8 and FF 3.6 in WinXP. Odd...

 

 

Sticky footer?

Might fix this for you...

Sticky footer?

Might fix this for you...

 

Thanks, i agree it would and i've used that lots before, i was just trying to avoid it this time round. Might not be able to.

Can anyone else reproduce it in Safari 5.0.1?

I can reproduce it in Chrome 5, Safari 5.0.1, Firefox 3.6.3, Flock 2.6 and Opera 10.61 - all for OS X 10.6.4.

It's fine in Safari Win version, so it may be a bug in Safari Mac.

 

As a workaround I'd suggest applying the footer background image to your BODY tag, that will ensure it tiles to the full viewport. The current BODY background wiould then need to be shifted to your main content container.

I would try that but I'll have about 150px of extra space under the footer. Odd problem and as you say, not limited to Safari. Wonder what it is then...

A bit of space under the footer never hurt anyone - there agin you could take that 150px out?

I see the problem on Safari Win.

 

It seems to be cause by the body height set to 100% in jquery.lightbox.min.css

 

As to why I am not sure, also what impact on lightbox removing that setting I am also not sure, you could try removing it and see. I can see that the computed height of body is changed if this attribute is set/unset.

I see the problem on Safari Win.

 

It seems to be cause by the body height set to 100% in jquery.lightbox.min.css

 

As to why I am not sure, also what impact on lightbox removing that setting I am also not sure, you could try removing it and see. I can see that the computed height of body is changed if this attribute is set/unset.

 

Thanks for the pointers. I've removed the line you mentioned but it hasn't done anything (it was already included in main stylesheet anyway so was just duplicate).

Still at a bit of a loss as to what it is. Can't seem to find it anywhere in the element inspector in Safari. Not in the footer, not in the body :S

Interesting, when using my browser to zoom out I start to get the space - I've seen that happen before, is your monitor running a very high resolution? BTW it only starts showing at 4x zoom out.

 

Swapping your background images around like I suggested previously worked the other time I saw it.

I'm running a 21.5" iMac with 1920x1080 resolution. I want to cater for screens up to 30" (Apple Cinema Displays) hence why I want to fix it.

 

Very odd that it's only on larger resolutions/zoomed out viewing areas...

Forgot to mention, but there's a couple of HTML errors on that sample page, it'd be worth sorting those so you have a level playing field...

Forgot to mention, but there's a couple of HTML errors on that sample page, it'd be worth sorting those so you have a level playing field...

 

 

I'm not seeing any in the inspector and because it's a 404, W3 won't check it. How are you seeing them?

 

Using WebDeveloper Toolbar in Firefox - Looks like it might be a superfluous closing DIV...

 

cant copy/paste (aaargh!) but see screenshot

Thanks for the pointers. I've removed the line you mentioned but it hasn't done anything (it was already included in main stylesheet anyway so was just duplicate).

Still at a bit of a loss as to what it is. Can't seem to find it anywhere in the element inspector in Safari. Not in the footer, not in the body :S

 

odd, i was using safari inspector, taking it out got rid of the problem, and it didnt show it was set in the main css. I do know browsers have issues with 100% height, I avoid it.

odd, i was using safari inspector, taking it out got rid of the problem, and it didnt show it was set in the main css. I do know browsers have issues with 100% height, I avoid it.

 

Found the culprit extra DIV and have removed but still getting the space issue. I'm starting a new thread on problems with my validation. Maybe that will help fix the issue.

Isn't the issue purely to do with tall monitors/browser windows?

Surely it's just this issue: header+content+footer height < window height?

 

I assumed we had agreed on this!

I'm initiating a new thread on troubles with my validation. Maybe that will assistant fix the issue. detected the perpetrator surplus DIV and have got rid of but still becoming the space issue.

Isn't the issue purely to do with tall monitors/browser windows?

Surely it's just this issue: header+content+footer height < window height?

 

I assumed we had agreed on this!

 

I see what you mean now.

Thing is, how do i go about fixing it? I presume i have to have a height of 100% in their somewhere in order to make it always have an infinitely maximum height (or a height of 100% of the viewport)?

 

-Jack

Have you tried implementing that sticky footer Jack?