Problem with long product category names wrapping to 2 lines

[Veazer]

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 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

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:



but now IE is broken:



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

[nomadrw]

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