Virtual Earth Control - strange floating behavior

Question

I've been working my way through the "NerdDinner" MVC tutorial, and I just reached the part about adding a map control. I've run into some strange behavior of the Virtual Earth control that I just can't seem to figure out:

http://img17.imageshack.us/img17/3379/virtualearth.png

If you can't see the picture, the Virtual Earth control is floating in the top-left corner, obscuring the form, separated from the containing div, which isn't really in the correct position either, but it's better than where the control is.

As far as I can tell, I've copied all related code directly from the tutorial. Has anyone seen something like this before?

I'm using Firefox for most of my testing, but it appears to behave the same way in Internet Explorer 7.

Answer 1

Never mind, it would appear that the tutorial requires some CSS that it doesn't tell you about :/ Was able to retrieve it from the official "finished product" source code.

Answer 2

This drove me crazy!

The missing CSS is:

#theMap {
    position: relative; 
    width: 500px; 
    height: 450px;
}

Answer 3

Thanks a lot! I've had the same issue with the latest version of the book (ASP.NET MVC 2).

Note to others -- The "#" character turns the following text into a heading when placed at the beginning of a line here at stackoverflow. The CSS rule from Toeknee581 should look like this:

#theMap {
    position: relative;  
    width: 500px;  
    height: 450px; 
}