New Zenner
- Join Date:
- Apr 2005
- Posts:
- 51
- Plugin Contributions:
- 0
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:
and in IE looks like this:
I though it seemed strange to fix the height of the menu items, so I changed the CSS from
li.category-top a{
padding:.4em 0 [B]0[/B] 1.5em;
margin:0;
color:#333333;
font-weight:bold;
display:block;
[B]height:1.8em;[/B]
border-bottom:1px solid #9a9a9a;
background:#EEEEEE url(../images/boxlistbg.gif) .4em 0.5em no-repeat;
}
li.category-products a{
padding:.4em 0 [B]0[/B] 2.3em;
margin:0;
color:#333333;
font-weight:bold;
display:block;
[B]height:1.8em;[/B]
border-bottom:1px solid #9a9a9a;
background:#EEEEEE url(../images/boxlistbg.gif) 1.2em 0.5em no-repeat;
}
```to
li.category-top a{
padding:.4em 0 [B].5em[/B] 1.5em;
margin:0;
color:#333333;
font-weight:bold;
display:block;
[B] /* height:1.8em; /[/B]
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 [B].5em[/B] 2.3em;
margin:0;
color:#333333;
font-weight:bold;
display:block;
[B] / height:1.8em; */[/B]
border-bottom:1px solid #9a9a9a;
background:#EEEEEE url(../images/boxlistbg.gif) 1.2em 0.5em no-repeat;
}

but now IE is broken:

Can anyone point me in the right direction? Sorry, i am still trying to get my head around CSS.