'read more' link breaks sticky footer

HTML & CSS
1

i’ve created a sticky footer on a site (using info i got here) but i’ve got some text with a ‘read more’ jquery link on the same page. and when i click ‘read more’ it stuffs up my sticky footer

i’ve uploaded it here so you can see. anyone any ideas?

2

My first suggestion would be to hard code that read more link and not have it inserted via jQuery. Then perhaps add overflow: hidden; to the #wrapper.

3

It looks like the problem is the height:0px; you set on the #leftcol in your newchanges.css


#leftcol {
   margin-bottom: 0px;
   padding-bottom: 0px;
   min-height: 0px;
   [COLOR=#ff0000]height: 0px;[/COLOR]
}
4

cheers for that. seem to’ve got it kind of working

trouble is, as you’ll see now, the faded gradients on the edges don’t extend to the bottom of the page when i click ‘read-more’. any ideas about why this might be?

5

Hi,

The problem is that you should neve use the html element for backgrounds in 100% height situations because that cuts the body short at 100% and will not expand. If you apply backgrounds to the body element instead then it automatically propagates to the html element and therefore there isn’t an issue. This means you can’t use 2 background that stretch more than 100%.

As you are using CSS3 multiple backgrounds already then you can apply the extra image to the body element instead. You also need to contain the floats properly.

Here is the code to do that.


#pagewidth:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
html { background:transparent }
body {
	background-attachment: scroll;
	background-clip: border-box;
	background-color: transparent;
	background-image: url("http://mrcpsychmentor.com/testsite/css/images/sideGradients.png"), url("http://mrcpsychmentor.com/testsite/css/images/brandingCaptionEdge.png"), url("http://mrcpsychmentor.com/testsite/css/images/html_bg_slice.jpg");
	background-origin: padding-box;
	background-position: center top, 0 250px, 0 0;
	background-repeat: repeat-y, no-repeat, repeat-x;
	background-size: auto auto, 100% 55px, auto auto;
	padding-top: 0;
}

Of course that leaves older browsers in the cold (ie8 and under). For ie7+ you could instead add an empty div under the footer and create fixed element that is 100% high and wide and at top:0;left:0 and then apply the image you had to the html to that instead. You will of course need to handle the z-index stacking to make sure it is under the other elements.

If you want to support older browsers with the sticky footer method then read the CSS faq on the sticky footer (see my sig) as you are missing a number of special fixes.

6

u’re a magician. thanks