FreneticFx

Estou criando um site, mas estou tendo alguns problemas com a parte do css no firefox. Tenho 3 imagens disposta horizontalmente que, quando eu dou hover dropa um <span> em cada uma delas. No firefox todos os <span> dropam na terceira imagem. Deixo o código a seguir: HTML: <div id="column"> <figure><a href="galeria1.html"><img src="images/galeriahover02.jpg"/></a></figure><span>Retrospectiva 2015</span> <figure><a href="galeria2.html"><img src="images/galeriahover01.jpg"/></a></figure><span>Texto2</span> <figure><img src="images/galeriahover03.jpg"/></figure><span>Brevemente...</span> </div> CSS: #column{ margin:10px; position:relative; width:830px; height:190px; margin:0 auto; } #column figure{ float: left; margin: 0; padding:0px 0px 0px 10px; border-radius:50px; } #column figure img{ border-radius:5px; -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; border:none; } #column figure img:hover{ border-radius:5px; -webkit-filter: grayscale(0); filter: grayscale(0); } #column span{ font:bold 16px Arial; position:absolute; width:260px; text-align: center; bottom:5px; margin:0 0 0 -260px; padding:0; color:#4b4131; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } #column figure:hover+span{ opacity:1; bottom:-8px; } Estou sem saber o que está dando de errado