Though a "minor" cosmetic issue at times, it can be challenging to come up with creative ways to accommodate what I consider to be IE's shortcomings regarding the control of form items, in particular select lists. With at least one project I'm currently working on, I have a select list that lives in a fixed width div, yet there are times when the text values of the options are wider than the div itself. The client respectfully requested that I find a way to make the full option text display whenever the user clicks on the select list, so I of course referred to my reliable friend Google. After investing a couple of hours exploring different approaches to the challenge, I found none that I could get to meet my needs in both Firefox and IE. Oh, by the way, Firefox AUTOMATICALLY displays the full option text when you drop down without any developer intervention needed.  Do you realize how much development time could be saved if IE worked the same as Firefox??? Anyway, I digress.

The solution I came up with (which I didn't find anywhere in all of my googling) was very simple: when a user clicks the select list, swap out the class to one without width restrictions. When they make a selection, swap the class back to one WITH width restrictions.

I make sure that I set my container div to a fixed width and set the overflow to 'hidden', that way when my select list suddenly grows, it doesn't force the div to widen OR overlap any adjacent divs. Without further adieux then, a simple before and after (bear in mind that if you're viewing this in Firefox, you won't see any problem with the first list; it's only BILL'S BROWSER that has the issue):

I am the problem select list:

This is option 1. This is the second option, a bit longer. Drink to me only with thine eyes, and I will pledge with mine...

---

I am the better select list:

This is option 1. This is the second option, a bit longer. Drink to me only with thine eyes, and I will pledge with mine...

Here is the code for the samples above:

<style>
.ctrDropDown{
    width:145px;
    font-size:11px;
}
.ctrDropDownClick{
    font-size:11px;

    width:300px;

}
.plainDropDown{
    width:145px;
    font-size:11px;
}
</style>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the problem select list:<br><br>
<select name="someDropDown" id="someDropDown" class="plainDropDown">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>
<br>
<hr width="150px;" align="left">
<br>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the better select list:<br><br>
<select name="someDropDown" id="someDropDown" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>

One More Note:
This solution is a little bit less than perfect in that if you click the select list and don't choose a NEW value, the class doesn't switch back until you actually blur, or click off of, the select list. I have been unable to find a solution to that one anomaly, so if anybody out there has an idea, please do share!

Hope this helps somebody.

Doug out.

After spending more time than I care to say troubleshooting a CSS issue with IE7, I thought I'd share the details here in case it saves anybody else some time later down the road.

The Scenario...
I have an application that updates the contents of one of its divs using an ajax call that returns html. Within that retrieved html is a style block (<style>...</style>) defining how I want my table headers (<th>...also contained within the retrieved html) to appear.

IN A NUTSHELL: IE7 does not recognize inline styles that were retrieved via an ajax call.

Perhaps this is a "duh" item to some of you who already knew it, but since my beloved FIREFOX accepted them just fine, it didn't occur to me until I had tried every other possible iteration and syntax to move the styles out of my retrieved html and into my app's global CSS template, which (by the way), is the solution to this issue.

Hope this saves someone else some time and emotional pain.

Okay, here's the scene:

You're standing in a crowded 4 star hotel lobby, leaning against the 10 ft fountain in the center. In your hand you are holding a javascript array with 5 items in it, the last of which has a null value. So you ask the little Firefox guy on your left shoulder to tell you how many items are in your array. He looks it over, sees that the last item has a null value, and so tells you that your array has 4 items in it. Then you turn to the little IE guy on your right shoulder and ask him the same question. He looks it over, sees that there are 5 items in the array, and reports back that indeed your array contains 5 items. So, you ask the little IE guy on your right shoulder to please fetch you the 5th item in your array, and he immediately vomits all over your good coat and tie, because for the LIFE of him, he can't find a fifth item in your array! Despite the fact that he emphatically stated there were definately 5 items in your array, he lacks the testicular fortitude to be able to fetch the sucker. Now, were you to ask the Firefox guy on your left shoulder to fetch you the fifth item, he would politely remind you that there is no fifth item. But does Bill's browser do that? NOOOOOoooooo, it just makes all the time you spent writing your javascript function a total waste, because now you have to go BACK into it and re-code the logic to account for the fact that Bill's browser is going to behave like a drunken, double-visioned sailor on his last night of shore leave. Don't you hate that? Why can't Bill's browser just conform? The alternative is to do your part to help kill BIll's browser; download Firefox today and set yourself free. I highly recommend it.
That's my rant for this evening.