Tales from the Evil Empire

Bertrand Le Roy's blog


Bertrand Le Roy

BoudinFatal's Gamercard

Tales from the Evil Empire - Blogged

Blogs I read

My other stuff


October 2005 - Posts

Atlas client-side Class Browser

This is probably one of the most useful resources on Atlas while there's no complete documentation on the client-side Base Class Library:


Wilco, who wrote that excellent class browser was an intern on Atlas last Summer.

Using a Virtual Earth Map as the details view in Atlas

Wilco has a brilliant example of a master-details scenario where the details are actually a Virtual Earth map. He also has a live demo of that scenario. Enjoy.


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

More Posts