Question

I’m trying to overlay a “search box” over a Google Maps API V3. The overlay works fine in Fx5, but in IE9 it does not work quite right. Some white space is added by IE9 between the map and the gray div. To see the difference, go to:

http://www.trailheadfinder.com/trail_search/trail_map

The “search box” should be aligned with the Map/Sattelite/MyTopo buttons.

HTML

<div id="maplayers">
 Select information to be shown:
 Trails: <input type="checkbox" id="trailsbox" onclick="boxclick(this,'trails')" />
 Campgrounds: <input type="checkbox" id="campgroundsbox" onclick="boxclick(this,'campgrounds')" />
 Panoramio: <input type="checkbox" id="panoramiobox" />
</div>
<div>
 <div id="mapsearchbar">
  <input id="searchTextField" type="text" size="50">
 </div>
 <div id="map" style="width: 100%; height: 500px"></div>
</div>

CSS

<style type="text/css">
#mapsearchbar {
 float: right;
 position: relative;
 right: 200px;
 top: 5px;
 z-index: 999;
}
#maplayers {
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 margin-top: 20px;
 background-color: #C4C4C4;
}
</style>

Answer 1

The gap is there because you are giving it a position of relative and then offsetting is using top: 5px; right: 200px. This cause it to move but leave a gap in its origional position. Do as follows.

div
{
position: relative;
}

div#mapserachbar
{
position: absolute;
top: 5px;
right: 170px;
}

And remove float:right from it.