CSS. В чем может быть проблема?

Question

[protasovmikhail]

Не знал как сформулировать вопрос) Бессонные ночи...)

#menu{
	height: 7%;
	width: 100%;
	font-size: 0%;
}
#menu_main{
	font-size: 100%;
	display:inline-block;
	height: 80%;
	width: 18.75%;
	background: url(/images/menu/main.jpg) no-repeat;
	background-size: 100%;
}

Вычитал решение как убрать пробелы меж блоков. (menu_* блоков несколько. все в строчку) И в решении указано "перебить" наследование для потомков, так вот где у меня ошибка?? Текст не появляется. Если убрать нулевой размер в родителе, текст отображается, а с ним и пробелы....

Спасибо.

Answer 1

[silentvick]

Проблема в относительных единицах размера шрифта в #menu_main . 100% берется от размера шрифта родителя, т.е. от 0, в результате чего тоже получается 0.

Чтобы решить эту проблему просто используйте в потомках независмые от родителя единицы измерения: px, rem, pt, etc.

Comments

[protasovmikhail]

Т.к. я делаю дизаин под все размеры пиксели не проходят. Работа с % привычна. Можно ли в родителе указать 0 px или по аналогии rem, pt, etc, а в потомках оставить как есть?

[silentvick]

А что значит "как есть"? Оставить проценты или использовать единицы, зависымые от значений родителя не получится. Просто потому что у родителя размер шрифта 0, а сколько на 0 не умножай - все равно получится 0. Если надо менять размер шрифта в зависимости от размера экрана, то используйте media queries.

[protasovmikhail]

silentvick: Спасибо.

Answer 2

[Вячеслав]

Вы бы на какой-нибудь jsfiddle положили пример, было бы нагляднее.
Напишите font-size: 100% !important; или селектор замените на
#menu #menu_main, исключит возможность неверной интерпретации (сейчас селекторы имеют один "вес").
(кстати, у вас же несколько дочерних блоков, наверное, они у вас все с id menu_main?)
P.S. и посмотрите ниже ответ silentvick, думаю, он прав. :)

Answer 3

[Murat Atila]

Вы используете св-во display: inline-block; при использовании этого свой-ва появляется небольшой отступ, чтобы его убрать, надо родителю (контейнеру) задать font-size: 0; а в дивах с inline block указать нужный font-size

Comments

[protasovmikhail]

А в примере кода не так что ли??)

[Murat Atila]

protasovmikhail: не посмотрел, действительно, у вас вроде всё правильно, попробуйте вместо id использовать class + задавать не в процентах а в пикселях

P.S. сегодня был уже похожий вопрос, вот fiddle
jsfiddle.net/smqknsvt/4

[Murat Atila]

jsfiddle.net/0b7f9fxz вот ваш вариант

[protasovmikhail]

Murat Atila: Считаю работать в пикселях не хорошим тоном) Все-таки экраны разные)

[Murat Atila]

protasovmikhail: Вы имеете ввиду font-size? я обычно задаю в em'ах

[protasovmikhail]

Murat Atila: попробую)

[protasovmikhail]

Murat Atila: я имел ввиду, там где идет размер чего либо, или что то зависит от размера, я предпочитаю %, дабы и на моем, и на большем, и на меньшем мониторе клиент видел тоже самое)

[Murat Atila]

protasovmikhail: Я Вас понял, если честно, на сайтах с респонсивом, есть макет, где уже указаны font-size и т.д. И мне не приходиться ломать голову над этим)

Answer 4

[Хангелды Илебаев]

Chrome dev tools вам в помощь

Можно вообще у inline-blockов удалить пробелы в html файле <ul><li>link-1</li><li>link-2</li></ul> в одну строчку
Или вместо inline-block использовать

li { display: block;
float: left; }
ul:after {
  clear: both;
}