Css não roda no IE9

Camila Assis · Julho 6, 2012

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;
margin-top:85px

}

.opch4{
  color: #900;
text-align:center;
margin-top:85px



}

.opch5{
  color: #900;
text-align:center;
margin-top:75px
}

.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

André do Vale · Julho 6, 2012

Chrome, ok;

IE9, ok;

IE8, ok;

IE7, quebrou.

Você precisa dele pra IE7 ou menor?

Camila Assis · Julho 11, 2012

obrigada por responder realmente funcionou....agora funciona antes de colocar no ar quando coloco no ar fica td confuso e fora...nao sei mais o que fazer!

Chrome, ok;

IE9, ok;

IE8, ok;

IE7, quebrou.

Você precisa dele pra IE7 ou menor?

na real preciso que seja funcional!

Entrar

Arquivado

Css não roda no IE9

Recommended Posts

Camila Assis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

Camila Assis 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante