Размер контента в Firefox.

[Hol1killer]

Добрый день столкнулся с проблемой размера контента в фаерфоксе.

Скрин меню в фаерфоксе

В остальных браузерах

вот CSS код

.mainmenu-block { background-color: #6EB9FF;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(110, 185, 255, 1)), to(rgba(15, 109, 196, 1)));
background-image: -webkit-linear-gradient(rgba(110, 185, 255, 1) 0%, rgba(15, 109, 196, 1) 100%);
background-image: -moz-linear-gradient(rgba(110, 185, 255, 1) 0%, rgba(15, 109, 196, 1) 100%);
background-image: -o-linear-gradient(rgba(110, 185, 255, 1) 0%, rgba(15, 109, 196, 1) 100%);
background-image: linear-gradient(rgba(110, 185, 255, 1) 0%, rgba(15, 109, 196, 1) 100%);
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:1px; height:40px; }
.mainmenu-block .menu { border:1px #FFF solid; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; height:38px; }
.mainmenu-block li { float:left; position:relative; z-index:500; display:block }
.mainmenu-block li:last-child a { border-right:0; padding-left:33px; }
.mainmenu-block li:hover { background-color: rgba(255,255,255,0.2);}
.mainmenu-block li a { display:block; color:#FFF; font-size:17.5px; text-decoration:none; padding:0px 26px; line-height:38px; border-right: 1px solid #0F6DC4; }
.mainmenu-block li a:hover { text-decoration:underline; }

не понимаю почему размер контента в фаерфоксе занимает меньше места чем в других браузерах. С чем это связано ( шрифт ) что-ли? Меню ограничено 1040px ширины родителя.

Edited July 14, 2013 by Hol1killer

[Николя223]

вы посмотрите с другого ракурса: последняя ячейка больше чем в других браузерах. А именно растояние от правого края ))

.mainmenu-block li:last-child a - может в нем дело?

[Bumblebee]

Недавно столкнулся с такой же проблемой. Не знаю, может это по нубски, но я прописывал размеры любого неплавающего элемента и все стало ок. Типа padding, размер шрифта и прочее.

[Hol1killer]

вы посмотрите с другого ракурса: последняя ячейка больше чем в других браузерах. А именно растояние от правого края ))

.mainmenu-block li:last-child a - может в нем дело?

Даже если я его убираю все равно в мозиле контентная часть меньше.

Тоесть каждый li в фаерфоксе ( через фаербаг ) имеет меньше ширину на 2-3 пикселя чем в опере и хроме. Не понимаю с чем это связано.

[Zverushka]

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

[Hol1killer]

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

Тогда в firefox контент шире чем в опере и хроме.

Фаерфокс 22. Что придется к хакам обращаться что-ли? Что-то раньше я с такой проблемой даже не сталкивался

Edited July 14, 2013 by Hol1killer

[Struggle]

ul { list-style-type: none; list-style: none;}

[Hol1killer]

ul { list-style-type: none; list-style: none;}

Это и так сброшено, просто не привел код, результата нету.

Я понимаю что размер шрифта различный и надо хаками воспользоваться для IE и mozila.

Edited July 15, 2013 by Hol1killer

[SelenIT]

Ну да, субпиксельный рендеринг. В IE9-10, по идее, будет похожая песня (но тоже слегка по-своему), на маке вообще иначе. В хроме может запросто измениться при каком-нибудь очередном обновлении. Имхо, если нигде последний пункт не сваливается и не ломает верстку, на такую мелочь можно забить.

[Hol1killer]

Ну да, субпиксельный рендеринг. В IE9-10, по идее, будет похожая песня (но тоже слегка по-своему), на маке вообще иначе. В хроме может запросто измениться при каком-нибудь очередном обновлении. Имхо, если нигде последний пункт не сваливается и не ломает верстку, на такую мелочь можно забить.

Да похожая картина. Просто там эффект создан при наведение он подсвечивается и до конца остается небольшой пробел. между последним пунктом и правой границой. Не очень красиво становится. Проблема только в фаерфоксе и IE. В опере и хроме все хорошо. Ну я впринципе так и думал, просто боялся что где то мог косячнуть в верстке.

[SelenIT]

и до конца остается небольшой пробел. между последним пунктом и правой границой. Не очень красиво становится

А, так нужно обязательно заполнить ссылками всё пространство? Может, тогда лучше вместо float использовать display:table/table-cell? А то и модные флексбоксы, а float-ы оставить для деградации?

Потому что полагаться на конкретную ширину текста в пикселях — изначально провальная идея. Чуть другой шрифт на чуть другой платформе — и всё заверте...

[Hol1killer]

и до конца остается небольшой пробел. между последним пунктом и правой границой. Не очень красиво становится

А, так нужно обязательно заполнить ссылками всё пространство? Может, тогда лучше вместо float использовать display:table/table-cell? А то и модные флексбоксы, а float-ы оставить для деградации?

Потому что полагаться на конкретную ширину текста в пикселях — изначально провальная идея. Чуть другой шрифт на чуть другой платформе — и всё заверте...

Спасибо за идею. Да требуется заполнить все пространство в размере 1060px этими ссылками. Попробую поиграться с display:table/table-cell. Вы предлагаете каждой ячейке задать определенный размер или я не допонил что-то? Про флексбоксы я не слышал ничего но почитаю.

Edited July 15, 2013 by Hol1killer

[SelenIT]

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

[Hol1killer]

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

Ну я завтра попробую отпишусь в любом случаи. Просто меню никогда не делал через табличную магию=) Обычно использую float или display:inline-block.

[Zverushka]

Можно еще последнему li (который позиционируется как float: left ) сделать float: none и он продолжит обтекать справа остальные элементы и при этом займет всю доступную ширину.

li:last-child {
float: none;
}

Только last-child работает в ие9 и выше.

Edited July 15, 2013 by Zverushka

[SelenIT]

Тогда он слишком всю ширину займет). Можно, правда, overflow:hidden добавить...