MSIE problem with menu & drop down toolbar contents

View: New views

2 Messages — Rating Filter: Alert me

MSIE problem with menu & drop down toolbar contents

by Chuck Okerstrom-2 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

Hi All!

I've been working with Dojo for some time now, but have one issue that I
just can't seem to get past and can't seem to find anyone addressing on
the web... and of course IE (being the bane of my existence that it is)
is the problem child!

Whenever I use a menu or dropdown toolbar, IE upon initial display,
briefly shows all the menu items on the page like an unordered list.
Then I guess after a while it figures out the CSS to apply, and then
finally correctly displays the items as they should be.

This is somewhat disorienting to users as well as ugly. Of course ALL
the other browsers don't exhibit this behavior. On slower systems it's
even more apparent, but even on fast ones you get this brief flash of
ugly text. And the bigger your menu content the more text that gets
listed on the page.

Is there some magical ordering of the CSS imports or other pixie dust I
can sprinkle in (sample shown below) that limits or stops this behavior?
Lord knows, I've tried several variations on my own, but to no avail.

Thanx,

Chuck

Sample Code:
===============

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu</title>
<style type="text/css">
@import /dojo/dijit/themes/tundra/tundra.css";
@import /dojo/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
dojo.require("dijit.Toolbar");
</script>
</head>
<body class="tundra">

<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Disaster Menu</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.PopupMenuItem">
<span>Natural</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Boll Weevils</div>
<div dojoType="dijit.MenuItem">Flood</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Emotional</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Spouse Left You</div>
<div dojoType="dijit.MenuItem">Spouse Caught You
Cheating</div>
<div dojoType="dijit.MenuItem">
Spouse Caught You Cheating and Left
</div>
<div dojoType="dijit.MenuItem">Spouse With Best Friend
<script type="dojo/method" event="onClick">
console.log("Now that is REALLY bad!");
</script>
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Medical</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">TB</div>
<div dojoType="dijit.MenuItem">Rheum-y-tism</div>
</div>
</div>
</div>

</body>
</html>

End Sample Code:
================
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
Dojo-interest@...
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

Re: MSIE problem with menu & drop down toolbar contents

by Bill Keese-2 :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

How about adding style="display: none" to your Menu?

On Sat, Nov 7, 2009 at 4:53 AM, Chuck Okerstrom <chuck@...> wrote:

Hi All!

I've been working with Dojo for some time now, but have one issue that I
just can't seem to get past and can't seem to find anyone addressing on
the web... and of course IE (being the bane of my existence that it is)
is the problem child!

Whenever I use a menu or dropdown toolbar, IE upon initial display,
briefly shows all the menu items on the page like an unordered list.
Then I guess after a while it figures out the CSS to apply, and then
finally correctly displays the items as they should be.

This is somewhat disorienting to users as well as ugly. Of course ALL
the other browsers don't exhibit this behavior. On slower systems it's
even more apparent, but even on fast ones you get this brief flash of
ugly text. And the bigger your menu content the more text that gets
listed on the page.

Is there some magical ordering of the CSS imports or other pixie dust I
can sprinkle in (sample shown below) that limits or stops this behavior?
Lord knows, I've tried several variations on my own, but to no avail.

Thanx,

Chuck

Sample Code:
===============

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu</title>
<style type="text/css">
@import /dojo/dijit/themes/tundra/tundra.css";
@import /dojo/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
dojo.require("dijit.Toolbar");
</script>
</head>
<body class="tundra">

<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Disaster Menu</div>
<div dojoType="dijit.MenuSeparator"></div>
<div dojoType="dijit.PopupMenuItem">
<span>Natural</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Boll Weevils</div>
<div dojoType="dijit.MenuItem">Flood</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Emotional</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Spouse Left You</div>
<div dojoType="dijit.MenuItem">Spouse Caught You
Cheating</div>
<div dojoType="dijit.MenuItem">
Spouse Caught You Cheating and Left
</div>
<div dojoType="dijit.MenuItem">Spouse With Best Friend
<script type="dojo/method" event="onClick">
console.log("Now that is REALLY bad!");
</script>
</div>
</div>
</div>
<div dojoType="dijit.PopupMenuItem">
<span>Medical</span>
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">TB</div>
<div dojoType="dijit.MenuItem">Rheum-y-tism</div>
</div>
</div>
</div>

</body>
</html>

End Sample Code:
================
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
Dojo-interest@...
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
Dojo-interest@...
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest