How can I increase the height of an infowindow in Google Maps API?

How can I increase the height of an infowindow in which I have passed an address? It is displayed properly in Windows 7 with IE8 and Firefox, but in Windows XP, the address part is outside of the infowindow.

function initialize() {
           if (GBrowserIsCompatible()) {
             var map = new GMap2(document.getElementById("map_canvas"),
                        { size: new GSize(400,300) } );
             map.setCenter(new GLatLng(23.027527,72.508223), 13);
             var point = new GLatLng(23.027527,72.508223);
             var html_text  = "<table cellspacing=0 cellpadding=0><tr><td><b><font size=-1px>hi</font></b></td></tr><tr><td><font  size=-2px>hisdf,</font></td></tr><tr><td><font size=-2px>hisdf</font></td></tr><tr><td><font  size=-2px>hisdfs</font></td></tr></table>";
             var marker = new GMarker(point, G_DEFAULT_ICON);
             map.addOverlay(marker);
             marker.openInfoWindowHtml(html_text); 
             GEvent.addListener(marker, "mouseover", function() {
                 marker.openInfoWindowHtml(html_text);
             });

             map.enableScrollWheelZoom();   

             var customUI = map.getDefaultUI();
             customUI.controls.scalecontrol = false;
             map.setUI(customUI);
           }
 }

---

this is my code and how can i apply div in the function can you suggest me?

Google Maps API Sample

function initialize() {
               if (GBrowserIsCompatible()) {
                 var map = new GMap2(document.getElementById("map_canvas"),
      { size: new GSize(400,300) } );
                 map.setCenter(new GLatLng(23.027527,72.508223), 13);
                 var point = new GLatLng(23.027527,72.508223);
                 var html_text  = "<table cellspacing=0 cellpadding=0><tr><td><b><font size=-1px>Cadila Healthcare Ltd</font></b></td></tr><tr><td><font  size=-2px>Satellite Cross Roads, Ahmedabad,</font></td></tr><tr><td><font size=-2px>Gujarat, India, 380015</font></td></tr><tr><td><font  size=-2px>Phone : 79-26868100</font></td></tr></table>开发者_StackOverflow;";
                var marker = new GMarker(point, G_DEFAULT_ICON);
                 map.addOverlay(marker);
                 marker.openInfoWindowHtml(html_text);
                 GEvent.addListener(marker, "mouseover", function() {
                          marker.openInfoWindowHtml(html_text);
                      });


                 map.enableScrollWheelZoom();   

                var customUI = map.getDefaultUI();
                 customUI.controls.scalecontrol = false;
                 map.setUI(customUI);

               }
     }


</script>

---

First I strongly recommend that you don't use html in variable that way. It is really hard to read and potentially exposes you to XSS attacks. Use proper html elements from the DOM instead.

<div id="myTemplates" style="display:none">
<table cellspacing=0 cellpadding=0>
    <tr>
        <td><b><font size=-1px>hi</font></b></td>
    </tr>
    <tr>
        <td><font  size=-2px>hisdf,</font></td>
    </tr>
    <tr>
        <td><font size=-2px>hisdf</font></td>
    </tr>
    <tr>
        <td><font  size=-2px>hisdfs</font></td>
    </tr>
</table>
</div>

and

$('#myTemplate table').clone();

to get the element.

Then of course you will want to change the styling from inline to CSS, which will make it much easier to see what's wrong with it, and for the community to help. :-)

Then to your question: It looks like one of the container element in the generated popup has width and height specified in the element.

<div style="position: relative; left: 0px; top: 0px; z-index: 10; width: 249px; height: 90px;" class="gmnoprint">

That could be the reason that your content doesn't fit. IE and FF handles boxing in different ways.

---

function initialize() {
           if (GBrowserIsCompatible()) {
             var map = new GMap2(document.getElementById("map_canvas"),
  { size: new GSize(400,300) } );
             map.setCenter(new GLatLng(23.027527,72.508223), 13);
             var point = new GLatLng(23.027527,72.508223);
                              var html = "<table width=\"100%\" border=\"0\" cellpadding=\"0\"cellspacing=\"0\">";
                    html += "<tr><td><b><font size=-1px>dfgd</font></b></td></tr>";
                    html += "<tr><td><font  size=-2px>dfgdg</font></td></tr>";
                    html += "<tr><td><font size=-2px>dfgdg</font></td></tr>";
                    html += "<tr><td><font  size=-2px>fdgdgd</font></td></tr>";
                    html += "</table>";
                    html = "<div style=\"position: relative; float: left; width: 225px; height: 80px; border: 0px coral solid;\">" + html + "</div>"; 
            var marker = new GMarker(point, G_DEFAULT_ICON);
             map.addOverlay(marker);
             marker.openInfoWindowHtml(html); 
             GEvent.addListener(marker, "mouseover", function() {
                      marker.openInfoWindowHtml(html);
                  });


             map.enableScrollWheelZoom();   

            var customUI = map.getDefaultUI();
             customUI.controls.scalecontrol = false;
             map.setUI(customUI);

           }
 }

you can use the html like this....