My UL child label elements disappear in IE on accordion menu opening

Posted by Scott B on Stack Overflow See other posts from Stack Overflow or by Scott B
Published on 2010-03-17T16:48:55Z Indexed on 2010/03/17 16:51 UTC
Read the original article Hit count: 192

Filed under:

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. It shows up fine otherwise.

© Stack Overflow or respective owner

Related posts about css