6 replies to this topic

[brmaster]

Pessoal to com um probleminha e gostaria de pedir a ajuda de vocês.

To iniciando agora com css e nao entendo muito, mas no site que estou desenvolvendo
uso um menu que achei na net e o mesmo nao funciona corretamente no ie, ele funciona
numa boa no firefox, mas no ie ele fica vertival e nao horizontal.

Segue o codigo da pagina:

<ul id="topnav">
<li><a href="o-programa.asp">O Programa</a></li>
<li><a href="videos.asp">V&iacute;deos</a></li>
<li><a href="noticias.asp">Not&iacute;cias</a></li>
<li ><a href="#">Conselhos Empresariais</a></li>
<li><a href="promocao.asp">Promo&ccedil;&otilde;es</a></li>
<li><a href="fale-conosco.asp">Fale Conosco</a></li>
</ul>


e o css

ul#topnav {
margin: 0;
padding: 0;
font-size: 1.1em;
float: left;
list-style: none;
position: relative;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden; /*--Important - Masking out the hover state by default--*/
float: left;
height:40px;
font: 11px "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
color: #ffffff;
list-style: none;


}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the same properties since the <span> will be a duplicate of the <a> tag--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: #ffffff;
background: url(a_bg.gif) repeat-x;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
text-align: left;
}
ul#topnav a{ /*--This is basically the hover state of navigation--*/
color: #ffffff;
background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
background-position: left top;
}



Alguem pode me ajudar dizendo o que há de errado pra nao funcionar no ie?
vlw galera..
aguardo ajuda!

[DarkSign]

Simples, o IE não entende o pseudo-seletor ul#topnav

mas preciso saber em qual versão do IEca você está tentando rodar.

[brmaster]

Simples, o IE não entende o pseudo-seletor ul#topnav

mas preciso saber em qual versão do IEca você está tentando rodar.

o ie 6
vlw

[DarkSign]

exatamente. o IEca 6 não entende pseudo-seletores.

Esqueça ele e programe pra Firefox, IE7 pra cima

o IE 6 até já teve seu enterro merecido XD

[brmaster]

exatamente. o IEca 6 não entende pseudo-seletores.

Esqueça ele e programe pra Firefox, IE7 pra cima

o IE 6 até já teve seu enterro merecido XD

Como nao tenho ie7 aki no servico e eles nao me permitem baixar
acesse por favor www.visaoempreendedora.net e se der o erro em seu IE que com certeza nao é o 6
por favor me ajude a concerta-lo.

obrigado.
aguardo.

[Kahor]

Se voce tiver o IE8 e for acessar algum site, ao lado da barra de endereços tem um botao verde de compatibilidade, voce clicando 'transforma' se IE8 em IE7.

E como o Dark Sign falou, nao programe mais nada para IE6 é percade de tempo. Tanto que o IE9 já está sainda




Sobre os pseudoelementos, é o que voce escreveu depois do #

O ul é o elemento pai, e o pseudo é o #id que delemita aquela formatação para a ul#id

[Vielmond]

Não, não, calma gente, se tem bug aí, não é a seleção por id não!

Primeiro que ele pode perfeitamente utilizar ul#topnav no ie6 sem ter bugs. Isso é uma ID, e ele compreende. Uma pseudo-class seria p:first-letter por exemplo, que é selecionar somente a primeira letra de um texto em um <p>.
Maiores referências sobre o assunto: http://www.w3schools...udo_classes.asp

Se o #topnav após o ul fosse o problema, ele poderia simplesmente escrever #topnav. Dá na mesma. Ainda mais sendo uma id, e ids são únicas. ;]



Vamos à solução

Olha, este tutorial que você pegou não é muito bom. O código está estranho, e dá voltas desnecessárias, tá com uns <span> fantasmas no css, etc. Poderia colocar o link de onde o tirou para eu dar uma olhada e ter certeza do que você quer?


O problema: width:100% para o "ul#topnav a, ul#topnav span".
Ele entende que pode ocupar 100% do espaço disponível, e como não há nenhuma largura nos elementos pais, ele ocupa 100% da largura do body. Somente removendo isso funciona... MAS..


Se você quer fazer algo com um código melhorzinho, mantenha o mesmo código html, mas altere O CSS:

/* CSS reset - zerando todas essas propriedades, para que nada padrão de browser interfira - insira no início do seu arquivo CSS */

* {
	border:0;
	margin:0; padding:0;
	background:none;
}

ul {
	list-style-type:none;
}

a {
	text-decoration:none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
}

/* CSS reset end */

body {
	font-family:"Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
}


/* Menu CSS */

ul#topnav {
	height:40px; /* Altura desejada da navegação */
	float:left; /* flutuando para a esquerda */ 
	font-size: 1.1em;	
	font-weight:bold;
}

ul#topnav li{
	height:40px; /* Altura desejada da navegação */
	float:left; /* Necessário para fazer a navegação horizontal */
}

ul#topnav a {
	height:40px; /* Altura desejada da navegação */
	float:left; /* Esse é o truque, junto como o "display:block" */
	display:block;
	background:url(a_bg.gif) repeat-x; background-position:top left;
	padding:0 20px; /* espaço horizontal entre os elementos */
	line-height:40px; /* Necessário para centralizar verticalmente o texto - deve ser igual à altura */
        color:#fff; /* COR DO TEXTO AQUI */
}

ul#topnav a:hover {
	background-position:bottom left; /* Somente altero a posição do bg, e funcionará como mágica */
}

Um bom tutorial de navegação por imagens e CSS:
http://www.sohtanaka...ss-navigations/ - Todos os tutoriais dele são maravilhosos, dê uma olhada sempre que puder.


P.s.: Por favor, da próxima vez que postar trechos de códigos, utilize a tag [code=auto:0].

Edição feita por: Vielmond, 27/03/2010, 01:34.