Проблемы с HTML4 прогресс бар

Question

То, что я хочу сделать:

Я пытаюсь построить свой собственный, очень простой, прогресс бар. Он должен быть HTML4, поскольку он используется для Android-приложения (большинство браузеров Android не поддерживают тег прогресса HTML5)

Я хочу, чтобы иметь возможность обновлять его с помощью javascript, всякий раз, когда изменение значения в выделенной combobox запускается. Элемент выглядит так:

<div style="width:100px"> 
    <div id="prog4" class="progressleft" style="width:100%"></div> 
    <div class="progressright"></div> 
</div> 

Вы можете увидеть элемент in action here.

Моя проблема:

1. я получаю на сайте: выпадающий список выбирается с максимальным значением, индикатор отображается на 100%
2. изменить значение выпадающего списка: все работает как ожидалось
3. Я установил значение combobox обратно на 100%: теперь я вижу 2 полосы, один зеленый в первой строке (выглядит как ширина = 100%) и один красный на второй строке (также выглядит как ширина = 100%)

Кто-нибудь знает, почему это может произойти? Он отлично работает на jsFiddle ...

(кстати., Он также отлично работает, если я копирую всю страницу в jsFiddle)

Answer 1

overflow:hidden; Я добавил и height:20px; к родительским делам. Теперь он работает нормально.

jsFiddle См

CSS-теперь выглядит следующим образом:

.progress { 
    overflow: hidden; 
    width:100px; 
    height:20px; 
} 
.progressleft { 
    float: left; 
    height: 20px; 
    background: #6d6 
} 
.progressright { 
    overflow: hidden; 
    height: 20px; 
    background: #d66; 
}