Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Jeovane Carvalho

Carroussel Responsivo não alinha no ie.7

Recommended Posts

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
}
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {
    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) 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) no-repeat
}

#flexiselDemo2 p {
    margin-top:-2px;
    line-height:21px;
    ;
    text-align:center;
    display:block;
    font-size:15px;
    font-weight:bold;
    color:#e94b16;
}
#flexiselDemo2 p span {
    color:#039;
    line-height:20px;
    display:block;
    font-weight:normal;
    font-size:12px;
    color:#000
}
#flexiselDemo3 p {
    margin-top:-2px;
    line-height:21px;
    ;
    text-align:center;
    display:block;
    font-size:15px;
    font-weight:bold;
    color:#e94b16
}
#flexiselDemo3 p span {
    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"> 
/* contents of a small JavaScript file */
var repeat=1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return}
setTimeout("titlemove()",230)}
if (document.title)
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">
/* contents of a small JavaScript file */
$(function() {
// grab the initial top offset of the navigation 
var sticky_offset_top = $('#sticky').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_offset_top) { 
$('#sticky').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky').css({ 'position': 'relative' }); 
}   
};
// run our function on load
sticky();
// and run it again every time you scroll
$(window).scroll(function() {
sticky();
});
// NOT required:
// for this demo disable all links that point to "#"
$('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">
//use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){ 
$("#preloader").hide();
$("#content").show();
});
</script>
<style type="text/css">
.noscript { display: none; }.style {
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript">
/* contents of a small JavaScript file */
function validarform(formulario){
if(formulario.negocio_.value == ''){
alert("O campo Negócio é obrigatório.");
formulario.negocio_.focus()
return false;
}
if(formulario.ct_tipo_ .value == ''){
alert("O campo Tipo é obrigatório.");
formulario.ct_tipo_ .focus()
return false;
}
if(formulario.cidade_ .value == ''){
alert("O campo Cidade é obrigatório.");
formulario.cidade_ .focus()
return false;
}
if(formulario.bairro_.value == ''){
alert("O campo Bairro é obrigatório.");
formulario.bairro_.focus()
return false;
}
return true;
}
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="preloader">
<div id="status">
<div class="carrega" align="center">
Carregando...
</div>
</div>
</div>
<div class="container">
<div class="header">

<div class="logo_celular"></div>
<div class="topo">
<!--[if !IE]> -->
<!-- <![endif]-->
<object type="application/x-shockwave-flash"
data="http://www.jcimoveisbrasil.com/swf/jc021.swf" width="980" height="222">
<param name="movie" value="http://www.jcimoveisbrasil.com/swf/jc021.swf" />
<param name="wmode" value= "transparent" />
<param name="quality" value="high" />
</object>
<!-- <![endif]-->
<br />
</div>
</div>
<div class="menu">

<div class="default">
<div id="sticky">
<ul id="navigate">
<li id="selected"><a href="http://localhost/html5/inicio">Home</a></li>
<li><a href="http://localhost/html5/empresa">Empresa</a></li>
<li><a href="http://localhost/html5/cadastre-seu-imovel">Cadastre seu Imóvel</a></li>
<li><a href="http://localhost/html5/servicos">Serviços</a></li>
<li><a href="http://localhost/html5/pedido-de-imovel">Faça aqui seu pedido</a></li>
<li><a href="http://localhost/html5/busca-de-imoveis">Imóveis</a></li>
<li><a href="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">
<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">
<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">
<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">
<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">
<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"><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">
<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.

 

http://www.jcimoveisbrasil.com/html5/responsive.php

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acho que não hein amigo 47% dos internautas por uma fonte que vi no google ainda usam o i.e 7, e esse seria o meu problema. Mas me responda uma coisa o meu medo é que se muitas pessoas acessarem o site e perceberem este problema tenho o receio de perder credibilidade para os clientes deste site tratando do I.E7, na verdade todos nós sabemos que para atrair clientes no setor digital como um site por exemplo,precisa ter uma fachada bonita, um site leve, dinâmico e que traga informações precisas ao usuário, e o importante é ele não se perca em seu conteúdo, tento criar sites com códigos enxutos validos no W3C e no PageSpeed Insight ...

 

Acho que o meu maior defeito é que sou PERFECCIONISTA, pois queria meu site 100% validado no page speed insight, e que funcionasse 100% em todos os navegadores passo noites programando em php e tratando meu código html para torna-lo leve e eficaz, e sei que isso é impossível ter um site html5 validado em qualquer site de testes e funcional em todos os navegadores, mas se não conseguir corrigir este erro irei tentar configurar outro carroussel... e obrigado pela resposta.

Compartilhar este post


Link para o post
Compartilhar em outros sites

IE 7? Sério?

Hoje em dia qualquer computador vem com o IE 9 pra cima..

 

Chega um determinado momento que a pessoa É OBRIGADA a seguir a evolução tecnológica.. e isso inclui as versões recentes dos navegadores. É falta de vergonha a pessoa ainda usar IE 7... e se eu fosse você, não me preocuparia em fazer funcionar 100% nessa versão..

Compartilhar este post


Link para o post
Compartilhar em outros sites

rikaschmitt , WictorP

Obrigado pela resposta bem acho que na verdade eu estou exigindo demais de mim mesmo, acho que hj no mínimo que a pessoa deve ter é um XP com o I.E8 rodando se for a partir daí beleza, eu sou meio chato , gosto de tudo certinho, tudo funcionando em seus devidos lugares, e o meu problema neste site que estou desenvolvendo em HTML5 e CSS3 é só o carroussel por ser responsivo e se encaixar nos dispositivos móveis, mas acho que eu tenho que mudar a minha visão e me preocupar com novas tecnologias e se preocupar com as pessoas que irão acessar o meu site por um celular ou tablet, tanto é que tive outra ideia e coloque um java no site avisando ao usuário que o seu navegador esta desatualizado, acho que isso já ajuda , eu vi uma campanha aqui no imasters para os desenvolvedores e designers a usarem essa lógica vejam

 

http://www.jcimoveisbrasil.com/html5/responsive.php, se você ativar o modo de compatibilidade para i.e 7 ele irá mostrar a msg no topo, melhor assim eu acho.

Compartilhar este post


Link para o post
Compartilhar em outros sites

IE7, eu ouvi IE7 ?

 

Acho que me enganei né?

 

:no:

Compartilhar este post


Link para o post
Compartilhar em outros sites

KKKKKKKK, verdade acho que quem usa IE 7 e entrar no site e achar que esta com problemas na verdade é ele que esta com problema de não atualizar o navegador, mas seria só este o meu problema porque a partir do I.E 8 meu site roda redondinho e sem ficar desalinhado na sua estrutura... Mas valew Eletronic , e você em outro topico que abri sobre o Layout e até você disse que meu site esta bagunçado e não era responsivo , pois já corrigi e fiz nesta nova versão acima, e sendo responsivo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Isso mesmo Jeovane, o melhor e você sempre usar Versões atualizadas, até meso por questões de Segurança.

 

Apenas a Título de pesquisa, veja essas informações abaixo:

 

http://www.uxdesign.blog.br/padroes-web/css3/html5-css3-suporte-dos-navegadores-e-tecnicas-de-compatibilidade/

 

No link acima tem um "IE7.js" que talvez possa contornar para sua necessidade.

 

 

IE7.js “Uma biblioteca JavaScript para fazer o Internet Explorer se comportar como um navegador compatível com os padrões”.

 

 

http://html5readiness.com/

 

 

vlw

Compartilhar este post


Link para o post
Compartilhar em outros sites

O wilnet vlw parceiro pela resposta vou testar aqui pra ver o que acontece , mas se não funcionar , já resolvi com um plugin para o usuário atualizar seu navegador, abraços.

 


Então testei aqui, o link do js para ie7 que funcionaria como uma condicional para navegadores antigos mas não surgiu efeito, o carroussel continua do mesmo jeito fora do layout. Parece que o problema esta no CSS quando retiro o width:99999px ele fica no layout porem um debaixo do outro, aí fica uma bagunça...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Jeovane,

 

 

Caso você opte por usar a biblioteca IE8.js, os navegadores como o IE5, IE6 e IE7 ficarão compatíveis com o IE8, e dessa forma você não precisará usar também o IE7.js.

 

Bem, no nosso caso, vou recomendar a você que utilize a biblioteca IE9.js, que fará com que os navegadores IE6, IE7 e IE8 sejam compatíveis com a sua versão posterior, suportando muitas marcações de HTML5 e propriedades de CSS3.

 

 

Mas ainda defendo a questão de uso das versões atuais.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ok Jeovane,

 

Se estiver Resolvido, pode marca-lo como tal então.

 

vlw

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.