css - Whitespace is being added to an overlay in IE9, but not in Fx5 -
i'm trying overlay "search box" on google maps api v3. overlay works fine in fx5, in ie9 not work quite right. white space added ie9 between map , gray div
. see difference, go to:
http://www.trailheadfinder.com/trail_search/trail_map
the "search box" should aligned map
/sattelite
/mytopo
buttons.
html
<div id="maplayers"> select information 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>
the gap there because giving position of relative , offsetting using top: 5px; right: 200px. cause move leave gap in origional position. follows.
div { position: relative; } div#mapserachbar { position: absolute; top: 5px; right: 170px; }
and remove float:right it.
Comments
Post a Comment