Вместо width используем padding

Продолжаем делать сайты "не как у ABC". То есть хорошие сайты, корректно работающие во всех браузерах. Но снова натыкаемся на баг IE.

Есть такой код:

<style type="text/css" media="all">
#progressbar1 {
padding: 2px;
background-color: #FFF;
border: 1px solid #E5E5E5;
}

#progressbar2 {
height: 9px;
background-image: url(../images/progress_bar_bg_01.gif);
background-repeat: repeat-x;
}
</style>

<div id="progressbar1">
<div id="progressbar2">
</div>
</div>

В файле progress_bar_bg_01.gif лежит анимированный gif, который показывает бегущие диагональные полоски. В итоге должен получиться "резиновый" (то есть на всю ширину контейнера) прогресс-бар.

В IE 6 не работает. Высота progressbar2 получается больше 9px. Проблема решается просто - меняем height: 9px на padding-top: 9px:

<style type="text/css" media="all">
#progressbar1 {
padding: 2px;
background-color: #FFF;
border: 1px solid #E5E5E5;
}

#progressbar2 {
padding-top: 9px;
background-image: url(../images/progress_bar_bg_01.gif);
background-repeat: repeat-x;
}
</style>

<div id="progressbar1">
<div id="progressbar2">
</div>
</div>