tags:

views:

315

answers:

2
+1  Q: 

Google Maps InfoBox Not Displaying Correctly in IE

I can only post one link so here is a reference page with corresponding links: http://rireal.com/code/index.html

I am using a modified version of extinfowindow for Google Maps v3 (reference link 1) to display a custom infobox window for my markers. While I successfully implemented the InfoBox in v3, I ran into an issue with IE during testing. The infobox renders correctly in all browsers but IE. However, if I view the infobox HTML directly with IE, it renders correctly. But, when I view the infobox within the map (click on a marker), I see this: (reference link 2). The HTML file is at (reference link 3) and should render fine in any browser when viewed directly. The infobox javascript I am using is at (reference link 4).

I am not sure why the display only messes up when rendered on the map in IE. I have changed the positioning and class/id to check for any conflicts but have had no luck. The positioning and backgrounds get messed up in IE no matter what I change. I am missing something? Please let me know if I need to give any extra information.

A: 

MSIE often needs the correct DOCTYPE to display things with precise alignments.

Try using

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

Mike Williams  2010-01-31 23:00:07
The problem seems to be rendering the view within Google Maps itself. IE renders it fine when viewed by itself. See the links on the reference page for an example.
Tres Trantham  2010-02-01 14:34:36
A: 

The solution was to use inline CSS for the info window. When rendering the info window HTML itself, IE processed the CSS correctly. However, when rendering the info window HTML on the map canvas, IE would ignore the tags and would only render inline CSS.

Tres Trantham  2010-02-24 20:47:24

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript