Subcategory Layout Question!!

[LissaE]

Hi Glen, I just came across this thread browsing lol and thought an image behind my subcats would be nice....I have the image there fine:

http://www.havendesignz.com/store/designer-use

The problem I don't know how to fix LOL is that the text is not vertically centered...in FF it sits to the top and in IE it sits to the bottom, I have tried vertical-align: middle but that did nothing LOL

This is what I have in the stylesheet:

.categoryListBoxContents a {
    height: 30px;
    background-image:url('../images/subcat_bg.jpg');
    display:block;
    background-repeat: no-repeat;
    background-position:center center;
    }

Any ideas?

[Website Rob]

If I may offer a suggestion, change your coding around.

from
<div class="categoryListBoxContents" style="width:100%;"><a href="http://www.havendesignz.com/store/designer-use/color-palettes"><img src="images/pixel_trans.gif" alt="Color Palettes" title=" Color Palettes " width="1" height="1" /><br />Color Palettes</a></div>

to
<div class="categoryListBoxContents" style="width:100%; height:30px; line-height:30px; border:1px solid red"><a href="http://www.havendesignz.com/store/designer-use/color-palettes">Color Palettes</a></div>

Note: the border is just you can see what is going on. Remove when desired.


Edit: noticed you are already declaring "height: 30px;" in your CSS so no need to declare again in the HTML.

[LissaE]

Hi Rob :)

Thanx for the suggestion, I appreciate it...I use Firebug though so I can see where the border of the cell is, I tried adding the line-height to the css though and it made no difference, and I don't understand why it behaves so differently in IE than FF, one at top other at bottom LOL if it's didn't do that I would just use padding to fix it :|

*edit...screenshot the wrong bit....and I have just noticed that there are other areas in the stylesheet using the same declaration...gonna try removing some of those and see if that's the problem lol

[gjh42]

Try adding

line-height: 30px;

to .categoryListBoxContents {}

Centers it nicely in Firefox, but I can't view that test in IE.

[LissaE]

Try adding

line-height: 30px;

to .categoryListBoxContents {}

Centers it nicely in Firefox, but I can't view that test in IE.

Thanx Glen :)

I tried that when I saw Rob added it, did center it nicely in FF but in IE the text was at the bottom and half cut off... I hate IE LOL

[gjh42]

Oops, missed Rob's line-height item.

Have you tried

.categoryListBoxContents a {
    line-height: 30px;
    }

It worked just the same as applying it to .categoryListBoxContents { when I tried it in FF, but maybe it will make IE behave where the first version didn't.

[Website Rob]

Thanx Glen :)

I tried that when I saw Rob added it, did center it nicely in FF but in IE the text was at the bottom and half cut off... I hate IE LOL

I do not see where you have changed your code?

As shown in my previous post, the coding I suggested does not use a blank gif nor the <br />, which must both be removed.

[LissaE]

Oops, missed Rob's line-height item.

Have you tried

.categoryListBoxContents a {
    line-height: 30px;
    }

It worked just the same as applying it to .categoryListBoxContents { when I tried it in FF, but maybe it will make IE behave where the first version didn't.

Unfortunately didn't work lol

[LissaE]

I do not see where you have changed your code?

As shown in my previous post, the coding I suggested does not use a blank gif nor the <br />, which must both be removed.

Sorry, I must have missed that bit...will find the file and try it now

[LissaE]

Alright...this is where I am getting stuck LOL

That piece of code is pulled from includes/modules/category_row.php in the following code:

    if (!$categories->fields['categories_image']) !$categories->fields['categories_image'] = 'pixel_trans.gif';
    $cPath_new = zen_get_path($categories->fields['categories_id']);

    // strip out 0_ from top level cats
    $cPath_new = str_replace('=0_', '=', $cPath_new);

    //    $categories->fields['products_name'] = zen_get_products_name($categories->fields['products_id']);

    $list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',
                                           'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br />' . $categories->fields['categories_name'] . '</a>');

I can see where I remove the break....however I am not sure how to remove the image without screwing it up LOL