javascript - Problems with HTML4 progress bar -

what want accomplish:

i trying build own, simple, progress bar. has html4, since used android app (most android browsers not support html5 progress tag)

i want able update javascript, whenever change of value in select combobox triggered. element looks this:

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

you can see element in action here.

my problem:

1. i on site: combobox selected maximal value, progress bar shown @ 100%
2. i change value of combobox: works expected
3. i set value of combobox 100%: see 2 bars, 1 green in first line (looks width = 100%) , 1 red on second line (also looks width = 100%)

anyone knows why happening? works on jsfiddle...

(btw., works if copy whole page jsfiddle)

i added overflow:hidden; , height:20px; parent div. works fine.

see jsfiddle

the css looks this:

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