troll

Оба работают, но верхний не видно (чтобы увидеть, попробуйте задать margin-top для body).

The vertical padding, border and margin of an inline, non-replaced box start at the top and bottom of the content area, and has nothing to do with the 'line-height'. But only the 'line-height' is used when calculating the height of the line box.

В IE8 и ниже не работает без ухищрений. Для беглого знакомства с трансформациями можно посмотреть это или это.

Если форма у картинок не очень сложная, то можно повернуть через CSS-трансформации (пример), подставив костыли для IE.

Селекторы тегов

Классы

Контекстные селекторы

Если существует необходимость, оборачивайте div в a, как и хотели. Спецификация HTML5 этого не запрещает, и браузеры, которые сейчас в ходу, вроде бы корректно обрабатывают такую разметку.

В Firefox нельзя перекрыть line-height, потому что там в стилях по умолчанию для input задано line-height: normal !important. В Bugzilla даже есть несколько багов про это. А border включается в ширину опять же из-за дефолтного -moz-box-sizing: border-box.

Через addEventListener нельзя отследить анонимные функции, именованые узнать можно разве нет?

Анонимные - это вроде таких?

elem.addEventListener('click', function() {alert('foo');}, false);

По-моему, Хром их показывает.

Уберите z-index у .roulette

Ну собственно вопрос про часть имени id я так и не услышал.

Можно сделать через селекторы атрибутов (id - тоже атрибут). Но злоупотреблять не стоит, поскольку такие селекторы гораздо медленнее работают.

z-index работает только для позиционированных элементов.

Как всё же оно на самом деле??

Должно быть так:

1. If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
   
2. Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none'...
   

А как на самом деле, я не знаю.

Согласно спецификации, строки, находящиеся рядом с флоатами, укорачиваются на ширину флоатов. Если строка при этом становится слишком мала для того, чтобы вместить какое-либо содержимое, она сдвигается вниз до тех пор, пока не удастся хотя бы что-нибудь в нее запихнуть. Так как у вас оба блока имеют одинаковую ширину, строки около флоата, грубо говоря, укорачиваются до нулевой длины, которой для слова "Content" в данных обстоятельствах явно недостаточно. Поэтому строка и перемещается вниз, растягивая свой родительский блок по вертикали.

В IE6 нормально работает

В чем же тогда сложность, если задача простая? Не хотите, чтобы mouseout срабатывал при переходе на потомков - напишите код, отлавливающий перемещения внутри элемента...

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

function scro(){

        elem=document.getElementsByTagName('div')[0];

        if (elem.scrollTop >= (elem.scrollHeight - elem.clientHeight)) {
          elem.scrollTop = 0;
          return;
        }

        elem.scrollTop=elem.scrollTop+10;

}

Бесплатная версия курсов Ильи Кантора существует в печатном виде на beta.javascript.ru. Практически весь материал, что дается на курсах по чистому JS, там присутствует.

Сдвиньте подвал вверх на собственную высоту отрицательным margin-top и для footer_correct сделайте clear: both.

Добавьте

return false;

после строчки

$('#box').toggle("fast");  // настраиваем выпадающий список

Должно перестать перекидывать наверх.

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

Я тоже новичок в JS, поэтому код может быть кривой

function test() {
  var answers = [1, 0, 2, 3, 0, 1, 3, 1, 2, 0, 3, 1, 0, 3, 1], score = 0;

  for (var i = 0, form; form = document.forms[i]; i++) {
    var inputs = form.getElementsByTagName('INPUT');

    if (inputs[answers[i]].checked) score++;
  }

  alert('Ваша оценка: ' + Math.round(score / 3));
}

Я могу ошибаться, но вроде бы через style нельзя назначать !important так, как это у вас сделано. То есть вам нужно либо убрать !important, либо добавлять объявление через cssText:

function display_registration() {
         document.getElementById('MPregistration').style.cssText = 'display: block !important';
}

Пардон, опоздал..

По-моему не может быть символа "-" в имени функции, только буквы, цифры, _ и $.

Прошу прощения, я не понял сразу, о чем речь. Условие изначально не очень корректно сформулировано, это да, но мы вроде еще на первой странице сошлись на том, что должны в итоге получиться 2 блока как бы с отступами 10 пикселей по краям. При этом нарушается пропорция 1:4 для областей содержимого блоков, а для самих блоков она сохраняется.