Subcategories

[Guest chimpta]

I am setting up my store in 3.0.10. converting it from 2.0.3. For now I am using the Killer skin. I have subcategories in my store. For the most part I made the category thumbnail images the same width but not the same height. When I go to the painting category where you can view the subcategories it looks terrible.

http://www.mahakali.com/shop/index.php?act=viewCat&catId=1

In 2.0.3 I did not have that problem. There it looks like the images are organized in a table.

http://www.mahakali.com/store/index.php?ca...;Paintings'

I am trying to minimize my mods this time around to make future upgrades easier. Any suggestions on how to get the subcategories more visually pleasing?

Thanks,

Mark

[Robsta]

Andi is right, if the sub-category images are the same size it will enhance your store.

However to work with different size category images, within the Layout.css you will find the '.subCat' class. Add a height style and tailor the height to your categories and you end up with tidier rows. :P

[Guest chimpta]

It really is about resizing your images so they are all the same, not only in the sub cats but throughout the store as this will provide a uniformed look

I tried to change the painting category images so they would all be the same size. At first I was dismayed because what I am seeing is even worse than before. The images, in the firefox browser, are overlapping. I tried it in internet explorer and they look fine. I have been doing almost all my developing in firefox and did not expect there to be such a big difference in the way the store looks.

http://www.mahakali.com/shop/index.php?act=viewCat&catId=1

Any other suggestions on how to fix this for firefox?

Thanks,

Mark

[Robsta]

Firefox and IE interpret padding and widths slightly differently... try commenting out the those styles in the CSS for #subCats and .subCat and seeing what happens.

[Guest chimpta]

Firefox and IE interpret padding and widths slightly differently... try commenting out the those styles in the CSS for #subCats and .subCat and seeing what happens.

I tried changing #subCats and .subCat but that did not help. Any other suggestions?

[markscarts]

Any other suggestions?

Yes.

You have a very simple problem, you are shoe-horning pics of 153px width into a 110px box. IE ignores the CSS width for the smaller box and resizes it to fit the image width. FireFox does exactly what you tell it through CSS - it makes boxes of 110px width, then adds the wider pictures, letting them overflow the narrow, invisible boxes, and overlap one another.

The Cure: Change the width of subcat boxes here, in http://www.mahakali.com/shop/skins/Killer/...eets/layout.css

#subCats {

	background-color: #EBEDFE;

	text-align: center;

	border: 1px solid #C9CEFC;

	margin: 0px;

	float: left;

	width: 99.5%;

} 

.subCat {	

	text-align: center;

	padding: 8px;

	float: left;

	width: 110px;

}

The width given in .subCat needs to be greater than 153px (it is presently 110px). To be more specific, it needs to be greater than the width of your widest category image (they may all be 153px; I don't know). You can experiment with this setting until you get them evenly spaced (nearly centered) on the page.



Tip. When you edit these changes, be sure to check in both IE and FF and fine-tune to look good in both browsers.



Tip. You should also add a height property to the .subCat class, because even if all your images are the same height now, your titles may be different lengths. If some take one line while others take two or three lines, you will once again experience an alignment problem if you do not specify a height that accounts for the needed extra space for longer titles.



Example:

.subCat {	

	text-align: center;

	padding: 8px;

	float: left;

	width: 160px;

		height: 195px;

}

The height setting, like the width, should be adjusted for the best look for your particular store.

:w00t:

[Guest chimpta]

Thanks Markscarts for your clear and detailed explanation. I tried what you said and it worked the first time for both ie and firefox.

For my images I set the .subcat to

.subCat {

text-align: center;

padding: 8px;

float: left;

width: 154px;

height: 177px;

}

Thanks again.

http://www.mahakali.com/shop/index.php?act...fbbbe3b31f9269a