Product attribute spacing

I am using 30px x 30px swatches for color attribute. I have them displaying horizontally, but there is so much gap between each swatch. What tpl do I edit to tighten this up?

Vito

Layout questions are a lot easier to answer if we can see the site.

No problem, Steve. Here you go. http://www.ceniti.com/store_uv/index.php?main_page=product_info&cPath=1_13&products_id=7

Vito

.attribImg {width:3.2em;}

You can play with margins to move them around.

Fantastic, thanks Steve.

Steve, let me ask you a question. You probably came across this question before and therefore already know the answer. However, being one who derives a certain amount of satisfaction solving things on my own, how could I have solved this? Is there one of the dev tools that would have let me know what proper attribute name should be added to my style sheet?

Vito

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

You know, I've had the Dev tool installed for a while now, and just recently installed Firebug, but never played around with either. That Ctrl-Shift-Y is very cool!!!!!!!!!! What a great tool.

Thanks again, Steve. :)

Vito