Question

I have an infoBubble with some text and images. The right aligned image (arrow) is pushed down in Firefox (Mac) but not Safari or Opera dependent on the length of the text to the left and above. See the marker over Australia: http://www.hostelbars.com/map_test_v3_3.html

Here’s the 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;
}

Aside from the images I don’t want the div’s to have a fixed width. Would appreciate some help.

Brendon

Answer 1

Seems to only happen the first time, and for items with city values longer than name values. This suggests you didn’t set width and height values for your img element (arrow.png), so the first time it has no idea what size it’s going to be, and subsequent times it does.

What you should probably do is change it to a background image, as it’s merely an iconified decorative image meaning ‘next’ or ‘more’, and thus should be in CSS’s realm of style, not HTML’s realm of meaning (where ‘img‘ lives). See this list of image replacement techniques.

Otherwise, you could just apply img[src$="arrow.png"] { width: 29px; height: 29px; }, or add width and height attributes to the img element.