Блог

У меня есть информационный пузырь с некоторым текстом и изображениями. Выровненное по правому краю изображение (стрелка) перемещается вниз в 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 имел фиксированную ширину. Был бы признателен за некоторую помощь.

Брендон

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

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

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