Google maps api v3 infobubble css Firefox

Question

У меня есть инфо-пузырь с текстом и изображениями. Выровненное по правому краю изображение (стрелка) помещается вниз в Firefox (Mac), но не в Safari или Opera, в зависимости от длины текста слева и выше. Посмотрите маркер над Австралией: http://www.hostelbars.com/map_test_v3_3.html

Вот CSS:

.infowindow {
    background-color: #000;
    color: #FFF;
    font-size: 18px;
    font-family: Helvetica Neue, Helvetica, Arial;
    text-shadow: 0 -1px 0 #000;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}
.infowindow .iwPhoto {
    background-color: #F00;
    position: relative;
    padding-bottom: 1px;
    padding-top: 2px;
    padding-left: 5px;
}
.infowindow .iwName {
    background-color: #0F3;
    line-height: 33px;
    white-space: nowrap;
    position: relative;
    margin-left: 115px;
    margin-top: -70px;
    padding-right: 5px;
    padding-top: 2px;
}
.infowindow .iwCity {
    background-color: #C03;
    line-height: 32px;
    margin-left: 115px;
    padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
    background-color: #0CF;
    padding-right: 5px;
    padding-left: 5px;
    margin-top: 3px;
    float: right;
}

Помимо изображений, я не хочу, чтобы элементы div имели фиксированную ширину. Был бы признателен за помощь.

Брендон

Answer 1

Кажется, что это происходит только в первый раз, и для предметов с городскими значениями длиннее, чем названия. Это говорит о том, что вы не установили значения width и height для элемента img (arrow.png), поэтому в первый раз он не знает, каким будет его размер, и в последующие раз.

Что вам, вероятно, следует сделать, это изменить его на фоновое изображение, так как это просто иконизированное декоративное изображение, означающее «следующий» или «больше», и, следовательно, должно быть в царстве CSS стиля , а не HTML царство , означающее (где живет img). См. этот список методов замены изображения .

В противном случае вы можете просто применить img[src$="arrow.png"] { width: 29px; height: 29px; } или добавить атрибуты width и height к элементу img.