var a=0;

  function scrollTop(s)
{
    var b=a+s;
  document.getElementById('dock').scrollTop=b;
  a=b;
    if(b==document.getElementById('dock').scrollHeight) {
        clearInterval(t);
    }

}
  function scrollBottom(s)
{
    var b=a-s;
  document.getElementById('dock').scrollTop=b;
  a=b;
  if(b==0) {
        clearInterval(t);
    }
}

  function goRight(s)
{
t=setInterval('scrollBottom(2);',20);
}
  function goLeft(s)
{
t=setInterval('scrollTop(2);',20);
}
                            

Исключительный ты наш!

В этой статье речь пойдет о подкармливании страшнейшего web-монстра современности - Интернет Експлорера.

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

За что стоит похоронить по человечески разработчиков IE, после жестокой расправы за несоблюдение стандартов, так это за то, что они, зная какую каку они сделали, предусмотрели множество обходных путей.
Один из них - условные выражения, или условные комментарии кому как нравится.
Их то мы и попользуем.

В HEAD-e верстаемой HTML-ки пишем:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

Что мы этим хотели сказать браузеру?
Примерно это: "Если тебе, дружище, не повезло, и ты родился осликом, будь добр, пойди в папочку "css", и найди там файлик ie.css. Он был создан специально для тебя."
Тоесть кроме основного CSS-а, експлорер цепляет ещё и дополнительный, созданый специально для него, в котором можно дописывать или перекрывать некоторые свойства для проблемных класов.

Теперь создаем в папочке css тот самый файл ie.css - и.. жизнь становится прекрасна, и безумно хороша!
Его мы и будем использовать для IE-поправок.

Стоит добавить, что другие браузеры этой фразы даже не увидят. Ну и конечно с помощью условных выражений можно варьировать версиями IE. 
Например специальный CSS для IE6 пожно прикрепить таким образом:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->

Конечно, условные выражения можно использовать самых разнообразных целях. Хотелось бы на всех сайтах добавить такое:

<!--[if IE]>
Директор Интернета настоятельно рекомендует использовать для просмотра 
веб-страниц программу Mozzila.
<![endif]-->

Вобщем кому эта тема неизвестна, вот официал: MSDN: About Conditional Comments.

А теперь самое интересное. Начнем наполнять наш ie.css.
И первое для чего он может пригодиться, это

PNG прозрачность для background-image в IE6

В общем CSS-е у нас есть такой клас:

.pngbkg { 
   background-image: url(img.png); 
   background-repeat: no-repeat;    
}

Все чудненько полупрозрачненько, до вот только шестёрочка наш бэкграундик то "засерила".
Проучим её таким образом. В ie.css пишем:

.pngbkg {    
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='crop', src='img.png');  
}

То-то же. Стоит заметить, что таким образом можно фиксить только бэкграунды со свойством no-repeat. К сожалению, если необходимо размножить его, без JavaScript не обойтись.

Минимально-максимальный хак

Воспользуемся замечательным свойством min-width, которое, как известно, при резиновой верстке позволяет задать минимальную ширину блока. Ширину, после которой блок сжиматься не будет.

Нормальный CSS гласит:

.min-block {
    min-width: 800px;
}

Оханьки! Наша преславутая шестерочка его не понимат!
Будем обманывать, что поделаешь. Сами разработчики IEшечки толкают нас к этому, ибо придумали такую хрень, как expression. И это ничто иное, как интеграция JavaScript в CSS.
Звучит дико, но что поделаешь - проза жизни. В нашем ie.css пишем:

.min-block {
    width:expression((document.documentElement.clientWidth ||
 document.body.clientWidth) < 799? "800px": "auto");
} 

И снова всё везде одинаково.
Теперь наоборот. Напишем имитацию max-width. Максимальная ширина блока - 1000px:

.max-block {
   width: expression((document.documentElement.clientWidth ||
 document.body.clientWidth) > 1001? "1000px": "auto");
} 

Проблема с высотой решается примерно таким же образом.

.maxheight-block {
   height: expression( this.scrollHeight > 332 ? "333px" : "auto" );
}

.minheight-block {
   height: expression( this.scrollHeight < 334 ? "333px" : "auto" );
} 

Вот и все дела.

Со временем буду дописывать сюда всякие CSS интересности для IE.

 
 
 
Не пустим.
Вход только для клиентов.