My list item's child label elements disappear in IE on accordion menu opening
- by Scott B
I've got an app that's working pretty flawlessly in Chrome and FF, however, when I view it in IE, all is well until I click on a header element to activate it (jQuery accordion).
What happens then is that I see a brief flash where the content is there, then suddenly the entire left column disappears. This column is generated by a floated label element with a class of ".left" as seen below...
<ul class="menu collapsible">
<li class='expand sectionTitle'><a href='#'>General Settings</a>
<ul class='acitem'>
<li class="section">
<label class="left">This item if floated left with a defined width of 190px via css. This is the item that's disappearing after a brief display</label>
<input class="input" value="input element here" />
<label class="description">This element has a margin-left:212px; set via css in order to be positioned to the right of the label element as if in an adjacent table cell. When I add a max-width property to this element, it disappears in IE too!</label>
</li>
</ul>
</li>
</ul>
As you can see from the comments in the code above (for the two label elements) the description label disappears once I set a max-width on it (I don't have a max-width on the left label element, but it disappears nonetheless).
The initial view of this UL menu is fine (note the expand class declaration which makes this part of the accordion open at startup. Its not until I click the "General Settings" to toggle it closed, then back open, that the left class elements disappear (and only in IE)
