Question

When you embed a Google Map on a web page, copyright text is included on the map.

If you embed a map with a small width, the copyright text extends outside of the <div>, instead of wrapping onto two lines within it.

This is the HTML that Google Maps inserts for the copyright text:

<div style="-moz-user-select: none; z-index: 0; position: absolute; right: 3px; bottom: 2px; color: black; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; text-align: right;" dir="ltr">
    <span></span>
    <span>Map data &copy;2010  LeadDog Consulting, Europa Technologies - </span>
    <a href="http://www.google.com/intl/en_ALL/help/terms_maps.html" target="_blank" class="gmnoprint terms-of-use-link" style="color: rgb(119, 119, 204);">Terms of Use</a>
    <span></span>
</div>

I’ve tried using jQuery to select this HTML based on its contents (using :contains()) and style it differently, but none of the styles are applied in IE 8. They’re applied fine in IE 7 and Firefox.

$('.map_placeholder div:contains("Map data ")').css({'white-space': 'normal', 'margin-left': '70px', 'width': '210px', 'border-top': 'solid 10px #c00'});

• Any idea what’s up with IE 8?
• Do you know other methods to achieve the same result?

Answer 1

div span { white-space: normal;}