Leaderboard

Здесь есть какой-то список багов IE. Также мне попадались сайты, на которых 180 багов перечислено, найти их, думаю, труда не составит. http://haslayout.net/css/

Переделал верстку. Учел почти все, что мне здесь сказали. Вся клавиатура уместилась в один див. Ушел от списков, сделал все на спанах. Нет лишних оберток. Решена проблема с <br> (спасибо sigma77, натолкнула на мысль), правда код получился немного некрасивый. Работает во всех новых браузерах. Глюки: 1) в ФФ сдвинулась кнопка "вверх" 2) в Опере в этой же кнопке почему-то не центрируется символ. Решено. 3) ИЕ9 идет лесом, он неадекватен. Оставил префикс для 10 Фильтры не использовал принципиально. Разобрался с градиентами. Чтобы получить желаемый результат, необязательно использовать синтаксис from>to. Можно все решить color-stop. Кстати, можно накладывать один цвет несколько раз, но с разным значением, именно так я и сделал. Если не наложить один на другой, то происходит большое рассеивание либо верхних градиентов, либо нижних. Именно поэтому, до конца не разобравшись со стопами, я использовал три блока в первой версии. Оставил на всякий случай некоторые префиксы, хотя они много где не нужны. И еще раз повторю, что понравилась выборка по child'ам. Она сняла все вопросы с классами. Однако так и не нашел способа, чтобы выделять нужные элементы. Например с 13 по 22. Где читал про нее, везде либо четные\нечетные, либо через один, ну и с конца и с начала(это из групповых). Может подскажете, есть такой функционал у nth? Не нашел нормального способа, как выравнивать символы по вертикали. Пришлось для них использовать еще одну обертку. Существует в CSS3 такой способ, чтобы одновременно строить линию и ровнять содержимое по вертикали(float не в счет, мне кажется он сюда не подходит)? Однако удачно для этого подходили псевдоэлементы, но я решил, что смысла от этого нет. Что в html делать обертку, что в ксс писать каждой кнопке ПЭ. Ссылка В общем посмотрите, может еще чего подскажете. Спасибо.

var_dump($action) что покажет? php скорее всего подставляет вместо $action её значение (а может быть и нет), и неплохо бы знать, какое оно.

Какой же это новый стиль? Это классика!

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

#headerMenuCont a:hover { background-attachment: scroll; background-clip: border-box; background-color: #72C101; background-image: none; background-origin: padding-box; background-position: 0 0; background-repeat: repeat; background-size: auto auto; color: #FFFFFF !important; float: left; height: 26px; /*высоту подправила*/ text-decoration: underline; } #menu li { cursor: pointer; float: left; font-weight: normal; height: 26px; /*высоту подправила*/ line-height: 25px; /*добавила свойство line-height:25px, с учетом нижнего подчеркивания, можете сами регулировать*/ list-style-image: none; list-style-position: outside; list-style-type: none; margin-bottom: 0; margin-left: 30px; margin-right: 30px; margin-top: 0; padding-bottom: 0; /*убрала нижний паддинг*/ padding-left: 3px; padding-right: 3px; padding-top: 0; position: relative; text-decoration: none; /*убрала underline, так как у последующего элемента <а> по умолчанию есть это свойство*/ z-index: 10; } #menu li a { color: #FFFFFF; padding-top: 0; /*убрала нижний паддинг*/ }

У каждого свои плюсы и минусы. Инлайн-блоки могут быть произвольной высоты, их можно выравнивать в строке как угодно (по верху, по центру, по низу), их легко центрировать, они не выпадают из потока и не требуют после себя clear'инга. Зато для них значимы пробелы между тегами (обычно это мешает, приходится либо убирать пробелы в коде, либо городить отрицательные маргины и/или word-spacing'и, либо - имхо самая неудачная идея - обнулять font-size контейнеру и заново ставить потомкам), а также требуется хак для старых IE (inline + hasLayout). Float-ы работают во всех браузерах (в IE6 капризничают, но на эти капризы есть проверенные и простые "затычки"), безразличны к пробелам в коде, зато выпадают из потока (требуют clearfix'а или overflow:hidden для контейнера), обязательно прижимаются к правому или левому краю, по вертикали выравниваются только по верхнему краю, а в несколько строк корректно размещаются только при условии равной высоты. Как по мне, инлайн-блоки чуть погибче. Но всё равно нужно смотреть по конкретной задаче. Ну и для полноты картины можно вспомнить про третью альтернативу в лице display:table/table-cell

О селекторе :nth-child уже написано немало, но я решил перевести свежую статью Криса Коера , где все самые популярные методы использования этого селектора объединили и разложили по полочкам. У меня просто голова кружится, когда я сталкиваюсь с такими идеальными для использования селекторами как :nth-child или :nth-of-type! Чем лучше их понимаешь, тем больше css нердгазмов (от слова nerd - ботан, заучка и т.д) получаешь! В этих примерах я буду использовать простой набор элементов списка и случайно выбранные числа. Вам должно быть ясно, как менять их, чтобы получить подобную выборку. Выбираем только Пятый элемент: li:nth-child(5) { color: green; } Чтобы выбрать первый элемент, вы можете использовать :first-child. Ну или вы уже сами догадаетесь как для этой задачи изменить пример, который я показал выше. Выбрать все, кроме первых пяти: li:nth-child(n+6) { color: green; } Если бы здесь было больше 10 элементов, такой селектор выбрал бы всех их, начиная с 6-го. Выбрать первыe пять элементов: li:nth-child(-n+5) { color: green; } Выбрать каждый четвертый, начиная с первого: li:nth-child(4n-7) { /* или 4n+1 */ color: green; } Выбрать только четные или нечетные: li:nth-child(odd) { color: green; } li:nth-child(even) { color: green; } Выбрать последний элемент: li:last-child { color: green; } Выбирает 10-ый, потому-что у нас есть 10 элементов. Было бы 8 - выбрал бы 8-ой элемент, 1290 - 1290-ый элемент и т.д Выбрать второй с конца: li:nth-last-child(2) { color: green; } Выбирает 9-тый элемент потому что у нас их 10. Было бы 30 - выбирал бы 29-тый элемент. Кроссбраузерность: Кроме ИЕ существует не так много браузеров, о поддержке этих селекторов в которых следует беспокоиться. Для ИЕ используйте Selectivizr.

Лучше как контрольный в голову

window.addEventListener('load',function() { var img = document.getElementById('img'); img.onload = function() {img.style.display = 'block';} },false);А как-нибудь так? Только IE не в курсе, что такое addEventListener, у него attachEvent вроде, и в параметре 'onload'

Когда заканчиваются аргументы - в дело идут права модератора. И нигде работодателя я из себя не строил. У меня был простой вопрос новичка в html/css (собственно этот раздел для чего сделан?). Но вместо простого ответа добавить </a> в ответ я получил какие-то "плевки" гуру.

нормально запросики. Придумать дизайн, а потом ещё и сверстать.