#1. An div rule will sometimes screw up the overlay popup. Suppose you have #container>#mapDiv, the following will add a weird white bar underneath the popup window (speech bubble when openInfoWindowHTML/openInfoWindow are called):
#container div{
margin-top:10px;
padding-bottom:10px;
}
#2. For some mysterious reasons, sometimes the GInfoWindow object gets some extra document div(s) nested when you call openInfoWindowHTML/openInfoWindow and that results in extra white padding space between the real content and teh GInfoWindow object. The workaround is to specify the “maxWidth” property in the GInfoWindowOption object which is the second parameter for an openInfoWindow(HTML) call:
GEvent.addListener(marker, "click", function() {
marker.openInfoWindow(venue.getHTML(), {maxWidth:300});
});
» & raquo;
• & # 149;
& & amp;
non-break space & nbsp;
en-dash/– & ndash;
em-dash/— & mdash;
Opening Double Quotes & ldquo;
Closing Double Quotes & rdquo;
Sources:
I had a brief hard time trying to align a few form elements
, e.g., “text” input, text label and “image” input. The following code will roughly do the work:
<!– sample code–>
<form action=”" id=”srchNameFrm” onsubmit=”return false;”>
<div class=”labellit”>Find alderman by name:</div>
<input type=”text” size=”25″ height=”22″ name=”alname” id =”alNameTxt” value=”" onFocus=”toggleAddrFeedback(false);” />
<input alt=”submit” type=”image” src=”images/go_btn41×18.gif” width=”41″ height=”18″ border=”0″ align=”top” value=”Go!” />
</form>
<div style=”width: 900px; height: 650px; position: absolute; visibility: visible; z-index:99999999; top: 100px; left: 0px; background:#fff;” id=”prflay”>
<iframe name=”bracket” src=”http://mydomain.dom/brackets.html” width=”900″ height=”650″ align=”left” frameborder=”0″ scrolling=”no”></iframe>
</div>
not sure if “style.visibility” and “id” matter.
Because google maps control how the overflowed DIV renders in infoWIndow/infoWIndowHtml class by itself, it sometime overshadows user defined overflow/max-height/max-width properties. It will cause the background tiles of infoWindows/infoWindowHtmls don’t render (lastly found in IE 6 Windows 2k/XP/SP 1, esp the page is iframed by another page, in my case it happens to be in another domain if it matters; or if the infoWindow is opened by click on a DOM object other than the marker it’s associated with). The solutions could be automatically loading the iframed page a second time, or emulating user directly clicking on the marker using javascript.
In the figure, the symptom happens in IE 6(winXP/2k pro) when the page with google maps is framed via a page from another domain. It happens If the user clicks on a ward number on the bottom of the page to pop up an infoWindowHtml the first time the iframe page gets loaded (instead of clicking on the corresponding custom markers within the map.) The fix is to use a trick that first calling “map.openInfoWindow()” then “map.closeInfoWindow()” immediately to simulate a mouse click the first time the map tiles rendered. What will happen in actuality is that no infoWindow will be displayed but it force IE to “rerender” the map tiles to get the right relative positioning for CSS.
<body leftmargin=”0″ topmargin=”0″ marginheight=”0″ marginwidth=”0″>
a, a:hover, td a:hover{
cursor: pointer;
cursor: hand;
}
or in js:
div.style.cursor=”pointer”;//for Firefox
div.style.cursor=”hand”;//for IE
the url in the background/background-image rule is relative to the css file. E.i.,
background:url(../img/delete.gif) no-repeat top left;
The above css file is in folder “css” which is the same level as “img” where the gif is in.
by ofir
http://www.webdeveloper.com/forum/showthread.php?t=92584
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=iso-8859-1″ />
<title>website</title>
<style type=‘text/css’>
body{
padding:0;
margin: 20px;
font: normal 13px arial, sans-serif;
}
table.TableMain{
border: 1px solid black;
}
thead tr th, tfoot tr th{
background-color: #996600;
}
.scrollTable th, .scrollTable td{
padding: 5px;
border: solid black;
border-width: 0 1px 1px 0;
}
.scrollTable{ width:100% }
.scrollTable > tbody{
height:300px;
overflow:auto;
}
.scrollTable .th_extra{
width: 18px;
padding: 0;
border-right-width: 0;
}
.TableContainer > .scrollTable .th_extra{ width: 19px; }
</style>
<!–[if IE]>
<style type=“text/css”>
div.TableContainer {
height: 300px;
overflow: auto;
width: 100%;
}
thead.fixedHeader tr {
position: relative;
}
.scrollTable{width: expression(this.parentNode.offsetWidth-17);}
.th_extra{display:none;}
</style>
<![endif]–>
</head>
<body>
<table border=‘0′ cellspacing=‘0′ cellpadding=‘0′ class=‘TableMain’ width=‘60%’>
<tr>
<td>
<div class=“TableContainer”>
<table border=‘0′ cellspacing=‘0′ cellpadding=‘0′ class=“scrollTable”>
<thead class=“fixedHeader”>
<tr>
<th>wkdjchlkj</th>
<th>khwdgc9376</th>
<th>76235uyg</th>
<th>yg</th>
<th class=‘th_extra’></th>
</tr>
</thead>
<tfoot>
<tr>
<th>wkdjchlkj</th>
<th>khwdgc9376</th>
<th>76235uyg</th>
<th>7</th>
<th class=‘th_extra’></th>
</tr>
</tfoot>
<tbody class=“scrollContent”>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
<tr>
<td>1111111111</td>
<td>JAh RAsta</td>
<td>222</td>
<td>444444444444</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
