Zmarties

When run in Mozilla/Firefox, MSN Virtual Earth does not have quite the same visual appearance as it does in Internet Explorer - specifically the banner header holding the search controls at the top of the screen is solid in Mozilla, but is semi-transparent on IE.

I realized that this could be fixed by a simple change to the CSS. Whilst I was at it, I went further to see what else I could improve in the Virtual Earth UI, using just CSS. The changes I put in my CSS file for Virtual Earth are:

• make the banner semi-transparent, as it is in IE
• move the menu up to the top of the banner
• remove the "about" menu item, which adds nothing one you have read it once
• move the scale to the corner of the map, and give it a solid background, so that it can actually be read
• shrink the size of the zoom control slightly, and make it semi-transparent to obscure less of the map
  
• move the compass rose, so it's not so in the way, and make it semi-transparent (but less so when you actually mouse over it to use it)
• fix the size of the "x" box in the corner of info windows
• increase the font size for permalinks, to make them easier to read and click on
• hide the what and where help text hints
• Stop the search result titles SHOUTING
  

I also made a similar CSS file for Google Maps, which gives a similar set of improvements:

• enlarge the map to take up the whole of the browser window
• place the results window in front of the map, in a semi-transparent form, which becomes more solid when the mouse moves over it to use it
• reduce the size of the search form, which is similarly semi-transparent
  
• remove the logo and banner which were taking up too much space
  
• remove the text labels that just duplicate icons

These CSS files can be used in Mozilla by using the "Add User Style Sheet..." option in the Web Developer toolbar.

Update: 5th Oct 2005: There is a new layout to Google Maps that means this CSS file no longer works. I'll have to see if I can find time to fix it for the new layout.

Update: 6/10/05 I've updated the CSS file now.