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
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:
but now IE is broken:
Can anyone point me in the right direction? Sorry, i am still trying to get my head around CSS.
Bookmarks