Покритикуйте, пожалуйста.

[eckimoc]

Доброго времени суток уважаемые форумчане. Прошу вас оценить работу начинающего верстальщика.
 

http://www.training.od.ua/index.html

 

В качестве макета использовался макет с темы http://htmlforum.ru/index.php?showtopic=47965.

 

Валидацию html получается пройти, но css3 валидация - это полный провал. Найдено 34 ошибки и 34 предупреждения.

Я понимаю, что код должен быть полностью валидным, но если я начинаю убирать ошибки, то сайт начинает сыпаться на IE или перестают работать скрипты.

Также был бы вам благодарен, если бы помогли мне ответить на вопросы:

1. При появлении горизотальной прокрутки, если с помощью нее подвинуть окно браузера, то на появившемся месте не отображается фон, как это исправить?

2. Является-ли ошибкой "Pixel Perfect" верстки несовпадение букв текста?

3. Возможно-ли было реализовать переключение слайдов стрелками во втором слайдере без использования jquery? Если да, пожалуйста, направюте в каком направлении копать.

4. В IE 8 так и не получилось сделать нормальную работу слайдеров. Как вы боретесь с тем, что IE8 не распознает :checked. Вычитал про selectivizr, но так и не смог нормально его прикрутить.

Был бы благодарен, если бы вы указали на мою ошибку.

5. Проблема при сохранении спрайтов, их оттенок на сайте отличается от того что в фотошопе. Ломал голову, но так и не смог разобраться почему так получается.

 

Пожалуйста оцените качество верстки. Заранее спасибо за конструктивную критику.

 

[npofopr]

2. нет, в ТЗ написано про это.

3-4. потому и использовать надо скрипты, чтобы IE работал.

5. может у вас в CMYK, а не RGB? или посмотрите прозрачность может стоит в макете.

 

в среднем слайдере надо жирность активного элемента как то по другому сделать, не хорошо как то, что прыгает из-за этого всё.

[eckimoc]

Спасибо за ответ.

С фотошопом получается, что макет я просматриваю в кодировке RGB, при сохранении спрайтов выбираю "сохранить для web", там тоже указана кодировка RGB, но в результате получаю несовпадение оттенков. По-поводу слайдера не подскажете, как решить эту проблему? Я пробовал разные варианты, но без задания фиксированных padding, не получается растянуть блоки на всю ширину слайдера.

 

Вот мой скрипт:

<script type="text/javascript">$('document').ready ( function () {var input = $('#promo_tabs input:checked').attr('id'); $('#promo_label label').each ( function () {  if ( $(this).attr('for') === input) {  $(this).next('.slider_promo_tab').css("background-color", "#c60032" );  $(this).next('.slider_promo_tab').css("background-image", "inherit" );  $(this).next('.slider_promo_tab').css("color", "white" );  $(this).next('.slider_promo_tab').css("font-weight", "bold" );  $(this).next('.slider_promo_tab').children('div').css("opacity", "1" );    } })})$('#promo_left_arrow').click( function () { var input = $('#promo_tabs input:checked').prevAll("input[type=radio]").first(); input.click(); }) $('#promo_right_arrow').click( function () { var input = $('#promo_tabs input:checked').nextAll("input[type=radio]").first(); input.click(); })$('#promo_tabs input').change ( function () {var input = $('#promo_tabs input:checked').attr('id'); $('#promo_label label').each ( function () {  if ( $(this).attr('for') === input) {    $(this).next('.slider_promo_tab').css("background-color", "#c60032" );  $(this).next('.slider_promo_tab').css("background-image", "inherit" );  $(this).next('.slider_promo_tab').css("color", "white" );  $(this).next('.slider_promo_tab').css("font-weight", "bold" );  $(this).next('.slider_promo_tab').children('div').css("opacity", "1" );  } else {  $(this).next('.slider_promo_tab').css("background-color", "#F5F7F8" );   $(this).next('.slider_promo_tab').css("background-image", "" );   $(this).next('.slider_promo_tab').css("color", "#d9627c" );   $(this).next('.slider_promo_tab').css("font-weight", "normal" );   $(this).next('.slider_promo_tab').children('div').css("opacity", "0" );   } }) var input2= $('#promo_tabs').children('input').first().attr('id'); var input3= $('#promo_tabs').children('input').last().attr('id'); if (input === input2) {  $('#promo_left_arrow').css("opacity", "0.3");  $('#promo_left_arrow').css("cursor", "auto");   } else {  $('#promo_left_arrow').css("opacity", "1");  $('#promo_left_arrow').css("cursor", "pointer"); } if (input === input3) {  $('#promo_right_arrow').css("opacity", "0.3");  $('#promo_right_arrow').css("cursor", "auto");   } else {  $('#promo_right_arrow').css("opacity", "1");  $('#promo_right_arrow').css("cursor", "pointer"); }  })</script>

Прекрасно работает везде, кроме IE8. Как я понимаю, это связано с тем, что IE8 не поддерживает :checked. Для решения этой проблемы установил selectivizr, скрипт начал работать, но очень криво. Я так и не смог решить, почему скрипт не работает нормально. 

[eckimoc]

Не подскажите, почему CSS валидатор ругается  на такую форму записи:

 #check1:checked ~ #lab1, #check2:checked ~ #lab2, #check3:checked ~ #lab3, #check4:checked ~ #lab4, #check5:checked ~ #lab5 { background-color: #d0003e; }