Suggestion on Parent Category list

Firstly, here is the URL:

http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1

I wanted to see if anyone had any suggestions on how to make this tabled list look better. I didn't like the way Zencart naturally listed categories. It wasn't distinct enough and the text wasn't big enough. I made this table in Dreamweaver and inserted the code into the page via the admin. In Firefox and IE, the bullet points of the unordered list show outside of the table. Also, I got an SEO survey saying that nested tables are a no no. I like the general idea though. If I could get the bulletpoints inside the table for Firefox and IE, I think I would be fine. I'm open to any suggestions though on how to make this look better.

Thank you in advance.

There's nothing wrong with a table used to display tabular data, as you are doing. But there's absolutely no reason to put a list item into each table cell. That's just plain weird. :shocking:

So either use list items, which will do the job I think, or use the table and put the data into the table cells without the list item code. Given that tables are problematic to style when nested deeply inside other code, I'd strongly suggest the list item approach.

And something interesting I just noticed... the code structure inside the different table cells is not consistent. If you keep the table stuff, you'll need to fix that up.

As for the bullets being outside your table cells, that's because bullets are generally given a negative indent by default. In effect, they always display outside of the text block but we don't usually notice it because there are not usually close borders to make it obvious.

Final point: don't use Dreamweaver. That page has 41 errors in it, as shown when I checked it in a validator. DW created most of those, including the li in td errors. (At least fix the <br> errors. ZC puts out XHTML code, so the correct form is <br />.)

Rob

The appearance of the stock subcategories list is easy to change. There is no reason to go making a static custom table for it when you can just edit your stylesheet. Add this to your stylesheet: ```
.categoryListBoxContents {
text-align: left !important;
border: 1px solid #aabbcc;
width: 47% !important;
height: 2.5em;
margin: 0.2em !important;
padding: 0.3em;
font-size: 1.2em;
}
.categoryListBoxContents br, .categoryListBoxContents+br {display: none;}

Some of these declarations will not be necessary if you change settings in admin, for instance setting the subcat listing to two per row.

Great. Thanks to both rstevenson and gjh42.

gjh42: I went ahead and applied your css code and it looks great (see below the picture: http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1 ).

The problem now is having control over where I want the categoryListBoxContents on the page. I would want the ListBoxContents below
"Please click on the Printing Plates you need:" , but above the picture of the printing plate.

Thank you for the help so far and thanks in advance for any help you can give with this question.

You could make the printing plate image a background image instead of part of the category description/image, and create space and positioning for it with a category-specific stylesheet.

For a test, add to your stylesheet```
#navColumnOne+td {background: url(http://printingsuppliesdirect.com/Thermal-Ctp-Plates4.jpg) no-repeat bottom center; padding-bottom: 290px;}

To use it, make a new file, c_1.css, in /includes/templates/your_template/css/, with this rule as its only content. (You can add other category-specific rules to this stylesheet later if you want.)

Note that it is common (good) practice to store template images like this in /includes/templates/your_template/images/, and refer to them in stylesheets like
url(../images/your_image.jpg)

It is not good practice to store images of any kind in your root folder, as the folder will quickly get cluttered with lots of detail items when it would be cleaner to have things organized under a relevant group folder.

Hi again.

I decided to go with the tabling method because it gives me more control over page itself. I styled it off of gfh42's styling which is really nice.

The problem I'm having is getting the borders to be the #aabbcc color rather than the default black color.
Again, the link is: http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1

Here's the code below. You will see that I have the border color as "#aabbcc" but it's still showing as the default black color:

<table width="100%" border="1" cellpadding="3" cellspacing="3" bordercolor="#aabbcc" style="font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; border-top:none; border-bottom: none; border-right:none; border-left: none;"> <tr> <td width="268"><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_46">Conventional 1-sided Negative</a><br /> </td> <td width="316"><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_50">Conventional 2-sided Negative<br />

</a></td>

</tr> <tr> <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_9"> Mitsubishi Silver Polyester Plates<br />

</a></td>
<td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_11">PSD Laser Plates<br />

</a></td>

</tr> <tr> <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_10">PSD Violet Photopolymer Plates<br />

</a></td>
<td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_21">Newspaper Plates<br />

</a></td>

</tr> <tr> <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=1_20">Thermal Plates </a></td> <td><a href="http://printingsuppliesdirect.com/index.php?main_page=index&cPath=22_24_29">Epson Metal and Poly Plates</a></td> </tr> </table>

Thanks you in advance again. Much appreciated.

I've never used layout tables for styling, so don't know if bordercolor="#aabbcc" is correct or will apply to the right borders.
However, since you want to use inline styling, I would suggest either using a CSS border-color: #aabbcc; in the main style="etc. of the <table>, or adding a CSS border style to the cells:

<td width="268" style="border: 1px solid #aabbcc;">

gjh42:

I've never used layout tables for styling, so don't know if bordercolor="#aabbcc" is correct or will apply to the right borders.
However, since you want to use inline styling, I would suggest either using a CSS border-color: #aabbcc; in the main style="etc. of the <table>, or adding a CSS border style to the cells:

<td width="268" style="border: 1px solid #aabbcc;">

Perfect. Thank you so much for the help gjh42. I owe you!