How to set the size of asp:menu images?

When the menu images are not already in the cache, IE tries to display the images before it knows their sizes (which is not a very useful feature by the way). The result of this is that the first time the menu loads, it tends to "jump" until IE figured out the sizes of the images. If you reload the page, the problem is gone because the images are in the cache and IE knows the sizes immediately.
If your images all have the same sizes, you can work around this using CSS. There are several ways to do this, the simplest being to set the width, height or both on your menu item style to constrain the total size of your menu items.
Another, better workaround uses CSS selectors to modify the size of expand images directly. Here's how it works.

Specify a class for your menu item like this:


<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />

Then, in your CSS, add the menu item class and another one that will target all images within an element that has this class and set the image size there:

.menuitem {}

.menuitem img {
  width: 40px;
  height: 40px;
}

That's all. Now your expand image has a fixed size of 40x40 pixels.

If you need the various images that you use to be of different sizes (which IMHO is a weird design choice but who am I to judge other people's designs?), you'll need to qualify your style a little more with an attribute selector, for example:

img[src="images/myexpandimage.gif"] {
  width: 40px;
  height: 40px;
}

2 Comments

Comments have been disabled for this content.