Mysterious character bleed from IE dropdowns

Hi All,

I'm wondering if any of you HTML gurus can help with a mysterious problem. I have a select dropdown with a fixed width set by CSS and being populated using the DOM. For some reason, in IE the last character of the last option appears to be bleeding out of the drop down. If you click on the letter, the actual dropdown is selected but the mouse pointer is the caret!

I've included a screenshot below. Any input is greatly appreciated!

- Jamie

 

Hi,

That's an odd issue. I can't help much unless you care to post some the JS code you used to populate the select element?

- P

 

Yeah I can do:

	// Grab the finish select box for updating
	finish_select = document.getElementById(finish_id);
	
	// Clear out existing elements
	while (finish_select.options.length) finish_select.options[0] = null;

	// Add the list elements to the dropdown
	for (i=0;i<surface.finishes.length;i++)
	{
		var opt = document.createElement('option');
		opt.appendChild(document.createTextNode( surface.finishes[i].displayname ));
		opt.setAttribute('value' , surface.finishes[i].value);
		finish_select.appendChild(opt);
	}

Code (markup):

 

Looks fine from a standards point of view. Have you tried using innerHTML instead of createTextNode, for IE?

As in

if (navigator.userAgent.indexOf('MSIE')) {
  opt.innerHTML = surfaces.finishes[i].displayname;
}
else {
  opt.appendChild(document.createTextNode( surface.finishes[i].displayname ));
}

Code (markup):

Browser detects are evil, but it might work?

- P