views:

49

answers:

2

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?

+1  A: 

Use developer tools or firebug to check the cssproperties. Its probably an inheritance issue in that ff ignores

brian brinley
What would I look for? I looked at the CSS in IE's developer tools and noticed a class called '#plugin-SELECT' that was duplicated in this view, but not in the actual file. I tried unchecking one of them, but it unchecked both. Could it be something like that?
the dev tools allows you to see the applicable css, you should be able to click on the the elemet in the source and see the css styling. From this you can probably identify the css thats giving you the trouble.
brian brinley
very odd: it appears that IE itself is adding a style of `visibility:hidden` to the select tag; I can see in the IE8 Developer tool where each of the styles come from, and this hidden visibility style doesn't have a stylesheet associated with it; it also has a `__msh_save_visibility="inherit"` added; I've googled this but the results are odd
A: 

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.