4 Attachment(s)
Problem with long product category names wrapping to 2 lines
I am building a site based on the iC_AcadameV1.2 template, see here: www.k-conversions.co.uk.
I'm having a problem with the way long names wrap on the category sidebox.
In Firefox, it looks like this:
http://www.zen-cart.com/forum/attach...1&d=1198836630
and in IE looks like this:
http://www.zen-cart.com/forum/attach...1&d=1198836630
I though it seemed strange to fix the height of the menu items, so I changed the CSS from
Code:
li.category-top a{
padding:.4em 0 0 1.5em;
margin:0;
color:#333333;
font-weight:bold;
display:block;
height:1.8em;
border-bottom:1px solid #9a9a9a;
background:#EEEEEE url(../images/boxlistbg.gif) .4em 0.5em no-repeat;
}
li.category-products a{
padding:.4em 0 0 2.3em;
margin:0;
color:#333333;
font-weight:bold;
display:block;
height:1.8em;
border-bottom:1px solid #9a9a9a;
background:#EEEEEE url(../images/boxlistbg.gif) 1.2em 0.5em no-repeat;
}
to
Code:
li.category-top a{
padding:.4em 0 .5em 1.5em;
margin:0;
color:#333333;
font-weight:bold;
display:block;
/* height:1.8em; */
border-bottom:1px solid #9a9a9a;
background:#EEEEEE url(../images/boxlistbg.gif) .4em 0.5em no-repeat;
}
/* Added left padded and removed height to fix 2 line cats */
li.category-products a{
padding:.4em 0 .5em 2.3em;
margin:0;
color:#333333;
font-weight:bold;
display:block;
/* height:1.8em; */
border-bottom:1px solid #9a9a9a;
background:#EEEEEE url(../images/boxlistbg.gif) 1.2em 0.5em no-repeat;
}
and it works great in FF:
http://www.zen-cart.com/forum/attach...1&d=1198836630
but now IE is broken:
http://www.zen-cart.com/forum/attach...1&d=1198836630
Can anyone point me in the right direction? Sorry, i am still trying to get my head around CSS.
Re: Problem with long product category names wrapping to 2 lines
I think you're in the right directions but you need to add
width: 150px; /the 150px; can be almost any number.
Make sure you do a back-up on your css before you make any changes, and write down the numbers you are using, that way you can alway go back too.
nomad
