Hi guys, I have som php problems, see www.shakelab.com, if you move your cursor over one of the top posts, the ones at the bottom moves around, and they are not supposed to, does anyone know what piece of code I have to look for to make it hold it's position?

 

Regards, N

I sincerely doubt it's a PHP problem. What did you want the top items to do when they expand down? Cover the ones below?

I sincerely doubt it's a PHP problem. What did you want the top items to do when they expand down? Cover the ones below?

 

Yes exactly!

#footer {

position:fixed;

}

 

Idk, its basically 2 divs one on top, and when you over over a box its making the top div expand and thus pushing the bottom div down.

 

You need to do something with the css position element.

#footer {

position:fixed;

}

 

Idk, its basically 2 divs one on top, and when you over over a box its making the top div expand and thus pushing the bottom div down.

 

You need to do something with the css position element.

 

Hmm mkay, I guess I have to look in the style.css? It's a WP theme you see, and it's pretty hard to work around!

This is really back practice, but if thats all you have in your footer.

 

Make a png with that footer at the bottom and use it as a body background image... although i could get shot for saying that.

This is really back practice, but if thats all you have in your footer.

 

Make a png with that footer at the bottom and use it as a body background image... although i could get shot for saying that.

 

Here is a piece of my CSS code, sorry for the mess, but I believe I have to add or change a piece of this code in order to make the posts not move each other around.

 

#content { padding-bottom: 25px; position: relative; }
	.entry { position: relative; margin: 0px 15px 15px 0px; background-color: #fff; border: 1px solid #fff; box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow:3px 3px 3px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6); float: left; }	
		.small { width:226px; }
		.big { width:470px; }
			.thumbnail {width: 222px; height: 180px; margin: 2px 0px 14px 2px; position: relative;}
			.big .thumbnail {width: 466px;}

				.thumbnail .overlay {background: url(images/overlay.png) no-repeat; display:block; position: absolute; height: 180px; width: 224px; top: 0px; left: 0px;}
				.big .thumbnail .overlay {background: url(images/overlay2.png) no-repeat; display:block; position: absolute; height: 180px; width: 480px; top: 0px; left: 0px;}
				div.category {background-color: #9a1d0d; display:block; position: absolute; top: 0px; right: 0px; padding: 8px 8px 3px 8px; }
					div.category a {font-size: 22px; color: #ffffff; text-decoration: none; text-transform: uppercase; }
				span.month {font-size: 48px; color: #ffffff; text-decoration: none; text-transform: uppercase; position: absolute; top: 40px; right: 0px; padding-right: 8px;}	
					span.date {display:block; position: absolute; top: 40px; right: 0px; padding-right: 8px;}
		h2.title { padding: 0px 15px; }
			h2.title a {font-size: 30px; color: #9a1d0d; text-decoration: none; text-transform: uppercase; }
			p.postinfo {padding: 0px 15px 10px; font-size: 18px; text-transform: uppercase; color: #2c2c2c;margin-top: -2px; }
				p.postinfo a {text-decoration: none; color: #2c2c2c;}
			.entry-content {background: url(images/entry-bottom-bg.png) repeat-x bottom left; padding-bottom: 10px; }	
				.bottom-bg {background: url(images/entry-top-bg.png) repeat-x top left; overflow:hidden; }
				.bottom-bg .excerpt { padding: 10px 17px 0px; height: 75px; }
	.textright { text-align: right; }
		.entry a.readmore { font-size: 28px; color: #a5a5a5; margin-top: -15px; position: relative; display: block; }
			.entry a.readmore span { margin-right: 0px; }

Any suggestions?