SelenIT
-
Posts
4,327 -
Joined
-
Last visited
-
Days Won
140
Content Type
Profiles
Forums
Calendar
Store
Everything posted by SelenIT
-
Странно, я тоже в IE9 открывал... Или ты через F12 режим менял на IE8? Авто предкам не поможет, т.к. по авто максимальный z-index достанется последнему в списке (что и происходит), а надо бы первому. В IE8 баг пофиксили, но ночью все кошки се в квирксмоде все ослы пятые...
-
как сделать слой, что бы его ширина была равна ширине вложенных в него слоев
SelenIT replied to kent666's question in HTML Coding
zoom: 1 — в данном случае (и в 99,9% случаев использования) "костыль" для IE7 и ниже, который включает у элементов "волшебное" свойство hasLayout. А сочетание этого свойства с display:inline дает полноценный inline-block для любого элемента (без этого трюка inline-block в старых IE работает только для изначально инлайновых элементов). vertical-align — наоборот, работает для строчных элементов, выравнивая их в строке (по ее верху, низу, середине или базовой линии текста). Еще для ячеек таблиц, но у нас другой случай. *+html — буквально означает "элемент html, идущий следом за любым элементом". Формально это валидная запись, но в нормальных браузерах она не имеет смысла, т.к. перед html ничего нет, это корневой элемент. А IE7 по ошибке считает первым элементом доктайп, а html вторым, и в нем это правило сработает (хак такой). *display:inline — тоже хак для IE ("*свойство" видит только он), в данном случе не нужен, остался от экспериментов . А вообще бывает удобен для быстрой проверки, но невалиден. -
Правые "хвостики" нижележащих пунктов (где стрелка) в IE оказываются поверх первой "выпадачки", в FF она полностью накрывает их всех. Это из-за того, что stacking context-ы в IE определяются по позиционированному предку, и никакой z-index потомка не может заставить его перекрыть другой элемент, если у предка того элемента z-index был выше, чем у нашего элемента (прямо иллюстрация социального неравенства — потомки аристократов всегда будут смотреть свысока на того, кто сам выбился из низов). Поэтому и auto не поможет. Возможно, что-то получится, если если у пунктов убрать relative, а взамен задать relative общей обертке списка, и не указывать первому уровню "выпадачек" top-координату. Но как-то ненадежно, имхо...
-
как сделать слой, что бы его ширина была равна ширине вложенных в него слоев
SelenIT replied to kent666's question in HTML Coding
Inline-block заставляет блоки вести себя, как слова в тексте (или картинки, как они ведут себя по умолчанию), подчиняясь text-align, vertical-align (в строке). При этом работают маргины (в т.ч. отрицательные), можно заставлять блоки наезжать друг на друга. Единственный нюанс — пробелы между тегами учитываются (опять же, как между словами в тексте), так что пробелы между ссылками и центральной оберткой в примере я убрал. -
Единственный выход — проставить пунктам разные z-index'ы, сверху вниз по убыванию (первому максимальный, последнему минимальный). По-другому,похоже, никак. А поскольку квирксмод, то и версия IE не спасет...
-
Больше 1000 нельзя, ибо скроллбар (а в старых IE были еще боковые рамки, с которыми скроллбар в XP-шных темах мог и под 30px отхватить). Насколько меньше — зависит от самого макета, тут всегда дизайнерский компромисс. 960 удобно тем, что легко делится в уме на 2, 3, 4, 5, 6, 8... практически любое разумное кол-во колонок, проще строить модульную сетку. Под 1280, наверное, по тем же соображениям удобно взять 1200...
-
как сделать слой, что бы его ширина была равна ширине вложенных в него слоев
SelenIT replied to kent666's question in HTML Coding
Не надо пытаться загнать логическую верстку в рамки логики таблицы с ячейкой под каждый слайсик. Или уже таблицей и делать, или дать блокам свободу. Как вариант — inline-block: <!DOCTYPE html> <meta charset="utf-8"> <title>Пример</title> <style> img { display: block; border: 0; } .photo { margin: 1em; text-align: center; } .photo a, .photo div { display:inline-block; *display:inline; vertical-align:middle; } .photo a { width: 16px; position: relative; } .photo div { background:white; margin: 0; border:red solid; border-width:0 16px; margin: 0 -16px; display:inline-block; } *+html .photo div, *+html .photo a { display:inline; zoom: 1; } /* inline-block for IE7 */ </style> <div class="photo"> <a href="#"><img alt="" src="http://forum.htmlbook.ru/public/style_images/htmlbook/rte_icons/redo.png"/> </a><div><img src="http://s46.radikal.ru/i113/1006/ea/25be6484582f.jpg"></div><a href="#"> <img alt="" src="http://forum.htmlbook.ru/public/style_images/htmlbook/rte_icons/undo.png"/></a> </div> -
Обернуть код кнопки в <div style="float: left">...</div>. И, чтобы ряд выстроился как надо, все остальные кнопки скопом обернуть в аналогичный див. Либо, еще надежнее, табличку с двумя ячейками добавить (аналогично, в первую ячейку все остальные кнопки, во вторую — проблемную). Кривовато, да, но по-другому придется всё переверстывать...
-
В данном случае не поможет. С таким доктайпом любой IE — пятый, а на него уже вся верстка завязана. Имхо, едиственый реальный выход — обернуть всё это безобразие в float-контейнер. Кстати, в FF (5.0) кнопка совсем не появляется.
-
Остроумная находка, мне нравится!
-
+1! Но и mishka немало интересных идей показал — я, например, не знал, что IE9 знает трансформации... Вообще меня почти все решения впечатлили, на вашем фоне чувствую себя полным ламером (целых два псевдоэлемента ради одного уголка, стыд-позор! ). Утешаюсь лишь тем, что у меня в 3-й задаче в IE9 уголки градиента торчат из закруглений только внизу)
-
Поэтому с ней и сравниваю. Глюков не меньше, чем у той же 9-ки, а законного хака нет (даже калитку в виде link type="opera/css" давно прикрыли) — и ничего, живем ведь как-то...
-
Ой да что же это! Во 2-м рамку чуть не забыл: http://jsfiddle.net/kB7eB/6/
-
Законный хак остается — перевести метатегом в режим 9-ки и хакать как ее Но я с полным основанием надеюсь, что 10-ка окажется как минимум не хуже нынешней Оперы, и основные проблемы с ней (именно по части верстки) удастся решить небольшим тюнингом кода "для всех" (как мы добиваемся кроссбраузерности во всём остальном). А что касается скриптов — согласен с MS-никами, лучше детектить не тип браузера, а сами поддерживаемые фичи.
-
Насколько я понимаю, в режимах IE9- останутся (по аналогии с expression-ами в 8-ке — upd: глянул первоисточник, так и оказалось). Так что не фатально. Хотят быть как все — что ж, пусть будут...
-
Upd: 1000 извинений за невнимательность, проглядел, что в 1-й задаче углы в пикселях, исправляюсь: http://jsfiddle.net/KqvvN/2/ точнее, даже так, с учетом толщины линии: http://jsfiddle.net/KqvvN/3/
-
1: http://jsfiddle.net/KqvvN/1/ 2: http://jsfiddle.net/kB7eB/5/ 3: http://jsfiddle.net/QPvpM/13/
-
Вроде получилось что-то похожее на 3-й: http://jsfiddle.net/QPvpM/9/
-
Сорри, но... можно подсказку, где про это подсмотреть? Просто меня не так давно на собеседовании) спрашивали про ограничение длины GET-а, я ответил примерно так (как запомнил), а мне тоже сказали, что ответ неверный и есть ограничение в протоколе. Но сколько ни гуглю — никак не могу этого найти, попадается только всякое такое... Заранее спасибо за помощь в распутывании загадки!
-
В IE5 так или иначе будет караул, не в одном, так в другом . Он не только центрировать блоки по стандарту не умеет, у него вообще вся боксовая модель нестандартная. От него массово отказались еще в 2005-м. Сейчас многие уже IE6 поддерживать отказываются, зачем откапывать еще больший антиквариат Я имел в виду полосатую "табличку" с датами и ссылками. До правки, если ссылка не вмещалась в одну строку (я пробовал добавить пару слов текста через Firebug), она целиком опускалась вниз, под дату. Сейчас (как минимум, в FF5) не проваливается, дату как бы обтекает — уже намного лучше. Но, по-моему, было бы еще лучше, если бы вторая строка ссылки начиналась под первой, как в настоящей табличке...
-
Насколько я понимаю, подвох в целой категории особых и очень важных юзеров, немалый % которых стили и не включают — поисковых ботов . И эвристики, которыми они пытаются анализировать и классифицировать контент, с немалой вероятностью "пляшут" от человеческого здравого смысла — "интуитивного впечатления" человека от "голой" страницы (по крайней мере, если бы я сам писал "умный" поисковик, я бы точно сверялся с этим критерием). И на мой взгляд, особенно важно не ввести ненароком такой эвристический анализатор в заблуждение (например, если уж не получается сделать ленту новостей однозначно, с первого взгляда, узнаваемой как новости — то хотя бы постараться, чтобы Гугл не воспринял ее как кулинарный рецепт ). Т.е. что-то семантически нейтральное — меньшее зло, чем что-то ярко семантичное, но для другого контекста Ну а в тех ситуациях, для которых есть более-менее общепринятые соглашения по семантике (микроформаты, микроданные, Rich Snippet-ы и т.п.) — это всё надо использовать по максимуму.
-
Что мне бросилось в глаза: Некоторые списки явно лишние, как минимум #abs и #inside_content (никакие однотипные сущности в них не перечисляются, li-шки фактически зря дублируют вложенные в них div-ы, да и form можно использовать как полноценный контейнер); Картинку zd-bg_02.jpg лучше сделать фоном, она не несет самостоятельной информационной ценности; Очень непрочная структура списка .simple_1, стоит ссылке стать на два-три слова длиннее, она некрасиво сползает вниз. Надо предусмотреть возможность отображения более длинных текстов в несколько строк. А так в целом аккуратненько. Сама страница несколько специфичная — без явного основного контента, фактически вся из разных сортов навигации, поэтому про последовательность блоков в коде спорить не о чем. Желаю дальнейшего прогресса и всяческих удач!
-
Неправильно советуют. Делайте в спане, лучшего пока, похоже, нет. Можно глянуть в сторону <time> из HTML5...
-
Вот зачем, зачем эмулировать дивами ископаемую таблицу с ячейками-распорками??? Вот что это за недоразумение??? Что это за блок, в который даже слово по ширине не впихнуть? Ясно, что это не блок никакой, а декоративный элемент, которому самое место — быть нарисованным на фоне контейнера. Если уж верстаете логическими блоками, то и мыслить надо ими, а не квадратиками в табличной манере...
-
Маятник откачнулся . Раньше мне хотелось этот DL воткнуть куда ни попадя (особенно после расширения его семантики в HTML5), а теперь, наоборот, стараюсь избегать всего "семантически ярко окрашенного" без крайней нужды именно в такой семантической окраске. И чаще проверяю семантику отключением стилей. Здесь, да, по частям это вроде как полноценный набор пар "параметр-значение", но как целое — всё-таки скорее просто текстовый фрагмент, чем словарик. Хотя многое зависит от контекста, если это именно что-то вроде анкеты — dl и впрямь будет лучше. А абзацы навеяны рекомендацией HTML5 для диалогов (тоже вроде пары "персонаж-реплика", но в первую очередь — текст), возможно, аналогия и неподходящая... вот опять засомневался
