Google maps api v3 infobubble css Firefox

Question

J'ai une infoBubble avec du texte et des images. L'image alignée à droite (flèche) est enfoncée dans Firefox (Mac) mais pas Safari ni Opera en fonction de la longueur du texte à gauche et au-dessus. Voir le marqueur sur l'Australie: http://www.hostelbars.com/map_test_v3_3.html

Voici le 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; 
} 

Mis à part les images que je ne veux pas que les DIV pour avoir une largeur fixe. J'apprécierais de l'aide.

Brendon

Answer 1

semble se produire que la première fois et des articles avec des valeurs de la ville plus que les valeurs de nom. Ceci suggère que vous n'avez pas défini les valeurs width et height pour votre élément img (arrow.png), donc la première fois, il n'a aucune idée de la taille que ça va être, et des fois suivantes.

Ce que vous devriez probablement faire est de changer une image de fond, car il est simplement une image décorative iconifié qui signifie « à côté » ou « plus », et devrait donc être dans le domaine de CSS le style, non royaume de HTML de ce qui signifie (où 'img' vit). Voir this list of image replacement techniques.

Sinon, vous pouvez simplement appliquer img[src$="arrow.png"] { width: 29px; height: 29px; } ou ajouter des attributs width et height à l'élément img.