Joomla 1.0 Перенос на сл. строку в кнопке

Ребят, помогите пожалуйста. Проблема в следующем: есть сайт http://wuff.ru/, слова "отдам продам", "друзья и партнеры" выходят за пределы кнопок. Как сделать так, что бы они помещались полностью в кнопках, просто в две строки?
Код кнопок у меня такой:

Код (CODE):

1. ul#mainlevel-nav {
2.     text-decoration: none;
3.     list-style: none;
4.     padding: 0;
5.     margin: 0 0px;
6.     float:left;
7.     color:#E7A038;
8.     }
9. ul#mainlevel-nav li {
10.     width:119px;
11.     float:left;
12.     font-size:0.9em;
13.     height:48px;
14.     line-height:48px;
15.  
16.     display:inline;
17.     }
18. ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {
19.     font-size: 14px;
20.     font-weight:bold;
21.     text-align:center;
22.     text-decoration:none;
23.     white-space:nowrap;
24.     display:block;
25.     overflow:hidden;
26.     color: #ffffff;
27.     margin:0;
28.     padding:0;
29.     background: url(/templates/wulf/images/knopka.gif);
30.     }
31. ul#mainlevel-nav li a:hover {
32.     white-space:nowrap;
33.     margin:0;
34.     padding:0;
35.     color: #ffffff;
36.     background-position: -119px 0;
37.     }

 

В текст ссылки добавить <br />, например "Отдам<br />продам". При повторном открытии пункта меню в админке (для редактирования) <br /> вроде бы пропадает и его надо вписывать по-новой.

 

Второй вариант:
ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited (template_css.css, строка 356)
и
ul#mainlevel-nav li a:hover (template_css.css, строка 369)
убрать
"white-space:nowrap;"

Но тогда надо редактировать все отступы и line-height, чтобы 2 строчки правильно вписывались. На первый взгляд, в ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited надо добавить "line-height:20px;"

 

Помогите, пожалуйста. Получилось пока только так http://wuff.ru/
Код теперь имеет такой вид:

Код (CODE):

1. ul#mainlevel-nav {
2.     text-decoration: none;
3.     list-style: none;
4.     padding: 0;
5.     margin: 0 0px;
6.     float:left;
7.     color:#E7A038;
8.     }
9. ul#mainlevel-nav li {
10.     width:119px;
11.     float:left;
12.     font-size:0.9em;
13.     height:23px;
14.  
15.  
16.  
17.     display:inline;
18.     }
19. ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {
20.     font-size: 14px;
21.     font-weight:bold;
22.     text-align:center;
23.     text-decoration:none;
24.  
25.     display:block;
26.     overflow:hidden;
27.     color: #ffffff;
28.     margin:0;
29.     padding:7px;
30.     background: url(/templates/wulf/images/knopka.gif);
31.     }
32. ul#mainlevel-nav li a:hover {
33.  
34.     margin:0;
35.     padding:8;
36.     color: #ffffff;
37.     background-position: -119px 0;
38.     }

 

ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited (строка 357) добавить height:34px;

 

Замечательно!
А можно ли еще сделать так, что бы все слова на кнопках были по центру, пока получается в две строке по центру, а в одну наверху. Можно?

 

Тогда нужно было пробовать первый метод (с <br /> в ссылке), а в стилях убрать nowrap, но оставить line-height 48px.

Как вариант, можно хакнуть модуль меню, чтобы он автоматом добавлял <br /> вместо пробела между словами больше, например, 3 букв.

 

<br /> не помогает совсем, после нажатия кнопки "сохранить" все сохраняется без <br />

 

применить к списку с выводом пунктов меню следующую конструкцию

Код (CODE):

1. white-space:pre-wrap;

и читать спецификацию html & css

 

Вообще, если убрать no-wrap получится точь-в-точь тоже самое. Вопрос на данной стадии в том, чтобы организовать вертикальное выравнивание.

Максимум, чего удалось добиться: выравнивание (вертикальное) есть в FF и Opera. В IE выравнивания нет, но хотя бы все не летит к чертям.

Эффект достигнут следующим образом:

Код (CODE):

1. ul#mainlevel-nav {
2.     text-decoration: none;
3.     list-style: none;
4.     padding: 0;
5.     margin: 0 0px;
6.     float:left;
7.     color:#E7A038;
8.     }
9. ul#mainlevel-nav li {
10.     width:119px;
11.     float:left;
12.     font-size:0.9em;
13.     height:48px;
14.     width:119px;
15.     display:inline;
16.     }
17.    
18. ul#mainlevel-nav li a:link, ul#mainlevel-nav li a:visited {
19.     font-size: 14px;
20.     font-weight:bold;
21.     text-align:center;
22.     text-decoration:none;
23.     height:48px;
24.     width:119px;
25.     display:table-cell;
26.     vertical-align:middle;
27.     overflow:hidden;
28.     color: #ffffff;
29.     margin:0;
30.     padding:0;
31.     background: url(/templates/wulf/images/knopka.gif);
32.     }
33.    
34. *+html .auxiliary {
35.       display: inline-block;
36.       vertical-align: middle;
37.       width: 0px;
38.       height: 100%;
39. }
40. *+html #mainlevel-nav li a {
41.       display: inline-block;
42.       vertical-align: middle;
43. }
44. *+html #mainlevel-nav li a, .auxiliary {
45.       display: inline;
46. }
47.    
48. ul#mainlevel-nav li a:hover {
49.  
50.     margin:0;
51.     padding:8;
52.     color: #ffffff;
53.     background-position: -119px 0;
54.     }

Для получения окончательного решения нужно сделать хак модуля, отвечающего за вывод меню и после каждого </a> добавить <div class="auxiliary"> </div>. У меня нет доступа на хостинг, поэтому окончательное решение ложится на плечи топикстартера.