Estou com um problema de desenvolvimento CSS de um Slide, somente no navegador Firefox. Para o site estou usando um plugin de slide Jquery Malsup
O Slide funciona perfeitamente em outros navegadores, menos no modo Desktop do Firefox.. (Versão 54.0.1) Vejam as imagens.
A Pagina inicial fica vazia, mas se rolar a pagina para direita a imagem foi para lá..
já adicione margin-left 0. left:0
e não resolve, só ajusta se eu mudar a propriedade Inline-Block
para block
, mas ai eu acabo tendo problema com as transições do slide que ficam estranhas, abaixo meu código. Dicas?
HTML / PHP
<!-- Slide -->
<!-- Bloco do Slide e configs de tipo e botão -->
<div class= "cycle-slideshow"
data-cycle-caption-plugin="caption2"
data-cycle-timeout="3500"
Data-cycle-auto-height="container"
data-cycle-pager=".cycle-pager"
>
<?php
// repassando os parametros para a consulta e armazenando na variavel $result
$result = $objeto->SlideConsulta();
// percorrendo o array através de um laço para exibir as imagens
foreach($result as $dados){
$linkslide = $dados->caminhourl;
?>
<img src="<?=$dados->caminho?>" alt="<?=$dados->descricao?>" data-cycle-desc="<?=$dados->descricao?>" onclick="clickslide('<?=$linkslide?>')">
<?php
// fim foreach
}
?>
</div>
<div class=cycle-pager></div>
CSS
/***************************** SLIDESHOW **********************************************/
.cycle-slideshow {
display: inline-block;
width: 100%;
margin-top: -325px;
left: 0px;
/* exibindo a mão (no mouse) ao passar em cima da imagem */
cursor: pointer;
}
/* pager */
.cycle-pager {
text-align: center;
width: 100%;
z-index: 500;
position: absolute;
margin-top: -100px;
overflow: hidden;
}
.cycle-pager span {
font-family: arial;
font-size: 80px;
width: 33px;
height: 16px;
display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active {
color: #cc6666;
}
.cycle-pager > * { cursor: pointer;}
/* IMAGEM */
.cycle-slideshow img {
width: 100%;
height: auto;
display: inline-block;
}
.cycle-caption {
top: 10px;
position: absolute;
color: white;
bottom: 15px;
right: 15px;
z-index: 700;
}
/* overlay * Caption Slide */
.cycle-overlay {
position: absolute;
background: rgba(0, 0, 0, 0.4);
color: #fff;
bottom: 0;
width: 100%;
z-index: 600;
color: white;
font-size: 2rem;
padding: .6rem;
}
head
.