Помогите объединить вкладки!

[Poptimistic]

Не могу никак убрать пробел между вкладками Models и New faces. Помогите, плз! Вот.

[psywalker]

Не могу никак убрать пробел между вкладками Models и New faces. Помогите, плз! Вот.

li {margin-left: -2px;}

[Vlad]

А, это известная беда. Например, так можно. Добавьте в стилях к LI

margin-right: -4px;

Макс уже опередил, пока я смотрел страницу.

Edited August 23, 2011 by Vlad

[psywalker]

А, это известная беда.

Это не "беда", а нормальное поведение элементов. И я, например, считаю, что это правильно, хоть и мешает иногда жутко.

[SelenIT]

Как вариант, letter-spacing:-.25em для контейнера, как раз схлопнет стандартные пробелы в большинстве шрифтов. А вообще ради одного места — имхо, не катастрофа и вручную пробел между </li><li> по-честному убрать...

[psywalker]

Как вариант, letter-spacing:-.25em для контейнера, как раз схлопнет стандартные пробелы в большинстве шрифтов. А вообще ради одного места — имхо, не катастрофа и вручную пробел между </li><li> по-честному убрать...

letter-spacing:-.25em в Сафари пашет? Вроде нет?

[Poptimistic]

спасибо огромное! очень выручили

[psywalker]

спасибо огромное! очень выручили

Но это не прям "решение". Скорее "Халтурный способ". Т.к. пробелы в разных системах и разрешениях, размерах шрифта - могут быть разными. Учитывай это!

[SelenIT]

В вебкитных word-spacing не пашет (который был бы логичнее), а letter-spacing вроде справляется (по моим экспериментам, как минимум под виндой). Минус четверть кегля — при разумных значениях этого самого кегля, с учетом округления, выходит довольно универсально, из популярных шрифтов не подходит разве что для Верданы (насколько "моя память не спит с другим"). Но в целом согласен — все эти отрицательные отступы, скукоживания интервалов и т.п. — костыли, а решение одно — физически убрать межтеговые пробелы из кода...

[psywalker]

В вебкитных word-spacing не пашет (который был бы логичнее), а letter-spacing вроде справляется (по моим экспериментам, как минимум под виндой).

А погоди, вопрос. А почему я делаю так (делаю больше letter-spacing), и всё равно при этом спаны сужаются, как нужно? http://jsfiddle.net/kTxfm/2/

[SelenIT]

Хм. Судя по спеке CSS 2.1, похоже, работает эта оговорка:

Значения могут быть отрицательными, но могут иметь ограничения, специфичные для реализаций. Браузеры могут не увеличивать/уменьшать межсимвольные интервалы свыше этих пределов при выравнивании текста.

Похоже, что браузеры "более-менее договорились" не сжимать буквы теснее, чем вплотную. Надо поэкспериментировать, если все актуальные браузеры в этом едины, то можно считать letter-spacing:-1em полностью унивесальной убиралкой межсловных пробелов для любых разумных шрифтов, и пользоваться этим (несмотря на отсутствие формальных гарантий этого в стандарте). Огромное спасибо за наблюдение!

В CSS3 для letter-spacing есть еще многообещающий вариант — проценты от стандартной ширины пробела, по идее, -100% даст нужный эффект. Но вряд ли это пригодится в ближайшем будущем

Упд.: Ага, договорились, как же. Вебкитные преспокойненько плющат буквы в соответствии с написанным (задние "съедают" передних). Попутно выяснил, что Опере-бяке letter-spacing'а не хватает — ей непременно word-spacing подавай. А word-spacing, в этом примере, прекрасно работает и для вебкитных... но, увы, не для инлайн-блоков . Правда, какое-никакое лекарство от этой беды (извратноватое, но всё же) тоже нагуглилось по-быстрому. Display:table для контейнера, ну надо же... нет, определенно и без IE6 не станет вёрстка скучным занятием, ох, не станет!

Упд. 2: Вроде, вот так более-менее кроссбраузерно. Но как-то сс... боязно

Упд. 3: И опять мимо — IE7, оказывается, тоже сплющивает... Похоже, лучше "минус четверти em-а" легкого решения и не найти.

Edited August 23, 2011 by SelenIT

[psywalker]

SelenIT,

Дружище, спасибо тебе за великолепные тесты. Они для меня многое прояснили. Но, как обычно, есть вопросы:

1. Т.е., если я правильно понял, то в Сафари, в отличии от других браузеров (ИЕ6,7 в расчёт не берём), НЕ схлопывает пробелы у inline-block;, а только у inline? Если да, то почему?

2. Но display: table; у контейнера решает проблему в Сафари, так? Если да, то почему?

3. Если я правильно понял, то letter-spacing: -.25em; у контейнера, должен решать проблему с пробелами в ИЕ6-7?

Если да, то тогда почему этот тест этого не подтверждает? И почему у тебя это вроде работает?

[SelenIT]

1. Да, так. Судя по всему, баг вебкита (достаточно давний).

2. Судя по всему, аналогично . Багом бага убиваем.

Возможно, при display:table движок воспринимает строку блоков внутри как "что-то вроде table-cell", в каких-то FF до 3.6, если я ничего не путаю, был похожий баг.

3. Похоже, нет. Letter-spacing, как выясняется, по большому счету тут вообще не при делах. за межсловные (и, соответственно, межэлементные) пробелы отвечает word-spacing, но он, увы, не фурычит в вебкитах (см. п. 1). Во всём остальном, включая старые IE, похоже, работает. А для вебкитов есть два выхода — либо (inline-)table для контейнера (плюс 100% ширины, если надо), либо этот самый letter-spacing (впридачу к word-spacing-у)...

В общем, резюмируя: word-spacing: -.25em работает во всех браузерах (с подавляющим большинством шрифтов) для display:inline и во всех, кроме вебкитов — для display:inline-block (но есть лазейки, как вебкитов "укротить").

[psywalker]

SelenIT,

Ага, спасибо Илюха. Но тогда остаётся один вопрос.

Как в Сафари отреагируют внутренние элементы, если у родителя стоит display: table? Т.е. не повлияет ли это на (например) релативы на пунтах, и абсолюты у вложенных элементов внутри. Которые как известно не пашут в ячейках таблицы? Вот, тут я сделал тест. Вроде всё ок. Так ли это? И какие всё таки косяки могут возникнуть в связи с этим?

[SelenIT]

не повлияет ли это на (например) релативы на пунтах, и абсолюты у вложенных элементов внутри. Которые как известно не пашут в ячейках таблицы?

Вроде таблицы/ячейки не могут лишь быть точкой отсчета для позиционирования (что порой реально бесит, а так абсолютному потомку без разницы, что в его предках числится таблица — он всё равно позиционируется от ближайшего позиционированного предка (или от body, как повезет). Поэтому проблем быть не должно, если только не потребуется позиционировать весь список (тогда нужна дополнительная обертка). Единственный нюанс — ширина, display:table по умолчанию не растягивается на доступное пространство, так что может понадобиться еще width:100% (а при наличии бордеров/паддингов — box-sizing: border-box c нужными префиксами вдобавок). Если ошибаюсь — прошу меня поправить.

[psywalker]

не повлияет ли это на (например) релативы на пунтах, и абсолюты у вложенных элементов внутри. Которые как известно не пашут в ячейках таблицы?

Вроде таблицы/ячейки не могут лишь быть точкой отсчета для позиционирования (что порой реально бесит, а так абсолютному потомку без разницы, что в его предках числится таблица — он всё равно позиционируется от ближайшего позиционированного предка (или от body, как повезет). Поэтому проблем быть не должно, если только не потребуется позиционировать весь список (тогда нужна дополнительная обертка). Единственный нюанс — ширина, display:table по умолчанию не растягивается на доступное пространство, так что может понадобиться еще width:100% (а при наличии бордеров/паддингов — box-sizing: border-box c нужными префиксами вдобавок). Если ошибаюсь — прошу меня поправить.

Да нет, скорее всего ты прав. И я рад, что у нас теперь есть отличные костыли для укрощения всех браузеров