Question

I’ve got a strange issue with a simple select dropdown not displaying in IE8. It works fine in FF, Chrome, and IE8 in compatibility mode. It’s within a scriptaculous accordion, but the accordion appears to function just fine. There is no error being thrown, either. The dropdown simply doesn’t display at all. I thought it might be caused by being named ‘order by’, so I tried changing that, but it still didn’t display. Here’s the snippet when viewed with view source (see after it for the strange thing) :

<form action="/foo" method="get"><input type="hidden" id="start_date" name="start_date" value=""/>
<input type="hidden" id="end_date" name="end_date" value=""/>
<div id="control">
    <div id="accordion">
        <div class="accordion-title"><img alt="Application_form" border="0" src="/images/icons/application_form.gif?1277517563" />&nbsp;&nbsp;Formatting:</div>
        <div class="accordion-body">
            <table border="0" width="100%">
                <tr>
                    <td width="30%">Order By</td>
                    <td>
                        <select name="order_by">
                            <option value="dates">Dates</option>
                            <option value="activities">Activities</option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
</div>
</form>

When I viewed this in IE8’s Developer Tool, in the HTML view, the select tag has been altered to this:

<select name="order_by" style="visibility: hidden;" __msh_save_visibility="inherit">

Where is this coming from?

Answer 1

Turns out these styles are being applied by the calendar.js script. There are calendar elements after this select tag in the form, but it seems odd to me that this script is changing tags outside of where the calendar objects are. I’m pursuing this in another question.