CSS thumbnails - overriding margins

Hello all,

I'm new here and looking forward to learning from all the experts out there!

I have a slight problem on a page I'm currently working on:

http://www.customportraits.co.uk/cus...-cssedit.shtml

As you can see I've added right and bottom margins to the links/images just to space out the CSS thumbnails. However I am trying to override the right hand images with a class (class="thumbsnopad") with no right margin, so that it fits into the the overall layout. However it doesn't seem to be working and the right side images are just breaking onto the next line.

It supposed to be lke this (but I've been told the coding is clumsy):

http://www.customportraits.co.uk/cus...-gallery.shtml

I would be most grateful if anybody can have a look and tell me where I'm going wrong.

Thanks,

PJC

It's a little difficult for me to know for sure because you don't have any width's specified for the images in the lists.
But looking at the properties of the images some are 254 px wide and some are 255px wide. My guess is if you just reduced the margin-right on the thumbs a you'll be able to fit those three on a line.

Code: Select all

#thumbs a{
    padding: 0px 0px 6px;
    margin-bottom: 6px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #B2CBE4;
    float: left;
    margin-right: 6px;Try 5 or 4 here and see what happens
    margin-top: 0px;
    margin-left: 0px;
}