Конструкция display:table + display:table-cell добавляет 9px к высоте

[goooooch]

Всем привет. Имеем html:

<ul> <li>  <a href="">Ткани</a> </li> <li>  <a href="">Металлические карнизы</a> </li></ul>

Имеем css:

ul{ display: table;	 width: 100%;	}ul li{ display: table-cell;	 width: 13%;	 line-height: 1.2em; border-left: 1px #30d2cc solid;	 height: 50px;	}ul li a{height:50px;display:block;}

 

У элемента <a> с высотой все хорошо и она равна 50px. У <ul> и <li> высота 59px. Подозреваю, что особенность конструкции display:table + display:table-cell и нужно дописать какие-то стили. Вопрос — какие? Буду благодарен за любую помощь.

Edited September 9, 2015 by goooooch

[satantx]

http://jsfiddle.net/5ddaxoee/

Всё нормально. Видимо у вас другие стили срабатывают

[goooooch]

Тут вот была страница целиком

Edited September 9, 2015 by goooooch

[satantx]

У вас еще тут проблемы

[Николя223]

http://joxi.ru/DrlaRXgsww05mPвысота 50

попробуйте table-row добавлять. у таблиц должны быть строки

[goooooch]

У вас еще тут проблемы

 

 

не знаю, что это за скриншот. в каком браузере и на каком разрешении экрана. ФФ и Хром отображается корректно. возможно в вашем браузере настройки безопасности таковы, что не разрешает подключать файлы с другого хоста или что-то типа того. не знаю. 

 

про конструкцию меню вам есть что сказать?

http://joxi.ru/DrlaRXgsww05mPвысота 50

попробуйте table-row добавлять. у таблиц должны быть строки

 

речь не про первое меню сверху, а про второе (зеленое). 

Edited September 9, 2015 by goooooch

[Николя223]

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

а здесь  поможет vertical-align у ячеек

[goooooch]

а здесь  поможет vertical-align у ячеек

вопрос с высотой ячеек действительно решает, спасибо (долго бы я гадал сидел...)

Edited September 9, 2015 by goooooch

[satantx]

Во всех браузерах у меня так показывает