У меня проблема с надписями на кнопках. При увеличении шрифта, буквы меню выходят за пределы кнопок. Как сделать так, чтобы надпись не выходила при увеличении шрифта за пределы кнпок? Подскажите, пожалуйста, в чем проблема может, кто уже встречался с подобным явлением. Заранее благодарен. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> .menu_box { } .right a{ text-decoration: none; color: #FFF; font-weight: bold; text-align: center; } .right:hover a{ text-decoration: none; color: #999; font-weight: bold; } .menu{ float: left; display: block; margin-right: 15px; line-height: 23px; background-image: url(images/mbg-but.jpg); background-repeat: repeat-x; width: auto; } .left { background-image: url(images/mlf-but.jpg); background-repeat: no-repeat; background-position: left top; } .right { padding-left: 20px; background-image: url(images/mrt-but.jpg); background-repeat: no-repeat; background-position: right top; width: 5em; } .menu:hover{ line-height: 23px; background-image: url(images/bg-but.jpg); background-repeat: repeat-x; } .left:hover { background-image: url(images/lf-but.jpg); background-repeat: no-repeat; background-position: left top; } .right:hover { padding-left: 20px; background-image: url(images/rt-but.jpg); background-repeat: no-repeat; background-position: right top; } </style> </head> <body> <div class="menu_box"> <div class="menu"> <div class="left"> <div class="right"><a href="">Главная</a></div> </div> </div> </body> </html>
