Ir para conteúdo

POWERED BY:

Arquivado

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

Vongola

Bug do css com IE e Firefox

Por , em Desenvolvimento frontend

Recommended Posts

Vongola    0

Vongola
Postado

Olá amigos tudo bem? Este é o meu primeiro post e peço desculpas por não saber utilizar as ferramentas corretamente. O meu problema é o seguinte: sou iniciante nesta área de web e achei muito interessante o .css. Como iniciante estou fazendo um site para mim e para minha namorada para divulgarmos alguns produtos relacionados a arte digital (disto ela entende). Logo resolvi criar um Drop Down Menu no CSS. Após algumas tentativas furadas consegui, mas notei que há um incomodo: por teste coloquei sombra nas letras do menu. No IE8 não aparece o sombreado mas nos outros navegadores sim. Até aí tudo bem. Mas a tabela aparece normalmente no IE8 (horizontal sem problemas), mas no Firefox assim como no Safari, apesar das sombras das letras estarem OK, a tabela horizontal está na vertical! Alguém poderia me explicar o que acontece?

 

HTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>F&P</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<table align="center">
		<tr>
		<td>
		<div id="wrapper">
			<div id="navMenu">
				<ul>
					<li><a href="#">Home</a>
   						<ul>
       						<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
						</ul> <!-- fim do UL interno -->
					</li> <!-- fim do LI -->        
				</ul> <!-- fim do UL -->
				<ul>
					<li><a href="#">Serviços</a>
   						<ul>
       						<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
						</ul> <!-- fim do UL interno -->
					</li> <!-- fim do LI -->        
				</ul> <!-- fim do UL -->                                        
				<ul>
					<li><a href="#">Portifólio</a>
   						<ul>
       						<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
						</ul> <!-- fim do UL interno -->
					</li> <!-- fim do LI -->        
				</ul> <!-- fim do UL -->
				<ul>
					<li><a href="#">Sobre Nós</a>
   						<ul>
       						<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
						</ul> <!-- fim do UL interno -->
					</li> <!-- fim do LI -->        
				</ul> <!-- fim do UL -->
				<ul>
					<li><a href="#">Contato</a>
   						<ul>
       						<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
							<li><a href="#">Link Do Trem</a></li>
						</ul> <!-- fim do UL interno -->
					</li> <!-- fim do LI -->        
				</ul> <!-- fim do UL -->
				<br class="clearFloat" />                                                       
			</div>
		</div>
		</td>
		</tr>
	</table>

</body>
</html>

 

 CSS
@charset "utf-8";

body {
text-align:center;
margin:0 auto;
padding:0;
}

#navMenu {
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}

#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;	
height:45px;
width:150px;
display: block;
color:#fff;
border:1px solid #fff;
text-shadow:1px 1px 1px #000;
}


#navMenu ul ul {
position:absolute;
visibility: hidden;
top:46px;
}

#navMenu ul li:hover ul {
visibility:visible;
}

/****************************************************************/

#navMenu li:hover {
background:#09f;
}

#navMenu ul li:hover ul li a:hover {
background:#ccc;
color:#000;
}

#navMenu a:hover {
color:#000;
}

.clearFloat {
clear:both;
margin:0;
padding:0;
}

 

Alguém poderia me explicar o que está de errado? Desde já obrigado e novamente desculpe qualquer coisa.

 

 

PS: quebrei a cabeça e resolvi um dos problemas que era do menu não aparecer na horizontal no firefox... era só ter colocado um tamanho width 780px..rsrs.. mas gostaria de saber o pq os efeitos nas cores como sombra não aparecem no IE 8. Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Müller    0

Guilherme Müller
Postado

Olá Vongola,

 

Primeiramente, eu sugiro que você retire o elemento <table> da página, pois ele não está servindo propósito algum. Caso você queira fixar a largura da página e centralizá-la, basta o seguinte código:

#wrapper {
 width: 780px; /* exemplo de largura */
 margin: 0 auto;
}

 

Com isso a página já fica centralizada na tela.

 

Quanto às sombras, se você está utilizando a propriedade css text-shadow, ela não funciona no Internet Explorer mesmo. Mas não tem problema, pois os navegadores tem suportes a propriedades diferentes e você pode usá-las mesmo se só alguns navegadores as suportam.

 

Se você tiver um link para a página publicada, ajuda para verificar o que pode estar acontecendo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vongola    0

Vongola
Postado

olá amigo, obrigado por responder. Vou tentar deixar online para mostrar o erro. A table que coloquei centralizou ele de modo que qualquer resolução de monitor, mostrará ele centralizado. Se eu por um tamanha fixo, pra mim ele ficará bom, mas e se alguém entrar no meu site com um monitor de resolução diferente. Creio eu que irá zoar. Mas vou tentar ver aqui como fica. Agora o bug que está ocorrendo, é que todas as letras tem sombra e parecem vivas, bem definidas, mas no mozila firefox e no safari. No IE o sombreamento das letras não aparecem. Então gostaria de saber se há códigos que desbugue visualização no IE. Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Müller    0

Guilherme Müller
Postado

Então, conforme eu havia dito, não aparecer a sombra no IE não é uma bug, o Internet Explorer não suporta a propriedade text-shadow. Caso você queira mesmo simular o funcionamento desta propriedade no IE, sugiro que busque scripts que façam isso. Talvez tenha também como utilizar um filter proprietário da Microsoft, mas não recomendo.

 

Sobre o CSS que passei, a largura não precisa ser em pixels. Pode ser em "em", em "%" ou em outra unidade que preferir.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito