We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

text indent problem on long menu item name with accordion menu

    • 10076
    • 1,024 Posts
    Frank Reply #1, 16 years, 3 months ago
    Hi,

    the siteowner does not want to change a very long menu name.
    Check here http://www.hannahskincare.co.uk/lavender_white_clay_cleansing_wash.html.
    As you can see the third menu item is continued on the next line. Where it does not get the text indent that it has on the start of the menu item. Any ideas?

    Here s the CSS:
    .accordion-menu {color: #353559;width: 80%; }
.accordion-menu a.menuitem {text-transform:uppercase;border-left-color: #fff;border-left-style: solid;border-left-width: 2px;color: #353559;display: block;padding-bottom: 3px;padding-left: 5px;padding-right: 0;padding-top: 3px;width: auto;}
.accordion-menu li {border-left-color: #fff;border-left-style: solid;border-left-width: 2px;color: #353559;font-size: 14px;font-weight: 200;list-style-type: none;margin-left: -40px;}
.accordion-menu a.menuitem:visited, .accordion-menu .menuitem:active {border-left-color: #fff;border-left-style: solid;border-left-width: 2px;color: #353559;}
.accordion-menu a.menuitem:hover {border-left-color: #ccc;border-left-style: solid;border-left-width: 2px;color: #0000a0;}
.accordion-menu ul.submenu {border-left-color: #fff;border-left-style: solid;	border-left-width: 2px;color: #353559;list-style-type: none;width: auto;font-size: 13px}
.accordion-menu ul.submenu li {border-left-color: #fff;border-left-style: solid;border-left-width: 2px;color: #353559;display: block;/*text-indent: 5px;*/width: auto;}
.accordion-menu ul.submenu li a {border-left-color: #fff;border-left-style: solid;border-left-width: 2px;color: #353559;display: block;padding-bottom: 3px;padding-left: 5px;padding-right: 0;padding-top: 3px;	text-indent: 5px;width: auto;}
.accordion-menu ul.submenu li a:hover {border-left-color: #fff;border-left-style: solid;border-left-width: 2px;color: #0000a0;}
.activemenu {border-left-color: #fff;border-left-style: solid;border-left-width: 2px;color: #353559;display: block;padding-bottom: 3px;/*padding-left: 5px;*/padding-right: 0;padding-top: 3px;width: auto;}
.accordion-menu ul.submenu li a.activemenu {border-left-color: #ccc;border-left-style: solid;border-left-width: 2px;color: #0000a0;display: block;font-size: 14px;padding-bottom: 3px;padding-left: 5px;padding-right: 0;padding-top: 3px;text-indent: 5px;width: auto;}
#active-submenuheader {border-left-color: #fff;border-left-style: solid;	border-left-width: 2px;color: #0000a0;display: block;font-size: 16px;padding-bottom: 3px;padding-left: 5px;padding-right: 0;	padding-top: 3px;width: auto;}

      • 19369
      • 1,098 Posts
      microcipcip Reply #2, 16 years, 3 months ago
      .accordion-menu ul.submenu li a {
      border-left:2px solid #FFFFFF;
      color:#353559;
      display:block;
      padding:3px 0 3px 5px;
      text-indent:5px;
      width:auto;
      }

      .accordion-menu ul.submenu li a.activemenu {
      border-left:2px solid #CCCCCC;
      color:#0000A0;
      display:block;
      font-size:14px;
      padding:3px 0 3px 10px;
      text-indent:5px;
      width:auto;
      }
        Jertix.org -> Web Design & Development, Motion Graphics | Follow me on Twitter | MODx Tutorials (in Italiano) | MODx Snippets (English)
        • 10076
        • 1,024 Posts
        Frank Reply #3, 16 years, 3 months ago
        ahum, off course....thanks loads