VJiK

Адрес: http://htmlacademy.ru/courses/ Довольно неплохие курсы для начинающих изучать HTML и CSS. Всё обучение в академии происходит в практическом режиме. По сути, оно сводится к прохождению огромного количества практических заданий. PS Если вдруг кто вздумает записаться на платный интенсив — промо-код: 10162bcde6 (даёт скидку 10%)

извиняюсь, не заметил)

ну вообще нельзя же несколько id использовать)) А если создать клон - то будет действовать и внутри клона, но не на всём документе.

$('#menu').on('click', 'LI:not(.cur) SPAN', function(){ console.log($(this).text()) }); Нет, тут как раз событие вешается на #menu, а потом в этом блоке уже ищется селектор 'LI:not(.cur) SPAN', и если найдено - выполняется функция.

Понял в чём тупил. Я думал поиск начинается внутри #menu и не включает в себя сам #menu. Спасибо за объяснения!

HTML: <ul class="b-sideMenu> <li class="cur"><span>1</span></li> <li><span>2</span></li> <li><span>3</span></li> </ul> JS #1: $('#menu :not(.cur) SPAN').each(function(){ console.log($(this).text()) }); $('#menu').on('click', ':not(.cur) SPAN', function(){ console.log($(this).text()) });В консоль выводится "2" и "3" (логично). События click работает для всех SPAN. Почему? Должно работать для 2 и 3. JS #2: $('#menu >:not(.cur) SPAN').each(function(){ console.log($(this).text()) }); $('#menu').on('click', '>:not(.cur) SPAN', function(){ console.log($(this).text()) });В консоль выводится "2" и "3" (логично). События click не работает ни для одного SPAN. Почему? Должно работать для 2 и 3. JS #3: $('#menu LI:not(.cur) SPAN').each(function(){ console.log($(this).text()) }); $('#menu').on('click', 'LI:not(.cur) SPAN', function(){ console.log($(this).text()) });В консоль выводится "2" и "3" (логично). События click работает для SPAN "2" и "3" (логично). Собственно, не могу понять почему в JS #1 и JS #2 некорректно вешаются события на SPAN? PS jQuery версии 1.7.1

Great Rash, спасибо за вариант решения. По проблеме топика ясно.. глюк ие с паддингами+бордеры+lineheight. Но вернемся к line-height. Я на всём сайте задаю сразу font-size и line-height в пикселях. Соответственно если где-то другой размер шрифта, то и line-height тоже указываю. Подскажите, как оптимизировать это)

А в чем проблема сочетания бордеров и паддингов - что в этом плохого? А по поводу line-height - у меня только с ним получается сделать кроссбраузерно отображение шрифта... как без него?

Не понятно почему бордер в телефоне влияет на высоту, а в городе нет...

Да, было бы неплохо Пока решил эту проблему просто - для ие7 задал отступ сверху на 1px меньше. Но хочется понять природу такого поведения.

Да, они находятся в одной строке, но выравниваются то блоки ТЕЛЕФОН и ГОРОД по верхней границе, то есть высота одного не зависит на положение другого по вертикали. Ведь так же?

Потому что телефон выравнивается по строке города. Поставь line-height: 26px; у DIV class=number А почему телефон выравнивается по строке города, они же не должны зависеть друг от друга... Как же это не зависят? Они же находятся в одной строке Это пробовал? Они находятся в разных слоях и не должны зависить друг от друга. Мне интересно понять отчего такое поведение именно в ИЕ7

Потому что телефон выравнивается по строке города. Поставь line-height: 26px; у DIV class=number А почему телефон выравнивается по строке города, они же не должны зависеть друг от друга... Там вот такая структура: <div class="city" style="float:left;">ГОРОД</div><div class="phone" style="float:left;">ТЕЛЕФОН</div>

Но почему дергается только телефон, а строка города при этом остаётся на месте?

Вот верстка: http://predvoditelev.ru/tmp/test_ie7_bug/main.html При нажатии на город отображается список городов с номерами. В большинстве браузерах отображается всё хорошо, а вот в ИЕ7 при открытии списка наблюдается смещение на 1px вниз, причем только для телефона... Отчего так?

Задаете ссылке бэкграунд с отрицательным позиционированием, а при наведении делаете нормальное позиционирование. Например, так: A { padding-left: 20px; background: url(ico.jpg) no-repeat -100px -100px; } A:hover { background-position: 0 0; }

Наверное всё же "Когда изображение больше ширины 800 пикселей." Попробуйте так: <div style="width: 100%; overflow: hidden"><img .... ></div> PS Может быть пригодится вот эта статья: Изображение с фиксированной высотой и 100% шириной

http://community.copiny.com/problem/details/id/36 Например кнопка "Оставить комментарий". outline: 0 none; очень даже работает в IE678, FF, Opera, Safari, Chrome

Есть на яндексе такая игра: http://play.yandex.ru/game.xhtml?game_id=76 Есть подобная карта для варкрафта... А есть ли ещё игры похожие на эту? Может кто знает

Я и не заставляю) Не интересно - проходите мимо.

Это для эксперимента. А вообще такой трюк используется для плавного затухания текста. И в некоторых цветах - этот глюк заметен А вот пипеткой - можно плагин поставить, а можно скриншот сделать и посмотреть в том же фотошопе.

Vlad, ну все уже поняли, что вам не интересна эта проблема и вы ничего не видите. Зачем повторяться?

Great Rash, а ты пипеткой поводи по картинками и всё заметишь В приведенной картинке исходный цвет заменен на черный для наглядности.

На этой картинке показаны наложения в разных браузерах: . На одной и той же системе, но в разных браузерах - по разному глючит... может и в браузере дело... swetlana, сделайте пожалуйста скриншоты в маке и линуксе этой странички: http://pepelsbey.net/pro/2010/08/color-blending/ У автора на маке тоже глючит.

Хочется разобраться в проблеме То, что это еле заметно - не убирает проблему))) Да и вообще интересно