November 19, 2007 16:45 by Galcho
I had interesting experience today: A custom ASP.NET control (written by me :( ) that wraps Google maps functionality produces very nice results for a while but placed in new design started to render like this in IE...
I have to say it behaves well in all test pages up to now... well what happened?!
Unfortunately this happened on very complicated page with master page, themes, pieces loaded into page from DB and so on... briefly said difficult to isolate the issue. But still.. we are talking for HTML&JS so this is where the search should start ad more precisely - around map code (you can find more how to setup such map on Google Maps API Documentation).
After digging around I found that the control was placed in a HTML table, but I tested mainly in DIV tags. And markup looks like this:
1: <table border="0" cellpadding="0" cellspacing="0" >
4: <companyName:googlemaps id="GoogleMaps1" runat="server" height="400px" width="400px" />
A quick test was setup and bingo.. this is it! It is broken on very simple page :) But why!? A (not so) quick search gave this forum post saying:
Your page structure contains this (very much simplified here)
2: <tr><td><div id="map"></td></tr>
That means that when the script is run, it's acting on a map within a table which hasn't been finalised because the browser hasn't reached </table>. In IE, everything within that table is treated as though it has zero size until the browser reaches </table> and sorts it all out.
But why my control produces such resulting structure? Aaah this hurry... I haven't used ClientScriptManager.RegisterStartupScript Method but I placed a code with this simple Response.Write... It seemed right at that time and especially all tests worked fine...
So bottom line is: Always be careful if you break the page logic! And those methods are there for reason. And last but not least: An hour or two reading can save you days of boring ghost hunting ;)
Hope this helps