Пробелы добавляются в оверлей в IE9, но не в Fx5 - PullRequest
Новая
       0

Пробелы добавляются в оверлей в IE9, но не в Fx5

0 голосов
/ 30 июня 2011

Я пытаюсь наложить «окно поиска» на Google Maps API V3. Наложение отлично работает в Fx5, но в IE9 оно работает не совсем правильно. IE9 добавляет немного пустого пространства между картой и серым div. Чтобы увидеть разницу, перейдите по ссылке:

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

«Поле поиска» должно быть выровнено с кнопками Map / Sattelite / MyTopo.

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>

1 Ответ

0 голосов
/ 30 июня 2011

Разрыв есть, потому что вы задаете ему относительное положение, а затем смещение использует top: 5px;справа: 200 пикселейЭто заставляет его двигаться, но оставляет зазор в своем первоначальном положении.Сделайте следующее. 

div
{
position: relative;
}

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

И удалите float: прямо из него.

...