Помогите с CSS пожалуйста

[ce-ce]

Не могу сообразить. Что нужно дописать, чтобы текст в кнопке меню, если не может поместиться полностью, то переносился бы построчно, и при это не под картинку.

CSS сейчас такой:

#mainmenu ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-right: -3px;
    overflow: hidden;
}

#mainmenu ul li {
    float: left;
    margin-right: 1px; 
    display: block;
    width: 230px;
}
#mainmenu ul li a {
    border: 1px #eef0ef solid;
	background: #dcdddf;
    display: block;
    width: 228px;
    height: 80px;
    padding-top: 2px;
    text-align: left;
	text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 16px;
    vertical-align: top; 
    color: #57585a;
    text-decoration: none;
    font-family: Verdana, Arial;
    font-size: 14px;	
}

#mainmenu ul li a:hover {
    background: #ed008c;
    color: #fff;
}

#mainmenu ul li {
line-height: 60px;

}

#mainmenu ul li a > img {
margin-right: 7px;
width: 80px;
height: 80px;

[Yazon_Nile]

на ссылку

display:table

на имагу

vertical-align:middle;

текст в спан на спан

display:table-cell;

vertical-align:middle;

width:сколько-то там px

[gritsyuk]

Я бы все по-другому сделал бы, но исходить из того что есть, то line-height измени с 60px на 40px, в #mainmenu ul li a > img {добавь float:left;} - это при условии что меню максимум с двух строк будет.

[ce-ce]

Я бы все по-другому сделал бы, но исходить из того что есть, то line-height измени с 60px на 40px, в #mainmenu ul li a > img {добавь float:left;} - это при условии что меню максимум с двух строк будет.

Спасибо огромное!!!!