ConLib:CategoryGridPage4 CSS Theme Issue

[frankenstein897]

For the life of me I can't seem to correct a formatting issue with my category listings. They are using CategoryGridPage4. I used that because I want to display the category data. The problem is that the grids are lining up correctly. If I switch to one of the other grids they don't line up either. But, if I switch to another theme like the default Ablecommerce theme it is all lined up correctly. Obviously it is with my theme, which I got from Able. I know I could have them fix it but, I consider it an opportunity to try and fix it myself so I can get more comfortable with Able. Since I am so new to it. Can anyone point me in the right direction? You can see my issue here:

http://www.networkcablesonline.com/Cabl ... s-C89.aspx
or
http://www.networkcablesonline.com/Racks-C84.aspx

I know I can try to make all of my pictures the same size but if I switch to another theme it seems to line up correctly even with the different image sizes.

Thanks,
Chris

[mazhar]

I believe you will be needing some adjustments in your style sheet. Go to Website/App_Themes folder and then locate the folder with name of your current applied theme having the issue. In theme folder you will see a file called styles.css edit it. Then locate following style

Code: Select all

.catalog .tableNode .Thumbnail { ..... }

Now open the style sheet of theme where you see thumbnail image sizes are working. Then locate and copy style value from working theme and update your current theme style.

[clevername]

If you are not familiar with CSS or .NET this may be difficult. I looked at your code a little bit and a quick way to get what you want would be to assign the table data's vertical align property to bottom.
Meaning, go to your App_Themes/Computer_Store_001/style.css and change the following code:

(located on line 821)

Code: Select all

.catalog .tableNode {
    background-color: #272727;
    height: 300px;
    text-align: center;
    vertical-align: top;
    width: 173px !important;
}

to this:

Code: Select all

.catalog .tableNode {
    background-color: #272727;
    height: 300px;
    text-align: center;
    vertical-align: bottom;
    width: 173px !important;
}

[frankenstein897]

Thank you both!!!! You rock!