Nao funfa no Firefox. alguem pode me dar uma luz!

[Mr Crowley 0]

e ai pessoal

o problema é o seguinte

1)

tenho esse codigo

 

 

<a href="teste.html"><div class="Link_off" onmouseover="this.className='Link_on'" onmouseout="this.className='Link_off'" onclick="">Conceitos</div></a>

qdo o mouse passa por cima ele seleciona um estilo e sai seleciona outro

porem nao funfa no Firefox.alguem sabe como posso resolver isso?

 

2)

tenho esse codigo

.Link_off, .Link_on  {	BORDER-RIGHT: 	#babad2 1px solid; 	BORDER-TOP: 	#babad2 1px solid; 	BORDER-LEFT: 	#babad2 1px solid; 	BORDER-BOTTOM: 	#babad2 1px solid; 	PADDING-LEFT: 	10px; 	PADDING-RIGHT: 	0px; 		PADDING-BOTTOM: 3px; 	PADDING-TOP: 	4px; 	MARGIN: 		0px 0px 3px 3px; 	HEIGHT: 		13px; 	WIDTH: 			165px; 	CURSOR: 		hand; 	BACKGROUND-COLOR: #c4d5e5; 	COLOR: 			#000000; 		TEXT-DECORATION: none}.Link_off {	FILTER: 		progid:DXImageTransform.Microsoft.gradient(startColorstr=#DFE8EF, endColorstr=#BACBD5); 	}.Link_on {	FILTER: 		progid:DXImageTransform.Microsoft.gradient(startColorstr=#FAFFFF, endColorstr=#C4E0F7); 	}

faz um efeito degrade no link

pore tb nao funfa no firefox e sei que é a seguinte linha

.Link_off {	FILTER: 		progid:DXImageTransform.Microsoft.gradient(startColorstr=#DFE8EF, endColorstr=#BACBD5); 	}.Link_on {	FILTER: 		progid:DXImageTransform.Microsoft.gradient(startColorstr=#FAFFFF, endColorstr=#C4E0F7); 	}

alguem tem a cura ou outro caminha pora o mesmo efeito nas 2 situações?

 

falow t+

[Santiago 0]

Posta seu link ai p/ mim ver

[Giovani 104]

Primeiro: leia o link que o rflky3 passou, seu código não tá sujo, tá imundo!!!

 

Segundo: nos próximos posts, tente ser mais objetivo nas suas perguntas!!!

 

[]'s

[Mr Crowley 0]

eu nao otimizei o codigo ainda, como ainda to montando layout e fico toda hora mudando uma coisa e outra e assim vai mais facil, mais valeu pelo link.entao nesse caso nao te jeitovou ter que fazer um rollover de imagens pra ter esse efeito?falow e obrigado

Primeira coisa, dá uma olhada neste link:http://www.imasters.com.br/artigo/3780/css...clando_seu_css/e está linha não funciona MESMO no FF, por ser um filter da Microsoft para o IEca!

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#DFE8EF, endColorstr=#BACBD5);

[]s

[Mr Crowley 0]

Cara, faça uma imagem com o degradê que você qr usar, depois recorte com um width:1px, no CSS coloque:

a.link { background:url(imagem.jpg) repeat-x }

a.link:hover { background:url(imagem2.jpg) repeat-x }

 

Com o repeat-x você dirá para a tal imagem repetir no eixo X, isto é, ele montará a imagem infinitamente uma do lado da outra!

 

Esqueça akeles:

[*]onmouseover="this.className='Link_on'"

[*]onmouseout="this.className='Link_off'"

Pois usando o que te passei acima te trará o mesmo resultado!

 

Usando somente:

<a href="#" class="link">Link</a>

 

Aprenda mais sobre CSS!

[]s

rflky3 so existe um problema em fazer isso

eu nao to mais usando LINK nas paginas

estao fiz dessa forma

<div id="Link" class="Link_off" onmouseover="document.getElementById('Link').className = 'Link_on';" onmouseout="document.getElementById('Link').className = 'Link_off';">LInklink</div>

e no CSS

body {	margin: 		0px 0px 0px 0px;}body,td,th {	font-size: 		10px;	font-family: 	Verdana, Arial, Helvetica, sans-serif;}.Escopo, .Cabecalho, .Rodape { 	width:775px;	background:#FFFFFF;}.Cabecalho, .Rodape{	height:50px;}.Posicao_Esq, .Posicao_Dir { 	width:185px;}.Posicao_Esq { 	float:left;}.Posicao_Dir { 	float:right;}.Posicao_Centro {	width:380px; 	margin-left:198px;}.Tabela {	padding: 10px 0px 12px 0px;	BORDER-TOP: 	#cacaca 3px solid; 	BORDER-BOTTOM: 	#cacaca 3px solid; 	BORDER-RIGHT: 	#e5e5e5 1px solid; 	BORDER-LEFT: 	#e5e5e5 1px solid; 	MARGIN: 		0px 0px 6px 0px; 	WIDTH: 			185px; 	BACKGROUND-COLOR: #f1f1f1}.Link_off, .Link_on  {	BORDER: 		#babad2 1px solid;	padding: 		4px 0px 3px 10px;	MARGIN: 		0px 0px 3px 3px; 	HEIGHT: 		13px; 	WIDTH: 			165px; 	BACKGROUND-COLOR: #c4d5e5; 	COLOR: 			#000000; 		TEXT-DECORATION: none}.Link_on {	background:url(imagem/link_on.jpg) repeat-X;}.Link_off {	background:url(imagem/link_off.jpg) repeat-X;}.Texto_Titulo {	font-size:		100%;	color: 			#A5A5A5;	font-weight: 	bold;}.Texto_Sub_Titulo {	font-size:		80%;	color: 			#A5A5A5;}.Texto_Normal {	font-size:		60%;	color: 			#000000;}

algum problema em fazer dessa forma?

 

valeu pelas dicas

t+

[giga_fire 0]

No DOM da Mozilla, para você mudar a classe de um node, você utiliza:

node.class = 'nome da classe'

 

Já no Internet Explorer é:

node.className = 'nome da classe'

 

Faça assim:

 

if (node.class) {   node.class = 'nome da classe'} else if (node.className ) {   node.className = 'nome da classe'}

Já os filtros são só pro IE mesmo. Para você ter o mesmo efeito no Firefox terá que fazer como o amigo disse aí.

[Santiago 0]

Cara, para que sua página esteja acessivel, você precisa usar links!

[Mr Crowley 0]

usando link eu teria o atualizare desse modo nao precisoos "links" apontam apenas para o conteudo, que qdo acionadoadicionam o texto ao siteé dessa forma que esta funcionadopor isso de eu nao estar usando os linkso problema que tive do link foi queuso o tamanho 165px para o linkmais o texto nao ocupa tudo isso, entao ele vai ate o final do textoe nao ate os 165pxpor esse motivo que optei pelo ajax montar o conteudo...falowe obrigado a todos

[giga_fire 0]

usando link eu teria o atualizare desse modo nao precisoos "links" apontam apenas para o conteudo, que qdo acionadoadicionam o texto ao siteé dessa forma que esta funcionadopor isso de eu nao estar usando os linkso problema que tive do link foi queuso o tamanho 165px para o linkmais o texto nao ocupa tudo isso, entao ele vai ate o final do textoe nao ate os 165pxpor esse motivo que optei pelo ajax montar o conteudo...falowe obrigado a todos

Se você está utilizando AJAX, que é uma linguagem padronizada, seu código também deveria seguir a mesma linha, aonde links são links (<a>), tabelas são tabelas, parágrafos são parágros e assim vai. O código deve seguir a semântica correta.O motivo do link não ficar com 165px é porque, por padrão, ele é mostrado como display:inline, ou seja, dentro de uma linha. Esse tipo de elemento não aceita algumas propriedades do CSS como width, height, margin, padding.Para deixá-lo com o tamanho que você quer, no CSS, coloque display: block. Daí, se quiser colocar outros links do lado (uma barra horizontal, por exemplo), coloque também float: left (ou right)Lembre-se que nem todo mundo tem navegadores que vão interpretar direito esses seus não-links

[Mr Crowley 0]

Se você está utilizando AJAX, que é uma linguagem padronizada, seu código também deveria seguir a mesma linha, aonde links são links (<a>), tabelas são tabelas, parágrafos são parágros e assim vai. O código deve seguir a semântica correta.O motivo do link não ficar com 165px é porque, por padrão, ele é mostrado como display:inline, ou seja, dentro de uma linha. Esse tipo de elemento não aceita algumas propriedades do CSS como width, height, margin, padding.Para deixá-lo com o tamanho que você quer, no CSS, coloque display: block. Daí, se quiser colocar outros links do lado (uma barra horizontal, por exemplo), coloque também float: left (ou right)Lembre-se que nem todo mundo tem navegadores que vão interpretar direito esses seus não-links

giga...dessa forma tem problemapagina

<a href="page.asp" class="Link_off" onmouseover="document.getElementById('Link1').className = 'Link_on';" onmouseout="document.getElementById('Link1').className = 'Link_off';" id="Link1">Linkteste</a>

css

.Link_off, .Link_on  {	BORDER: 		#babad2 1px solid;	padding: 		4px 0px 3px 10px;	MARGIN: 		0px 0px 3px 3px; 	HEIGHT: 		13px; 	WIDTH: 			165px; 	display:		block; 	BACKGROUND-COLOR: #c4d5e5; 	COLOR: 			#000000; 		TEXT-DECORATION: none}.Link_on {	background:url(imagem/link_on.jpg) repeat-X;}.Link_off {	background:url(imagem/link_off.jpg) repeat-X;}

e mais uma duvida agoraexiste um meio de eu testar minhas paginas para ver se estao de acordo com as normas?um site que avalie isso qdo você manda o arquivo ou indica um site?falow e obrigado novamente

[giga_fire 0]

Tem!

 

Já disse aqui mesmo nesse tópico que o 'className' só serve para o DOM do Internet Explorer. O equivalente para os outros navegadores é apenas 'class'.

 

Para ficar mais ainda dentro das normas e funcionar nos dois navegadores, você terá que tirar os dois eventos de dentro do código HTML e passar para um java script:

 

<script type="text/javascript">window.onload = function() {  // pega o link  _a = document.getElementById('id_do_link')  _a.onclick = function() {	 if (_a.className) {		 _a.className = ...	 } else if (_a.class) {		_a.class = ...	 }   }}</script>

Para validar seu XHTML, vá em http://validator.w3.org/

[Mr Crowley 0]

Tem!Já disse aqui mesmo nesse tópico que o 'className' só serve para o DOM do Internet Explorer. O equivalente para os outros navegadores é apenas 'class'.Para ficar mais ainda dentro das normas e funcionar nos dois navegadores, você terá que tirar os dois eventos de dentro do código HTML e passar para um java script:

<script type="text/javascript">window.onload = function() {  // pega o link  _a = document.getElementById('id_do_link')  _a.onclick = function() {	 if (_a.className) {		 _a.className = ...	 } else if (_a.class) {		_a.class = ...	 }   }}</script>

Para validar seu XHTML, vá em http://validator.w3.org/

valeu giga...irei fazer as mudancas e ver no que da...obrigadao pela ajudat+

[Hunter_ 0]

Li superficialmente o tópico, eheheh priguiça e ocupação aqui no trampo, mas... vou usar algumas coisas dita ao longo do tópico por alguns respeitáveis membros desse dileto fórum. Vamos lá:

 

Primeira coisa, dá uma olhada neste link:

http://www.imasters.com.br/artigo/3780/css...clando_seu_css/

 

[...]

 

[]s

Acho que para ele tá melhor esse link aqui ---> Maujor, começar do basicão e não depender de código gerado por editores http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

 

Cara, faça uma imagem com o degradê que você qr usar, depois recorte com um width:1px, no CSS coloque:

a.link { background:url(imagem.jpg) repeat-x }

a.link:hover { background:url(imagem2.jpg) repeat-x }

 

Com o repeat-x você dirá para a tal imagem repetir no eixo X, isto é, ele montará a imagem infinitamente uma do lado da outra!

 

Esqueça akeles:

[*]onmouseover="this.className='Link_on'"

[*]onmouseout="this.className='Link_off'"

Pois usando o que te passei acima te trará o mesmo resultado!

 

Usando somente:

<a href="#" class="link">Link</a>

 

Aprenda mais sobre CSS!

[]s

Para que fazer com duas imagens se você pode fazer somente com uma?

a.link,a.link:hover { background: url(imagem.jpg) repeat-x }a.link{ background: url(imagen.jpg) 70% 30%}a.link:hover { background: url(imagen.jpg) 50% 20%}

Faz com link que tu não vai ter de fazer gambiarras,

eu não vejo por que não utilizar links <a href>

 

[]s

Corretíssimo e a experiência do usuário? ahn?? se o nego n tem JS habilitado? se for dentro de uma aplicação web, ainda va lá...

 

Cara, para que sua página esteja acessivel, você precisa usar links!

Acessibilidade é lembrada por poucos e bem aplicada por um número menor ainda. Nego pensa assim:

Pra que facilitar se pode COMPLICAR?

Só para fechar KISS!!!

 

[]´s para todos, desculpem o post longo http://forum.imasters.com.br/public/style_emoticons/default/devil.gif

[Mr Crowley 0]

bem acho que agora o problema do link se resolve...rs.

 

código CSS

a {	BORDER: 		#babad2 1px solid;	padding: 		4px 0px 3px 10px;	MARGIN: 		0px 0px 3px 3px; 	HEIGHT: 		13px; 	WIDTH: 			165px; 	display:		block; 	BACKGROUND-COLOR: #c4d5e5; 	COLOR: 			#000000; 		text-decoration: none;	background:url(imagem/link_off.jpg) repeat-X;}a:hover {	background:url(imagem/link_on.jpg) repeat-X;}

codigo HTML

<a href="page.asp">Linkteste</a>

algum problema agora?

mais alguma dica?

 

GIGA

usei o seu codigo, porem ele ta me retornando um erro

eu que fiz caquinha ou é "normal" esse erro, pq o IE nao reconhece o codigo "class"

tem cura?

 

<script language="javascript">function MudaEstilo(EstiloID){  var a = document.getElementById(EstiloID);	 if (a.className) {		alert(a.className);	 } else if (a.class) {		  alert(a.class);	 }}</script>

Hunter value pelo link...

esse site eu nao conhecia...

e sobre

 

"Corretíssimo e a experiência do usuário? ahn?? se o nego n tem JS habilitado? se for dentro de uma aplicação web, ainda va lá..."

 

é uma aplicacao sim...e se o cara nao tiver o JS abilitado..ele nem deve entrar...

pra forcar menos a aplicacao e tudo mais...

valida oq for possivel no JS antes de ser validado no ASP, e por ultimo no SQL

 

--mais uma duvida--

eu queria passar o conteudo so para o uma DIV via AJAX como vcs podem ter visto

AjaxURL('inicio.asp','POST',false,'CampoID')

qual o problema nisso?

como fazer isso da forma correta?

 

 

 

obrigado novamente

t+