Css não roda no IE9
Boa noite a todos!
Sou novata e estava criando um site em html5(ou tentiva dele rs) e me deparei com um problema, o site roda normalmente em minha maquina tanto no Chrome como no Firefox e no Ie9 (windows7) mas quando coloco no ar antes só funcionava certinho no Chrome consegui resolver no Firefox, e no Ie9 não fica certo de jeito nenhum.
Será que alguem pode me ajudar? não sei o que fiz de errado, tentei ajustar no Dreamweaver mas ele me confunde muito mais do que fazendo os codigos sem ele....
o endereço dele no ar é www.unicaidentidade.com.br
e ai segue o codigo fonte dele e do Css...
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="iso-8859-1">
<link rel=stylesheet href="default.css" type="text/css" media="all"/>
<script language="JavaScript" src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="index.js" type="text/javascript"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<title></title>
</head>
<body>
<header class="cabecalho">
<p>
<img src="imagens/logo.png" id="logo">
<hr id="divtop"/>
</header>
<div id="corpo">
<nav>
<ul id="menu" class="menu">
<li><a href="#" id="_1"><img src="imagens/art.png" title="Arte"/></a></li>
<li><a href="#" id="_2"><img src="imagens/port.png" title="Portfolio"/></a></li>
<li><a href="#" id="_3"><img src="imagens/serv.png" title="Hospedagem"/></a></li>
<li><a href="#" id="_4"><img src="imagens/cont.png" title="Fale conosco"/></a></li>
</ul>
</nav>
<div id="conteudo">
<div id="conteudo_main">
<section id="opc_0">
<header>
<h1 class="opc">Sejam Bem Vindos!</h1>
</header>
<article>
<p class="opcp">Muitas empresas necessitam inovar, melhorar a comunicação com seus clientes, e diminuir as suas fronteiras com o mundo. </p><br/>
Com essa percepção particular, a UNICAIDENTIDADE.COM.BR existe para fornecer soluções para a sua comunicação empresarial, facilitando
o diálogo com seus diversos públicos, além de concretizar as suas idéias no mundo digital.
<h3 class="opch3">Deixe sua empresa ou evento aparecer com a gente e ganhe clientes!!</h3>
<ul>
</ul>
</article>
</section>
<section id="opc_1" style="display: none;">
<header>
<h1 class="opc">Arte</h1>
</header>
<article>
<p class="opcp">Faça conosco a “arte” das suas ferramentas de comunicação:</br>
<br/>
- Material de escritório (envelopes, papéis, cartão de visita, etc);</br>
- Banners eletrônicos e impressos;<br/>
- Sites e blogs;<br/>
- Logomarcas;<br/>
- Brindes;<br/>
- Hospedagem de dominios e contas de email.<br/>
</p>
<h5 class="opch5"> Obs: Para os serviços que envolvem "layouts", ressaltamos que o nosso trabalho é simplesmente artístico e cobramos apenas por ele. A confecção e valores dos objetos e/ou materiais são cobrados à parte, conforme negociação com fornecedor.</h5>
</article>
</section>
<section id="opc_2" style="display: none;">
<header>
<h1 class="opc6">Portfolio</h1>
</header>
<article>
<p class="opcp"><table cellspacing="4" cellpadding="0" align="center">
<tr>
<td class="style1" colspan="8" style="height: 200px">
<img src="imagens/logo.png" width="200" height="200" name="ft" /></td>
</tr>
<tr>
<td class="style1">
<img src="imagens/layout.png" width="100" height="100" onmouseover="document.ft.src='imagens/layout.png'" /></td>
<td class="style1">
<img src="imagens/tabajara.jpg" width="100" height="100" onmouseover="document.ft.src='imagens/tabajara.jpg'"/></td>
<td class="style1">-<img src="imagens/lider.jpg" width="100" height="100" onmouseover="document.ft.src='imagens/lider.jpg'"/></td>
<td class="style1">
<img src="imagens/templatem.jpg" width="100" height="100" onmouseover="document.ft.src='imagens/templatem.jpg'" /></td>
<td class="style1">
<img src="imagens/banner.png" width="100" height="100" onmouseover="document.ft.src='imagens/banner.png'" /></td>
<td class="style1">
<img src="imagens/geneses.png" width="100" height="100" onmouseover="document.ft.src='imagens/geneses.png'"/></td>
</tr>
</table>
</p>
</article>
</section>
<section id="opc_3" style="display: none;">
<header>
<h1 class="opc">Hospedagem Web</h1>
</header>
<article>
<p>Fazemos toda a assessoria quanto ao registro do dominio e controle de emails.<br/>
<br/>
Registro de dominio: apenas R$45,00<br/>
<br/>
Hospedagem de domínio: apenas R$ 24,90 na ativação (primeiro mês) e R$ 14,90 nos demais meses.<br/>
<br/>
Hospedagem + Registro de domínio: apenas R$ 65,00<br/>
</p>
<h4 class="opch4">Contrate um pacote conosco e tenha sua identidade na internet ! </h4>
</article>
</section>
<section id="opc_4" style="display: none;">
<header>
<h1 class="opc">Contato</h1>
</header>
<article>
<form name="form1" method="post" action="envia.php">
<p>Nome:
<input type="text" size="40" maxlength="10" name="nome" id="nome" class="contat">
</p>
<p>Email:
<input type="text" size="20" maxlength="10" name="email" id="email" class="contat">
</p>
<p>Assunto:
<input type="text" size="10" maxlength="10" name="Assunto" id="Assunto" class="contat">
</p>
<p>Mensagem:</p>
<textarea cols="60" rows=05" name="Mensagem" id="Mensagem"class="contat"></textarea>
</p>
<input type="submit" value="Enviar"class="bt">
<input type="reset" value="Limpar" class="bt">
</p>
</form>
</article>
</section>
</div>
</div>
<hr id="sepcarr"/>
<div id="carrossel">
<div id="outerContainer">
<div id="imageScroller">
<div id="viewer" class="js-disabled">
<a class="wrapper" href="http://www.oficinatabajara.com.br" title="Tabajara"><img class="logo" id="taba" src="imagens/tabajara.jpg" width="200" alt="Tabajara"></a>
<a class="wrapper" href="http://lidersystem.com.br" title="lider"><img class="logo" id="lider" src="imagens/lider.jpg" width="200" alt="lider" ></a>
<a class="wrapper" href="http://jquery.com" title="jQuery"><img class="logo" id="jquery" src="logos/jquery.jpg" alt="jQuery"></a>
<a class="wrapper" href="http://twitter.com" title="Twitter"><img class="logo" id="twitter" src="logos/twitter.jpg" alt="Twitter"></a>
<a class="wrapper" href="http://jqueryui.com" title="jQuery UI"><img class="logo" id="jqueryui" src="logos/jqueryui.jpg" alt="jQuery UI"></a>
</div>
</div>
</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
//remove js-disabled class
$("#viewer").removeClass("js-disabled");
//create new container for images
$("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");
//add images to container
$(".wrapper").each(function() {
$(this).appendTo("div#container");
});
//work out duration of anim based on number of images (1 second for each image)
var duration = $(".wrapper").length * 3500;
//store speed for later (distance / time)
var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
//set direction
var direction = "rtl";
//set initial position and class based on direction
(direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
//animator function
var animator = function(el, time, dir) {
//which direction to scroll
if(dir == "rtl") {
//add direction class
el.removeClass("ltr").addClass("rtl");
//animate the el
el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
//reset container position
$(this).css({ left:$("div#imageScroller").width(), right:"" });
//restart animation
animator($(this), duration, "rtl");
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
} else {
//add direction class
el.removeClass("rtl").addClass("ltr");
//animate the el
el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {
//reset container position
$(this).css({ left:0 - $("div#container").width() });
//restart animation
animator($(this), duration, "ltr");
//hide controls if visible
($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;
});
}
}
//start anim
animator($("div#container"), duration, direction);
//pause on mouseover
$("a.wrapper").live("mouseover", function() {
//stop anim
$("div#container").stop(true);
//show controls
($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
//variable to hold trigger element
var title = $(this).attr("title");
//add p if doesn't exist, update it if it does
($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
});
//restart on mouseout
$("a.wrapper").live("mouseout", function(e) {
//hide controls if not hovering on them
(e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out distance left to travel
var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, $("div#container").attr("class"));
});
//handler for ltr button
$("#ltr").live("click", function() {
//stop anim
$("div#container").stop(true);
//swap class names
$("div#container").removeClass("rtl").addClass("ltr");
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, "ltr");
});
//handler for rtl button
$("#rtl").live("click", function() {
//stop anim
$("div#container").stop(true);
//swap class names
$("div#container").removeClass("ltr").addClass("rtl");
//work out total travel distance
var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
//work out remaining distance
var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
//new duration is distance left / speed)
var newDuration = distanceLeft / speed;
//restart anim
animator($("div#container"), newDuration, "rtl");
});
});
</script>
<section id="car">
<aside>
<h2>Acesso Restrito</h2>
<form method="post" action="cpanel.php">
Email:<br/>
<input type="text" size="30" name="usuario"id="campotxt">
<br/>
Senha:<br/>
<input type="password" size="10" name="senha"id="campotxt">
<br/>
<input type="submit" value="Enviar"class="bt">
<input type="reset" value="Limpar" class="bt">
</form>
</aside>
</section>
</div>
<hr id="sepfooter"/>
<footer>
<img src="imagens/rodape.png">
</footer>
</div>
</body>
</html>*css
*{
margin:0px auto;
text-align:center;
padding:0px;
color:white;
font-family:Arial;
}body{
width:990px;
font-family:trebuchet ms;
height:950px;
}
#corpo{
height:550px;
background:silver;
background:url('imagens/fundo.png') no-repeat;
background-position:10px 100px;
}
.cabecalho{
height:140px;
}
#logo{
margin-right:730px;
}div#att {
background-color: #fffeb8;
border-bottom: 1px solid;
height: 2.5em;
line-height: 2.5em;
position: absolute;
top:0;
width: 100%;
}div#att p{
background: transparent url(../images/att.png) no-repeat 0 46%;
margin: 0;
display: inline;
padding: 6px 0 6px 26px;
}
#divtop{
width:970px;
border:solid #900;
z-index:1;
margin-top:-30px;
}fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {
text-align:left;
}q:before,q:after{content:'';}
.menu{
list-style:none;
margin:10px;
margin-top:93px;
margin-left:30px;
padding:0px;
padding-top:0px;
}.menu li{
padding-top:8px;
}a{
text-decoration:none;
}nav{
float:left;
padding-left:20px;
padding-right:20px;padding-top:05px
}
#conteudo{
width:900px;
height:450px;
}
#conteudo_main{
background:url('imagens/centro.png') no-repeat;
width:790px;
float:right;
height:430px;
padding-top:10px;
margin-top:120px;
margin-left:155px;
position:absolute;
}
.opc{
color:#900;
text-align:center;
margin-top:25px;
}
.opcp{
text-align:center;
margin-top:55px;
}
.opch3{
color: #900;
text-align:center;}
.opch4{
color: #900;
text-align:center;}
.opch5{
color: #900;
text-align:center;.opc6{
color: #900;
text-align:center;
}
.style1 {
text-align: center;
margin-top:10px
}footer{
float:left;
width:800px;
text-align:center;
height:150px;
font-size:13pt;
margin-left:80px;
color:white;
letter-spacing:1px;
}
#sepcarr {
border: medium solid #990000;
margin-left: 20px;
margin-top: 100px;
position: absolute;
width: 970px;
}
#carrossel {
float: left;
height: 169px;
margin-left: -150px;
margin-top: 100px;
position: relative;
width: 646px;
}aside {
background-color: #990000;
float: left;
height: 169px;
margin-left: 647px;
position: relative;
width: 314px;
}
.bt{
color:#900;
margin-top:22px;
background-color:white;
}
#campotxt{
color:#900;
}
#sepfooter {
border: medium solid #990000;
margin-left: 20px;
margin-top: 265px;
position: absolute;
width: 970px;
}footer img{
text-align:center;
}
.contat{
margin:05px 05px 05px 05px;
color:#900;
}/ js-disabled class - set image sizes so they all fit in the viewer /
.js-disabled img { width:100px;
height:100px;
display:block;
float:left;
margin:-50px;
}
#outerContainer {
width:642px;
height:169px;
margin-left:15px;
position:absolute;
}
#imageScroller {
width:622px;
height:169px;
position:relative;
float:left
}
#viewer {
width:632px;
height:149px;
overflow:hidden;
margin:auto;
position:relative;
top:10px;
bottom:10px;
}#imageScroller a:active, #imageScroller a:visited {
color:#000000;
}#imageScroller a img {
border:0;
}
#controls {
width:534px;
height:47px;
background:url(images/controlsBG.png) no-repeat;
position:absolute;
top:4px;
left:4px;
z-index:10;
}#controls a {
width:37px;
height:35px;
position:absolute;
top:3px;
}#controls a:active, #controls a:visited {
color:#0d0d0d;
}
#title { color:#ffffff;
font-family:arial;
font-size:100%;
font-weight:bold;
width:100%;
text-align:center;
margin-top:10px; }
#rtl {
background:url(images/rtl.png) no-repeat;
left:100px; }#rtl:hover {
background:url(images/rtl_over.png) no-repeat;
left:99px; }
#ltr {
background:url(images/ltr.png) no-repeat;
right:100px;
}#ltr:hover {
background:url(images/ltr_over.png) no-repeat;
}Agradeço muito a ajuda de vcs quem precisar e eu puder ajudar conte comigo
Camila
Discussão (2)
Carregando comentários...