Problema em Internet Explorer + CSS

chantas

chantas

Power Member
Boas!

Estou a fazer um site no entanto tenho um pequeno conflito para resolver entre o CSS e o IE >(

Em 1ºlugar abram este site: http://pwp.netcabo.pt/chantas/

Como podem reparar no Firefox tudo funciona às mil maravilhas...mas no IE o header está todo atrofiado....já estou farto de procurar soluções e até agora nada! O mais engraçado é que se puser o CSS dentro do HTML o IE já apresenta bem a página!!! >( >( >(

Alguem que me ajude pff :(

Já agora deixo aqui o link para o CSS http://pwp.netcabo.pt/chantas/estilo.css

Já me estou a passar com este bug do IE...
 
Para facilitar um bocado ponho aqui o codigo HTML e CSS

HTML

Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titulo</title>

<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

<body>  

<div id="header">
<ul id="menu">
<li id="empresa"><a href="empresa.html">A Empresa</a></li>
<li id="produtos"><a href="#">Produtos</a></li>

<li id="servicos"><a href="#">Servicos</a></li>
<li id="contactos"><a href="#">Contactos</a></li>
</ul>

</div>
<div id="corpo">
<div id="texto">
  <div align="justify" class="style1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque fringilla, erat eget porttitor blandit, elit augue tempus libero, et luctus metus leo nec eros. Integer at quam. Vestibulum mattis, dui sit amet commodo consequat, massa metus ultrices ligula, id cursus dolor risus non risus. Cras nec justo non erat laoreet blandit. Aliquam sit amet ante. Duis vestibulum tempor purus. Aliquam pulvinar. Vivamus blandit. Phasellus iaculis eros vulputate elit. Morbi non magna sit amet mi imperdiet iaculis. Proin tristique nulla nec est. Cras id ipsum non est porttitor fermentum. Cras vitae risus sed ipsum blandit dictum. Nullam sollicitudin augue ornare tortor. Nullam ac felis.
    
    Aenean consectetuer mauris sit amet nunc. Nulla fringilla nibh egestas augue posuere euismod. Ut justo. Quisque vel libero. Mauris vulputate molestie metus. Curabitur tortor orci, pharetra eget, adipiscing ut, ultricies vitae, lorem. Donec ultricies. Fusce commodo ipsum nec ante. Nulla tempus neque non massa. Curabitur ut metus.
    
    Sed tempor ligula quis neque. Nulla iaculis pede vitae magna. Cras porttitor dolor sed felis. Duis id ante. Nam eget magna. Morbi elit est, lacinia faucibus, fermentum eget, laoreet non, nibh. Proin et neque non elit aliquam laoreet. Nulla eget nibh eget nunc sollicitudin blandit. Nulla egestas magna sed metus. Integer faucibus elit et quam. Suspendisse ipsum sem, semper vitae, bibendum non, placerat vitae, nibh. Curabitur malesuada vehicula dolor.  </div>
</div>
</div>
<div id="footer">
</div>
</body>

</html>


CSS

Código: 
body {
	background:#E3E3E3;
	}
	
#corpo { /*Retirei a altura para que o corpo pudesse adptar ao conteudo*/
	background:#E3E3E3 url(imagens/corpo.gif) 50% 50% repeat-y;
	width:704px;
	margin:0 auto;
	}
	
#texto {
	padding: 30px  30px;

	}
	
#header {
	background:#E3E3E3 url(imagens/header2.gif) 50% 50% repeat-y;
	width:704px;
	height:123px;
	margin:0 auto;
	margin-top:30px;
	
	}


	
#footer {
	background:#E3E3E3 url(imagens/footer.gif) 50% 50% repeat-y;
	width:704px;
	height:41px;
	margin:0 auto;
	margin-top:0px;
	}
	
ul#menu {
	list-style-type: none;
	position: relative;
	width: 452px;
	height: 22px;
	top: 87px;
	left: 250px;
	margin: 0;
	padding: 0;
	}
	
ul#menu a {
	display: block;   /*Código para a região se tornar 100% clickable*/
	text-indent: -9999px; /*código para que o texto dos menus despareça*/
	text-decoration: none;
	overflow:hidden;
	}
	
li#empresa {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 88px;
	height: 22px;
	background: url(imagens/botoes.gif) no-repeat 0 0;
	}

li#produtos {
	position: absolute;
	top: 0px;
	left: 101px;
	width: 85px;
	height: 22px;
	background: url(imagens/botoes.gif) no-repeat -113px 0;
	}
	
li#servicos {
	position: absolute;
	top: 0px;
	left: 195px;
	width: 85px;
	height: 22px;
	background: url(imagens/botoes.gif) no-repeat -230px 0;
	}
	
li#contactos {
	position: absolute;
	top: 0px;
	left: 303px;
	width: 95px;
	height: 22px;
	background: url(imagens/botoes.gif) no-repeat -350px 0;
	}
/*Códigos para rollovers*/	
li#empresa a:hover { background: url(imagens/botoes.gif) no-repeat 0 -22px; }
li#produtos a:hover { background: url(imagens/botoes.gif) no-repeat -113px -22px; }
li#servicos a:hover { background: url(imagens/botoes.gif) no-repeat -230px -22px; }
li#contactos a:hover { background: url(imagens/botoes.gif) no-repeat -350px -22px; }
li .select { background: url(imagens/botoes.gif) no-repeat 0 -22px; }

Help :(
 
já tive um problema desse género há algum tempo mas não me lembro exactamente como aparecia no IE, mas vim a descrobrir depois que tinha algo a ver com comentarios que tinha feito no CSS... tambem não me lembro como estava a fazer, mas se estás assim tao desesperado nao perdes nada em copiar o file e alterares no original para ver se da... se nao der ficas com a copia
 
Pois...mas o estranho disto tudo é q se exactamente o mesmo código CSS tiver dentro do HTML funciona às 1000 maravilhas!Se puser o css num file externo (estilo.css por exemplo) o IE apresenta o header todo maluco :(

Mas vou tentar verificar isso dos comentários e logo digo!
 
OldMan disse:
já tive um problema desse género há algum tempo mas não me lembro exactamente como aparecia no IE, mas vim a descrobrir depois que tinha algo a ver com comentarios que tinha feito no CSS... tambem não me lembro como estava a fazer, mas se estás assim tao desesperado nao perdes nada em copiar o file e alterares no original para ver se da... se nao der ficas com a copia
Clicar para expandir...

Por mais estupido que seja....resultou! :-D :-D :-D :-D
Mas que bug manhoso!

Obrigadão pela dica!
 
chantas disse:
Por mais estupido que seja....resultou! :-D :-D :-D :-D
Mas que bug manhoso!
Clicar para expandir...
Isso acontece por que fazes os comentários sem dar espaço entre o que comentas e os códigos que identificam o inicio e o fim do comentário.

Escreves:
/*código para que o texto dos menus despareça*/

Experimenta:
/* código para que o texto dos menus despareça */

Se experimentares a tua CSS como postaste acima com esses problemas corrigidos, tudo funciona bem. O browser percebe de forma inequívoca o que é o comentário e ignora-o. Não precisas deitar fora os comentários.
 
ZoomBang disse:
Isso acontece por que fazes os comentários sem dar espaço entre o que comentas e os códigos que identificam o inicio e o fim do comentário.

Escreves:
/*código para que o texto dos menus despareça*/

Experimenta:
/* código para que o texto dos menus despareça */

Se experimentares a tua CSS como postaste acima com esses problemas corrigidos, tudo funciona bem. O browser percebe de forma inequívoca o que é o comentário e ignora-o. Não precisas deitar fora os comentários.
Clicar para expandir...

Ok!Muito obrogado a todos!
 
Inicie sessão ou registe-se para poder participar.
Back
Topo