Чтобы разобраться в проблеме, убрал из страницы вообще все, оставив две строчки меню и максимально сократив CSS:
<!DOCTYPE html>
<html>
<head>
<title>Настройка</title>
<meta name="description" content="Проверка">
<meta name="keywords" content="Тест">
<meta charset=utf-8>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div class="for_tlf">
<ul class="Left_menu_nomenclature">
<li class="Left_menu_string">
<img src="/my-design/left-menu.png"><a href="/">Создание развитие движение ускорение</a></li>
</ul>
</div>
<div class="for_tlf">
<ul class="Left_menu_nomenclature">
<li class="Left_menu_string">
<img src="/my-design/left-menu.png"><a href="/">Три четыре</a></li>
</ul>
</div>
</body>
</html>
Файл test.css:
@charset "utf-8";
/* CSS Document */
/* ОЧИЩАЕМ УСТАНОВКИ БРАУЗЕРА ПО УМОЛЧАНИЮ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
vertical-align: inherit;
list-style-type: none; /* Убираем маркеры */
}
/* ЛЕВОЕ МЕНЮ */
.Left_menu {display:table; background-color: #f4e7bd; margin: 0; width:100%; border-radius:0.5em; padding:0.5em 0 0.5em 0; }
.Left_menu_nomenclature {display: table-row; }
.Left_menu_string {display:table-cell;vertical-align:middle; }
.Left_menu_string a{color:#420d00; font-family: Tahoma, Geneva, sans-serif; font-weight:bold; text-decoration:none; height:0px; padding-left:0.4em;}
.Left_menu_string a:hover {
/* при наведении ссылка становится */
text-decoration: underline; /* подчеркнутой */
}
.Left_menu_string img{width:5%; height:auto; padding-left:0.4em;}
.for_tlf{
}
Результат в скриншоте.
Совершенно непонятно, почему:
1. Первая строка меню разорвана на две части - места на экране полно, откуда взялся перевод строки?
2. Коричневый прямоугольничек во второй строке меньше того, что в первой строке? Ведь это одна и та же картинка с одинаковыми размерами!