Hi folks,

Still working on the Good Eats website and now I'm having problems with padding and margins on my product list.

You can see that there is an odd amount of space between the image and the price that I can't seem to figure out (http://www.goodeatspizza.com/?munchies,26) . I've been playing with the numbers on the style sheet all night and can't figure it out. All I know is that the 15 pixels of padding on the photo class bumps everything down, yet I can't figure out how to shrink the padding between the picture and the price. Any thoughts would be most helpful.


/* PRODUCTS LIST */
#products{float:left;width:100%;list-style:none;}
#products li{float:left;width:135px;padding:0;border:1px solid #dcdcd8; text-align:center; margin:0 5px 5px 0; height:175px;}
* html #products li{width:135px;}
#products li .photo{font-size:0px;line-height:0px; padding:15px;}
#products li .photo img{border:0;}
#products li .photo a:hover img{border:0;}
#products li h3{font-weight:normal;font-size:13px;border:0; height:32px; background:none;}
#products li h3 a{text-decoration:none; line-height:16px;}
#products li h3 a:hover{text-decoration:underline;}
#products li h4{padding:2px 2px 2px;font-weight:normal;font-size:0.917em;}
#products li h4, #products li h4 a{color:#a78b65;}
#products li h4 em{padding:0 5px;}
#products li h4 a:hover{color:#d01c02;}
#products li h5{font-size:1em;font-weight:normal; display:none;}
#products li h5 a{background:inherit;color:#666;}
#products li .price, #products li .noPrice{margin:0 0 5px 0;padding:0px 0 0;color:#ee0f04;text-decoration:none;}
#products li .price em{margin:0 0 5px 0; color:#a78b65;font:bold 1.083em Verdana, sans-serif;font-style:normal; display:none;}
#products li .price strong, #products li .noPrice strong{font:bold 14px "Verdana", Times, serif;}
#products li .price span{padding-left:4px;font:bold 1.083em sans-serif; display:none;}
#products li .basket{margin:17px 0 5px 10px;font-size:0.8em;font-weight:bold;}
#products li .basket a{display:block;padding:3px 25px 3px 5px;border:1px solid #f00;background:url('img/cart_bg2.png') no-repeat right center;background-color:inherit;color:#fff;text-decoration:none;}
.moreinfo {padding:5px 0;}
#products li.pages{border:0;color:#69401f;}
#products li.pages a{color:#7f7f66;}
#products li.pages a:hover{color:#d01c02;}

Use the css shorthand for your custom padding and margins:

padding: top right bottom left;

your photo div has a 15px padding all round, your moreinfo div below that has 5px padding to the top.

Its because your floating everything.... And you need to clear the floats.... I suggest looking this up in google - as its quite complex to understand with to start with - but once you've understood it - CSS will become a lot easier & you'll understand why certain things do stuff :P

Its because your floating everything.... And you need to clear the floats.... I suggest looking this up in google - as its quite complex to understand with to start with - but once you've understood it - CSS will become a lot easier & you'll understand why certain things do stuff :P

With the greatest respect intented, your wrong! Can you show us how clearing the floats will affect the space between the images and the price?

I did take a quick look and taking some of the 20px inclusive padding off the bottom of the #photo div and the top of the #moreinfo div reduces it, there is also a suggestion of making the #products li height declaration a little bigger than the current 175px to give yourself a little more room. Giving the photo container a uniform height of say 100px may also help keep everything inline.

If you start your site from scratch by using BlueprintCSS or Grid960, you're much less likely to have layout problems like this. Definitely worth checking out.