Creating new site and want text aligined under category images. After adding four subcategories links/w images two do and two dont.

Page url:http://www.cabinetknobsandhardware.com/centuryhardware.html

Here is the static block html

PHP Code:

<div id="categories">
<div class="col_full">
<?php $_maincategorylisting=$this->getCurrentCategory()?> 
<?php $_categories=$this->getCurrentChildCategories()?>
<?phpif($_categories->count()):?>
<?foreach ($_categories as $_category):?>
 
<?if($_category->getIsActive()):
 
$cur_category=Mage::getModel('catalog/category')->load($_category->getId());
$layer = Mage::getSingleton('catalog/layer');
$layer->setCurrentCategory($cur_category);
 
$catName = $this->getCurrentCategory()->getName(); 
 
if($_imageUrl=!$this->getCurrentCategory()->getImageUrl()):?>
 
<ul id="collection-images">
<li><ahref="<?php echo $this->getCategoryUrl($_category)?>"><imgsrc="/skin/frontend/default/hellopress/images/category_image_default.gif"></a>
<span><ahref="<?php echo $this->getCategoryUrl($_category)?>"><?php echo $catName ?></a></span></li></ul>
<?endif?>
 
<?if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
 
<ul id="collection-images">
<li><ahref="<?php echo $this->getCategoryUrl($_category)?>"><imgsrc="<?php echo $_imageUrl?>"height="80"></a>
<span><ahref="<?php echo $this->getCategoryUrl($_category)?>"><?php echo $_category->getName()?></a></span></li></ul>
 
<?endif;endif;?>
<?endforeach?>
 
 
<?php/* This resets the category back to the original pages category
**** If this is not done, subsequent calls on the same page will use the last category
**** in the foreach loop
*/?>
<?php $layer->setCurrentCategory($_maincategorylisting); ?> 
<?endif;?>
</div>
<br clear=all>
</div>

And here is the css for the category images:

/* ----------------- COLLECTION THUMBNAILS -------------------- */
ul#collection-images {
margin:0;
padding:0;
}
 
ul#collection-imagesli {
float:left;
text-align:center;
width:140px;
height:145px;
padding:20px10px20px10px;
background:url(/skin/frontend/default/hellopress/images/bg-slide.jpg) no-repeat00;
margin:2px;
margin-top:15px;
border:none;
}
ul#collection-imageslia {
color:#666;
}
ul#collection-imagesliaspan {
display:block;
padding-top:10px;
font-size:120%;
}
ul#collection-imagesliaimg {
border-top:2pxsolid#999;
border-left:2pxsolid#999;
border-right:2pxsolid#ccc;
border-bottom:2pxsolid#ccc;
margin:0;
padding:0;
height:77px;
width:102px;
}
ul#collection-imagesliaimg:hover {
border:2pxsolid#832234;
}
ul#collection-imageslia:hover { 
text-decoration:none;
color:#832234;

Thanks in advance to anyone who can help.

Float the <a> :
ul#collection-images li a {
color: #666666;
float: left;
}

Thanks for your reply LadynRed,

That centered the Text but now the category images are not centered over the tile. Any advice?

I removed the float: left; and added a few more categories. After the first two everything aligns the way I want it.

Please help me find out why the first two image categories Images and text wont align. They all use the one piece of code. So I am still stumped.

Hi,
What Cms you are using ?? if you mention it i can tell you how to do it smart

It all looks centered to me in FF and IE7, so where are you seeing the problem?

I don't see the problem either (Chrome), but I did notice a little design issue that you may or may not already be aware of...

The minisearch DIV has a wider width than it should and (unless this was the intended effect) it pushes the useraccess DIV down to the next available line.