How does CSS formatting in a Google Maps bubble work?

Answer 1

My first guess is that you're running into an issue with CSS specificity. There is a good article on it at http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, so if you can include a container element ID, that may help.

Let me know if this doesn't turn out to be the problem and I'll come up with more ideas.

Answer 2

As suggested I've gone in with Firebug to see what's going on. It looks like Google is doing two obnoxious things:

1. It's stripping out all class attributes from my HTML.
2. It's throwing all kinds of hard-coded styles around.

Here's my HTML along with the first couple of wrappers inserted by Google:

<div style="font-family: Arial,sans-serif; font-size: small;">
    <div id="iw_kml">
        <div>
            <h6>Concession</h6>
            <h4>BOIS KASSA 1108000 (Mobola-Mbondo)</h4>
            <p>
                Description goes here</p>
            <a target="_blank"><span />View details </a>
        </div>
    </div>
</div>

As you can see, my classes (e.g. MapPopup in my first div, Button etc. in the <a> tag) have all been stripped out.

Knowing this I'll be able to work around Google's interference, using !important and targeting the container div for the whole map - still, this is annoying, and unexpectedly clumsy coming from Google.

Answer 3

More related obnoxiousness related to the HTML in a KML <description> block: Any links are given the attribute target="_blank", whether you like it or not. I'm currently exploring ways to undo that, using jQuery, but what a drag. I really don't understand why Google feels the need to tamper with this HTML.

See also this thread on the official Google Group.