Tuesday, July 26, 2005


Improving the UI of mapping sites using CSS

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:
I also made a similar CSS file for Google Maps, which gives a similar set of improvements:
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.

This comment has been removed by a blog administrator.
Very nice work. I would love to see it as a greasemonkey script too.
Hmm. This didn't work for me. I put the googlemaps.css file in a subfolder in my Firefox folder, then went to http://maps.google.com/ and selected CSS-add user style sheet, and selected the googlemaps.css file.


What am I doing wrong?
Post a Comment

Links to this post:

Create a Link

<< Home