Results 1 to 2 of 2
  1. #1
    Join Date
    Apr 2005
    Posts
    52
    Plugin Contributions
    0

    Default 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

    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.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	kcm_ffbefore.png 
Views:	410 
Size:	14.6 KB 
ID:	3126   Click image for larger version. 

Name:	kcm_iebefore.png 
Views:	449 
Size:	14.4 KB 
ID:	3127   Click image for larger version. 

Name:	kcm_ffafter.png 
Views:	404 
Size:	14.3 KB 
ID:	3128  

    Click image for larger version. 

Name:	kcm_ieafter.png 
Views:	424 
Size:	13.2 KB 
ID:	3129  

  2. #2
    Join Date
    Sep 2007
    Location
    Somewhere in Southern Cal
    Posts
    330
    Plugin Contributions
    0

    Default 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

 

 

Similar Threads

  1. Category names on multiple lines
    By Monsunemoon in forum General Questions
    Replies: 2
    Last Post: 3 Mar 2010, 11:36 AM
  2. wrapping long category names
    By jenpen in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 19 May 2009, 03:55 AM
  3. long category names
    By bumergroup in forum Setting Up Categories, Products, Attributes
    Replies: 1
    Last Post: 27 Aug 2008, 09:09 PM
  4. Long category names
    By monkeyjr47906 in forum Setting Up Categories, Products, Attributes
    Replies: 4
    Last Post: 13 Feb 2008, 06:03 AM
  5. Long (very long!) product names break Tell A Friend page + FIX
    By Ryk in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 24 Feb 2007, 02:10 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR