My list item's child label elements disappear in IE on accordion menu opening

Question

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)

Answer 1

No answers on this one, but I've finally figured it out. So in case anyone else has the issue with IE7 and the accordion menu, here's the solution.

I had a container div whose position was set to relative. I had to change the position property to "static" and then absolutely position child elements relative to the body (as opposed to relative to the container div).

I was able to keep my non IE css positioned relative to the parent div by prepending my IE specific css with a *

Example:

.wrapperDiv {
//all browswers except IE
position:relative; 
//IE gets this
*position:static;
}

.childDivExample {
//non IE positioning is relative to wrapperDiv
margin-left:20px;
//IE position is relative to the body document
//any property prepended with a "*" is only recognized by IE
enter code here
*position:absolute;
*left:200px;
*top: 100px;
}