jQuery + CSS + IE problem: hidden elements appear briefly when page is loading

Has anyone else experienced the scenario described below?

For the sake of example, here's a very basic description:

#menuHolder contains menu items (#itemA, #itemB, #itemC,...#itemZ)

In CSS, I have #menuHold开发者_Python百科er's overflow set to hidden.

Using jQuery, I'm setting #menuHolder to a minHeight of 0, then expanding it to a maxHeight of 300 when a specific element is moused over.

No problems in FF, Safari or Chrome...but here's what happens in IE:

For a brief moment, #itemA, #itemB, #itemC,...#itemZ appear on top of each other as the page is loading in IE. Then they disappear and behave as normal.

It's as if either overflow:hidden or minHeight are not being recognized until the page loads.

Any ideas?

Thanks B

---

ie (at least up to 7 if i remember correctly) dont know about min-height

the solution is to use some css like that

min-height:100px;
height:100px; /* for ie7 */
height:auto !important; /* for all others */

it would be event better to target ie6/7 with some conditional comment tricks like in http://html5boilerplate.com

---

Maybe you should have the container display:none in the css, preload any images used in the now invisible container using jquery, then in jquery use proper height instead of min- and max- when mousing over happens.

---

In some cases, something like this will work:

On the element that must not appear during the page load, hide it in the markup:

<ul id='my_element' style='visibility:hidden'>

Then, before you apply a jquery effect to show it (ie, slideDown()), remove the attribute AND re-hide it:

$me = $('#my_element');  // cache it to improve performance
$('#some_other_element').click(function() {
  $me('style','visibility:visible').hide();
  $me.slideDown(800);
});

One day IE support will not require such antics. Until then, hope this helps.

---

There is still no perfect solution for some of the old jQuery datatables (e.g., 1.6.x), it seems all the hidden colum will be shown briefly: being it using the bVisibility: false property in table data, or set column visibility dynamically. fnSetColumnVis( 1, false );

e.g.

jquery datatables hide column

Does anyone know this has been solved in the newer version of datatables?