<select> width in IE not behaving as in other browsers - html

Question

I have three select boxes.
<div style='float: left; padding-right: 10px;'>
<select size="10" name="company_id">
// a lot of options here
</select>
</div>
<div style='float: left; padding-right: 10px;'>
<select size="10" name="department_id" id="department_id">
// a lot of options here
</select>
</div>
<div style='float: left; padding-right: 10px;'>
<select size="10" name="user_id[]" id="user_id" multiple>
// a lot of options here
</select>
</div>
They are floated next to each other. When you select an item in the 1st one, an ajax query updates the values of the 2nd one.
What happens in Firefox and most other browsers is that it changes in size and pushes the 3rd one away. But in IE (6.0 and 7) the 2nd one changes size but it does not push the 3rd one away.
What i had done is to fix the size of the boxes but i want to fix this correctly, so anyone know how?
Here's the JQuery code i use to add the data to the departments select.
$.get("ajax/fetchDepartment.php?sec=departments&company_id="+company_id,
function(data){
$("#department_id").html(data);
});
data contains the <option>Stuff</option>'s needed
EDIT to add: The select boxes always have some value within them.
Here's a picture of what happens (i had to remove the items in the boxes via photoshop but you get my point)
selcet bug http://cznp.com/select_bug.jpg

Answer 1

IE and select options have certain 'quirks' (some, regarding select boxes and innerHTML are detailed here) about them that I've never really fully understood, but I can at least provide you with a workaround.
The trick is to add the options exlicitly to the select box, not just change the entire html of the select element wholesale. So the following works:
function changeval() {
var option = document.createElement("option");
option.text = 'my long text value to change stuff';
option.value = 'test';
$('#department_id')[0].options.add(option);
}
While this does not:
function changeval() {
var data = '<option value="test">my long test string with wide stuff</option>';
$("#department_id").html(data);
}
You might find this page helpful -apparently he fixed it by just retouching the innerHTML, so that might be a simpler option. Up to you.
The solution from the second link would look like:
function changeval() {
var data = '<option value="test">my long test string with wide stuff</option>';
$("#department_id").html(data);
$("#department_id").parent()[0].innerHTML += '';
}

Answer 2

try putting an option inside the selects on start. I guess u only start filling the second and third select when u selected something from the first.
I've had problems with empty selects in IE so just put an
<option value="-1">-</option>
in the 2nd and third select to start with.