Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal mais uma vez aqui com outras dúvidas, estou desenvolvendo um site em HTML5 e CSS3 e me deparei com o seguinte problema finalizando o layout, eu estou usando novas tecnologias em java e uso um carroussel responsivo que se adapta aos dispositivos móveis porém quando abro ela no I.E 8 em modo de compatibilidade para I.E7 a estrutura do carroussel fica fora de padrão, segue os scripts abaixo:
<style type="text/css">
{
margin:0;
padding:0;
outline:0;
.clearout {
height:20px;
clear:both;
word-spacing:20px
} display:none;
}
.nbs-flexisel-container {
width:890px;
margin-left:37px;
position:relative;
max-width:100%
}
.nbs-flexisel-ul {
position:relative;
//---- ATENÇÃO DEIXEI COMENTADO AQUI PARA IREM DIRETO AO PROBLEMA QUE ENCONTREI
E NÃO ENCONTREI A SOLUÇÃO, VEJAM O WIDTH ABAIXO ESTA EM 9999PX,
MAS SE EU COLOCAR 100% ELE FICA FORA DE PADRÃO TAMBÉM NA VERSÃO 8 E TODOS OS OUTROS NAVEGADORES
----//
width:9999px;
margin:0;
padding:0;
list-style-type:none;
text-align:center
}
.nbs-flexisel-inner {
overflow:hidden;
float:left;
width:100%
}
.nbs-flexisel-item {
float:left;
margin:0;
padding:0;
cursor:pointer;
line-height:0;
}
.nbs-flexisel-item img {
width:100%;
height:105px;
margin-left:2px;
cursor:pointer;
position:relative;
margin-top:0;
margin-bottom:10px;
max-width:137px;
max-height:150px;
}
.nbs-flexisel-nav-left, .nbs-flexisel-nav-right {
width:50px;
height:34px;
position:absolute;
cursor:pointer;
z-index:10;
margin-top:90px;
}
.nbs-flexisel-nav-left {
left:-37px;
background:url([http://www.jcimoveisbrasil.com/html5/imagens/arrow_dir.png](http://www.jcimoveisbrasil.com/html5/imagens/arrow_dir.png)) no-repeat
}
.nbs-flexisel-nav-left a:hover {
background-position:left bottom;
}
.nbs-flexisel-nav-right {
right:-60px;
background:url([http://www.jcimoveisbrasil.com/html5/imagens/arrow_esq.png](http://www.jcimoveisbrasil.com/html5/imagens/arrow_esq.png)) no-repeat
}
#flexiselDemo2 p {
margin-top:-2px;
line-height:21px;
;
text-align:center;
display:block;
font-size:15px;
font-weight:bold;
color:#e94b16;
} color:#039;
line-height:20px;
display:block;
font-weight:normal;
font-size:12px;
color:#000
} margin-top:-2px;
line-height:21px;
;
text-align:center;
display:block;
font-size:15px;
font-weight:bold;
color:#e94b16
} color:#039;
line-height:20px;
display:block;
font-weight:normal;
font-size:12px;
color:#000
}
</style>
Apenas um pedaço do CSS, como disse acima parece que para solucionar o bug desse script os desenvolvedores deixaram dessa maneira , como têm pessoas experientes aqui no imasters e sempre tive boas soluções, gostaria de saber se têm como contornar esse problema segue o html do carroussel abaixo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<meta name="googlebot" content="index,follow"/>
<meta name="robots" content="index, follow" />
<meta name="msvalidate.01" content="967B61E7190889196655B34B16093D3A" />
<title> - IMOBILIÁRIA EM ITAQUERA - SÃO - PAULO - JC - IMÓVEIS - BRASIL - </title>
<script type="text/javascript">var repeat=1
var title=document.title
var leng=title.length
var start=1
function titlemove() {</script>
<script src="http://www.jcimoveisbrasil.com/html5/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script async type="text/javascript">
(function(e){e.fn.flexisel=function(t){var n=e.extend({visibleItems:5,animationSpeed:200,autoPlay:false,autoPlaySpeed:3e3,pauseOnHover:true,setMaxWidthAndHeight:false,enableResponsiveBreakpoints:true,clone:true,responsiveBreakpoints:{portrait:{changePoint:480,visibleItems:1},landscape:{changePoint:640,visibleItems:2},tablet:{changePoint:768,visibleItems:3}}},t);var r=e(this);var i=e.extend(n,t);var s;var o=true;var u=i.visibleItems;var a=r.children().length;var f=[];var l={init:function(){return this.each(function(){l.appendHTML();l.setEventHandlers();l.initializeItems()})},initializeItems:function(){var t=r.parent();var n=t.height();var o=r.children();l.sortResponsiveObject(i.responsiveBreakpoints);var a=t.width();s=a/u;o.width(s);if(i.clone){o.last().insertBefore(o.first());o.last().insertBefore(o.first());r.css({left:-s})}r.fadeIn();e(window).trigger("resize")},appendHTML:function(){r.addClass("nbs-flexisel-ul");r.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");r.find("li").addClass("nbs-flexisel-item");var t=r.parent();if(i.setMaxWidthAndHeight){var n=e(".nbs-flexisel-item img").width();var s=e(".nbs-flexisel-item img").height();e(".nbs-flexisel-item img").css("max-width",n);e(".nbs-flexisel-item img").css("max-height",s)}e("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(t);if(i.clone){var o=r.children().clone();r.append(o)}},setEventHandlers:function(){var t=r.parent();var n=t.parent();var f=r.children();var c=n.find(".nbs-flexisel-nav-left");var h=n.find(".nbs-flexisel-nav-right");e(window).on("resize",function(n){l.setResponsiveEvents();var o=e(t).width();var p=e(t).height();s=o/u;f.width(s);if(i.clone){r.css({left:-s})}else{r.css({left:0})}if(!i.clone&&a<=u){c.add(h).css("visibility","hidden")}else{c.add(h).css("visibility","visible");var d=c.height()/2;var v=p/2-d;c.css("top",v+"px");h.css("top",v+"px")}});e(c).on("click",function(e){l.scrollLeft()});e(h).on("click",function(e){l.scrollRight()});if(i.pauseOnHover==true){e(".nbs-flexisel-item").on({mouseenter:function(){o=false},mouseleave:function(){o=true}})}if(i.autoPlay==true){setInterval(function(){if(o==true)l.scrollRight()},i.autoPlaySpeed)}},setResponsiveEvents:function(){var t=e("html").width();if(i.enableResponsiveBreakpoints){var n=f[f.length-1].changePoint;for(var r in f){if(t>=n){u=i.visibleItems;break}else{if(t<f[r].changePoint){u=f[r].visibleItems;break}else continue}}}},sortResponsiveObject:function(e){var t=[];for(var n in e){t.push(e[n])}t.sort(function(e,t){return e.changePoint-t.changePoint});f=t},scrollLeft:function(){if(r.position().left<0){if(o==true){o=false;var e=r.parent();var t=e.width();s=t/u;var n=r.children();r.animate({left:"+="+s},{queue:false,duration:i.animationSpeed,easing:"linear",complete:function(){if(i.clone){n.last().insertBefore(n.first())}l.adjustScroll();o=true}})}}},scrollRight:function(){var e=r.parent();var t=e.width();s=t/u;var n=s-t;var f=r.position().left+(a-u)*s-t;if(n<=Math.ceil(f)&&!i.clone){if(o==true){o=false;r.animate({left:"-="+s},{queue:false,duration:i.animationSpeed,easing:"linear",complete:function(){l.adjustScroll();o=true}})}}else if(i.clone){if(o==true){o=false;var c=r.children();r.animate({left:"-="+s},{queue:false,duration:i.animationSpeed,easing:"linear",complete:function(){c.first().insertAfter(c.last());l.adjustScroll();o=true}})}}},adjustScroll:function(){var e=r.parent();var t=r.children();var n=e.width();s=n/u;t.width(s);if(i.clone){r.css({left:-s})}}};if(l[t]){return l[t].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof t==="object"||!t){return l.init.apply(this)}else{e.error('Method "'+method+'" does not exist in flexisel plugin!')}}})(jQuery)
</script>
<script async src="http://www.jcimoveisbrasil.com/html5/js/placeholder.js" type="text/javascript"></script>
<script async type="text/javascript" src="http://www.jcimoveisbrasil.com/html5/js/busca.js"></script>
<script async type="text/javascript" src="http://www.jcimoveisbrasil.com/html5/js/ajax_combo.js"></script>
<script type="text/javascript">var sticky = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the topif (scroll_top > sticky_offset_top) {
$('#sticky').css({ 'position': 'fixed', 'top':0, 'left':0 });$('#sticky').css({ 'position': 'relative' });
}
};$(window).scroll(function() {
sticky();
});$('a[href="#"]').click(function(event){
event.preventDefault();
});
});
</script>
<script async type="text/javascript" src="http://www.jcimoveisbrasil.com/html5/js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<script type="text/javascript">$(document).ready(function(){
$("#preloader").hide();
$("#content").show();
});
</script>
<style type="text/css">font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript">function validarform(formulario){
if(formulario.negocio_.value == ''){
alert("O campo Negócio é obrigatório.");return false;
}
if(formulario.ct_tipo_ .value == ''){
alert("O campo Tipo é obrigatório.");return false;
}
if(formulario.cidade_ .value == ''){
alert("O campo Cidade é obrigatório.");return false;
}
if(formulario.bairro_.value == ''){
alert("O campo Bairro é obrigatório.");return false;
}
return true;
}
</script></head>
<body>
<div id="preloader">
<div id="status">
<div class="carrega" align="center"></div>
</div>
</div>
<div class="container">
<div class="header">
<div class="logo_celular"></div>
<div class="topo"><param name="movie" value="http://www.jcimoveisbrasil.com/swf/jc021.swf" />
<param name="wmode" value= "transparent" />
<param name="quality" value="high" />
</object><br />
</div>
</div>
<div class="menu">
<div class="default">
<div id="sticky">
<ul id="navigate">
<li id="selected"><a href="[http://localhost/html5/inicio](http://localhost/html5/inicio)">Home</a></li>
<li><a href="[http://localhost/html5/empresa](http://localhost/html5/empresa)">Empresa</a></li>
<li><a href="[http://localhost/html5/cadastre-seu-imovel](http://localhost/html5/cadastre-seu-imovel)">Cadastre seu Imóvel</a></li>
<li><a href="[http://localhost/html5/servicos](http://localhost/html5/servicos)">Serviços</a></li>
<li><a href="[http://localhost/html5/pedido-de-imovel](http://localhost/html5/pedido-de-imovel)">Faça aqui seu pedido</a></li>
<li><a href="[http://localhost/html5/busca-de-imoveis](http://localhost/html5/busca-de-imoveis)">Imóveis</a></li>
<li><a href="[http://localhost/html5/contato](http://localhost/html5/contato)">Contato</a></li>
</ul></div></div>
</div>
<div class="content">
<div class="corpoHome">
<div id="faixa_emp" class="botoes_left">
<div class="text_emp"><b>EMPREENDIMENTOS</b></div>
</div>
<ul id="flexiselDemo3">
<li><div class="foto"><a href="[http://www.jcimoveisbrasil.com/html5/imovel/sobrado/vila-carmosina/sao-paulo/3](http://www.jcimoveisbrasil.com/html5/imovel/sobrado/vila-carmosina/sao-paulo/3)">
<img src="http://www.jcimoveisbrasil.com/img_imoveis/5000bcc04b9ba499c71a84a51c9b208f.jpg" width="138" height="104" alt="Imobiliária em São Paulo" /></a>
<p><span>Sobrado<br />Vila Carmosina <br /> São Paulo <br /> </span>R$ 549.000,00</p></div></li><li><div class="foto"><a href="#"><img src="http://www.jcimoveisbrasil.com/img_imoveis/indisponivel_site.jpg" width="138" height="104" alt="JC" /></a><p><br /><span style=" font-family:">Imóvel<br />Indisponível</span><span></span></p></div></li>
<li><div class="foto"><a href="#"><img src="http://www.jcimoveisbrasil.com/img_imoveis/indisponivel_site.jpg" width="138" height="104" alt="JC" /></a><p><br /><span style=" font-family:">Imóvel<br />Indisponível</span><span></span></p></div></li>
<li><div class="foto"><a href="#"><img src="http://www.jcimoveisbrasil.com/img_imoveis/indisponivel_site.jpg" width="138" height="104" alt="JC" /></a><p><br /><span style=" font-family:">Imóvel<br />Indisponível</span><span></span></p></div></li>
</ul>
</div>
<div id="faixa_vend" class="botoes_left">
<div class="text_emp"><b>VENDAS</b></div>
</div>
<ul id="flexiselDemo2">
<li><div class="foto"><a href="[http://www.jcimoveisbrasil.com/html5/imovel/sobrado/parque-do-carmo/sao-paulo/21](http://www.jcimoveisbrasil.com/html5/imovel/sobrado/parque-do-carmo/sao-paulo/21)">
<img src="http://www.jcimoveisbrasil.com/img_imoveis/b557b6139680af6dd7eed4cb6b9965ba.jpg" width="138" height="104" alt="Imobiliária em São Paulo" /></a>
<p><span>Sobrado<br />Parque do Carmo <br /> São Paulo <br /> </span>R$ 460.000,00</p></div></li>
<li><div class="foto"><a href="[http://www.jcimoveisbrasil.com/html5/imovel/apartamento/tatuape/sao-paulo/24](http://www.jcimoveisbrasil.com/html5/imovel/apartamento/tatuape/sao-paulo/24)">
<img src="http://www.jcimoveisbrasil.com/img_imoveis/7114d95ac5af8fedf6310357127fee09.jpg" width="138" height="104" alt="Imobiliária em São Paulo" /></a>
<p><span>Apartamento<br />Tatuapé <br /> São Paulo <br /> </span>R$ 370.000,00</p></div></li>
<li><div class="foto"><a href="[http://www.jcimoveisbrasil.com/html5/imovel/sobrado/parada-xv/sao-paulo/13](http://www.jcimoveisbrasil.com/html5/imovel/sobrado/parada-xv/sao-paulo/13)">
<img src="http://www.jcimoveisbrasil.com/img_imoveis/7fa3336e3df61ca0405fcc765e88b553.jpg" width="138" height="104" alt="Imobiliária em São Paulo" /></a>
<p><span>Sobrado<br />Parada XV <br /> São Paulo <br /> </span>R$ 210.000,00</p></div></li>
<li><div class="foto"><a href="[http://www.jcimoveisbrasil.com/html5/imovel/terreno/itaquera/sao-paulo/28](http://www.jcimoveisbrasil.com/html5/imovel/terreno/itaquera/sao-paulo/28)">
<img src="http://www.jcimoveisbrasil.com/img_imoveis/0b4d6f131b7599275d49104cc2751ab1.jpg" width="138" height="104" alt="Imobiliária em São Paulo" /></a>
<p><span>Terreno<br />Itaquera <br /> São Paulo <br /> </span>R$ 1.600.000,00</p></div></li><li><div class="foto"><a href="[http://www.jcimoveisbrasil.com/html5/imovel/apartamento/itaquera/sao-paulo/33](http://www.jcimoveisbrasil.com/html5/imovel/apartamento/itaquera/sao-paulo/33)"><img src="http://www.jcimoveisbrasil.com/img_imoveis/sem_foto.jpg" width="138" height="104" alt="jc" /></a><p><span>Apartamento<br />Itaquera <br /> São Paulo <br /> </span>R$ 350.000,00</p></div></li>
<li><div class="foto"><a href="[http://www.jcimoveisbrasil.com/html5/imovel/apartamento/itaquera/sao-paulo/23](http://www.jcimoveisbrasil.com/html5/imovel/apartamento/itaquera/sao-paulo/23)">
<img src="http://www.jcimoveisbrasil.com/img_imoveis/cf66cbeb1eacd697673e7acaa234c19c.jpg" width="138" height="104" alt="Imobiliária em São Paulo" /></a>
<p><span>Apartamento<br />Itaquera <br /> São Paulo <br /> </span>R$ 25.000,00</p></div></li><li><div class="foto"><a href="#"><img src="http://www.jcimoveisbrasil.com/img_imoveis/indisponivel_site.jpg" width="138" height="104" alt="JC" /></a><p><br /><span style=" font-family:">Imóvel<br />Indisponível</span><span></span></p></div></li>
<li><div class="foto"><a href="#"><img src="http://www.jcimoveisbrasil.com/img_imoveis/indisponivel_site.jpg" width="138" height="104" alt="JC" /></a><p><br /><span style=" font-family:">Imóvel<br />Indisponível</span><span></span></p></div></li>
<li><div class="foto"><a href="#"><img src="http://www.jcimoveisbrasil.com/img_imoveis/indisponivel_site.jpg" width="138" height="104" alt="JC" /></a><p><br /><span style=" font-family:">Imóvel<br />Indisponível</span><span></span></p></div></li>
</ul>
</div>
<br /><br />
<div class="footer">
</div>
<!-- end -->
</body>
</html>
Para vcs entenderem melhor o problema irei deixar o link do script abaixo e quem tiver o navegador I.E 8 é só visualizar no modo de compatibilidade para vcs verem o problema : desde já agradeço.
Carregando comentários...