Hello,

I have two menus on my page that are driven by a database back-end. Both my top and bottom menus have an itemseparator that uses an image at the top and bottom (on the top menu) and on the left and right (of the bottom menu) as shown in the image below. I have placed a red box around the areas that have the images I am speaking about.



If I let the site stay inactive for a bit (5-15 minutes) then those images disappear for a bit and it requires that the user keep that particular menu item open until the items download. It happens in both IE 6 and Firefox.

Do you have any suggestions on how I can get around this behavior? I have already read and implemented your suggestions for faster rendering that was spoke about in a previous post/link to your menu help center.

Any help would be much appreciated.

Thanks!

Matt L.

Sure, let me try to explain better.

Lets say that you came to my site and moused over the bottom menu item titled "Prospective Members". This would then dropdown a second menu with the options "Oregon" and "Montana", with "Select a region:" to the left of them. In the image I posted above, I have my menu set up as follows for the bottom menu dropdown:

SubMenuItemLeft : Select a region : Oregon : | (this is a separator item) : Montana : SubMenuItemRight

I must apologize, in my previous post I stated that these items were "separator items" but they are in fact regular items.

The SubMenuItemLeft and SubMenuItemRight are items that have CSS classes associated with them as follows:

.BottomMenu_SubMenuItemLeft
{
width: 23px;
height: 40px;
background: url(Images/Menu/BottomMenu_DropDownLeft.gif) no-repeat;
}

.BottomMenu_SubMenuItemRight
{
width: 23px;
height: 40px;
background: url(Images/Menu/BottomMenu_DropDownRight.gif) no-repeat;
}

Page declaration for these menu items:

<eo:MenuItem ItemID="SubMenuItemLeft" NormalStyle-CssClass="BottomMenu_SubMenuItemLeft" HoverStyle-CssClass="BottomMenu_SubMenuItemLeft" />
<eo:MenuItem ItemID="SubMenuItemRight" NormalStyle-CssClass="BottomMenu_SubMenuItemRight" HoverStyle-CssClass="BottomMenu_SubMenuItemRight" />

If the page is left to sit for a bit, then the items titled "SubMenuItemLeft" and "SubMenuItemRight" will actually disappear (i.e. the background image is not displayed) until the browser "re-downloads" them after a short delay. Then they suddenly show up and the menu looks complete.

This is how the bottom menu looks if the images are gone, prior to them reappearing after leaving the menu open for a short time (i.e. 0.5 to 1 second)



Thanks!

Matt L.

Ahh, good point. I will try that out. I was not aware of the image item.

Thanks!

Matt L.

Hi Matt,

What I suggested was to use an image only item, not to use it as background. It's basically an item with just the image and no menu item text, which should be your case for the separator items and corner items.

Thanks

Also, would this be considered an "image-only" item?

e.MenuItem.Image.Url = "~/Styles/Images/Menu/BottomMenu_DropDownLeft.gif";
e.MenuItem.Image.Height = 40;
e.MenuItem.Image.Width = 23;

Thanks for the help :)