0
I have a CSS development problem of a Slide, only in the Firefox browser. For the site I am using a slide plugin Jquery Malsup
Slide works perfectly on other browsers, less in Firefox Desktop mode.. (Version 54.0.1) See the pictures.
The home page is empty, but if you scroll the page to the right the image went there..
already add margin-left 0. left:0
and does not solve, only adjusts if I change the property Inline-Block
for block
, but then I end up having trouble with the slide transitions that get weird, below my code. Tips?
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;
}
What is the version of your plugin? Cycle2?
– user86792
Yes! Cycle 2! hugs!
– Diego Lela
Maybe it could be your CSS conflict. Move the CSS of slideshow to the last of the list of files on
head
.– user86792
I’m not using an external css.. the css code I posted above is inside my custom stylesheet.... hugs
– Diego Lela