Text not displaying correctly in Subcategories

[jboras]

Hi, can anyone tell us why the text is not showing correctly in subcategories?

 

eg: http://fujitech.asia/index.php?_a=category&cat_id=20

 

The Subcat description should be under the jpeg but it seems to flow just to the right of it.

 

Any suggestion would be greatly appreciated

The only change we did was:

 

#subcategories > div.subcategory {

display: inline-block;

height: 120px;

text-align: center;

vertical-align: top;

width: 92px;

 

clanged the with to 92 px so that the subcats take up the width of the skin in full rather squashed left

[bsmither]

In the template skin content.category.php, make the following edit:

Was:
  <div class="subcategory">
    <a href="{$subcat.url}" title="{$subcat.cat_name}">
      <img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" />
    </a>
    <a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a>
  </div>
 
Now:
  <div class="subcategory">
    <a href="{$subcat.url}" title="{$subcat.cat_name}">
      <img src="{$subcat.cat_image}" alt="{$subcat.cat_name}" />
    </a><br />
    <a href="{$subcat.url}" title="{$subcat.cat_name}">{$subcat.cat_name}</a>
  </div>

The design of this subcategory block has an unrealized assumption that, because the image would take the full width of its container, the text would by necessity have to flow to the next line - below the image.

 

But, since the image does not necessarily take the full width of its container - as when the source image is much taller than it is wide - if a word of text can fit in the remaining space to the right of the image, it will do so.

 

Adding the <br /> tag will force a line break.
 

[ayz1]

and you may need to increase the height setting in the css to make space for the text.

[jboras]

Thank you; the little <br /> fixed it.