<div id="map"></div>
div#map
{
position: relative;
width: 100%;
height: 100%;
}
When I examined the markup and style with firebug, I could see Bing Maps was inserting inline styling which caused my styles to not apply due to specificity.
How was it fixed?
After some digging I found this article:
http://msdn.microsoft.com/en-us/library/bb412551.aspx
Which clued me to the fact that I needed to apply a class style and not a element style. Here is the code that fixed it:
<div id="map" class="mapClass"></div>
div#map.mapClass
{
position: relative;
width: 100%;
height: 100%;
}
Thanks Microsoft!