styling drop down list

long list items

[HelenDev]

I have a simple form list which I am styling with css, something like this:

<form>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3 is really long and ie cuts the end off, but firefox displays it all</option>
</select>
</form>

The <select> has a width of 140px. However if some of the list items are longer than this, in Firefox the drop down box expands to accomodate them, but in IE, it doesn't and the ends are cut off.

Does anyone have any experience of this or possible solutions?

[Nutter]

If having IE cut it off is an acceptable solution, does it really need to be that long?

One option would be to use some sort of scripting that would cut off the text at a certain length and append and elipse.

How are you building they page?

[skyeflye]

The only solution I was ever able to find for this issue was creating a "fake" drop- down box with Javascript and CSS (using <div> tags).

If it's still important that you have a form element that holds the selected value, then you can just change the value of a "hidden" <input> tag whenever a choice is clicked inside the "DHTML" drop-down menu.

There are all kinds of tutorials around for creating drop-down menus. The drop-down you created would just become visible onClick.

Of course, this solution is not perfect because it depends on the user having javascript running in their client.

Another approach would be to use radio butotns instead of a <select> box. But that's probably not very realistic since the design of the form is probably a chief concern in this case.

[HelenDev]

Thanks for the suggestions guys. I was wondering if there was a quick fix but it seems not.

does it really need to be that long

Probably not. That's my backup plan for the moment - make people keep the entries short.

I'll probably investigate the design again longer term.