Porque alguns CSS se comportam diferentes no IE e no FF ?

[Phantoxe 0]

Galera, apliquei efeitos SIMPLES em CSS em minhas DIVs, olhe o CSS abaixo:

 

border-top: 2px outset white;

 

Este efeito, dá um efeito 3D desenhando umna linha branca e uma linha cinza, que fica bem legal !!!

 

O problema é, não funciona no FIREFOX !!!

 

Olhe o link abaixo no IE, e depois olhem nbo FIREFOX !!!

 

http://www.megamidiagroup.com.br/ti/multimidia/

 

Inclusive, notem que o tamanho das linhas também dão diferenças, por estarem em navegadortes diferentes !!!

 

ODEIOOOOOOOO FIREFOX !!!

 

Alguém me ajuda ?

 

Abraços

 

Eduardo Burko

[void 1]

você tem q fazer css para um e css para outro hehehehenotei que você é usuário de IE, mas achei estranho q o script que você está usando funciona melhor no ff doq no ie para aparecer o sub menu, bom sobre pq é diferente é pq os browsers são diferentes e eles são diferentes pq pessoas diferentes desenvolvem eles, você pode usar seletores de css2 para fazer a css do ff pq o ie naum processa css2 hehe!!ai você consegue fazer uma css para um e outra para o outro no mesmo html sem ter q ficar fazendo nada dinamico!!obs.: naum sou moderador ou qualquer coisa parecida ja fiu moderador daki no forum de javascript mas isso é irrelevante só acho que o forum naum é lugar para coisas como "ODEIOOOOOOOO FIREFOX !!!" bizuu!!the void

[Phantoxe 0]

A não fique triste VOID !!!É que realmente a 1 ano que estou trabalho aqui na MEGAMIDIA, eu só me f*** com o FIREFOX !!! Nada contra, mas infelismente aqui na empresa, com excessão de eu, o resto tudo usa LINUX com FIREFOX !!! hahahahaMas beleza, eu entendi como funciona oi lance do CSS pra cada um !!! Depois é só fazer um JAVASCRIPT pra verificar qual browser é e pronto não é mesmo ?Beleza !!!VOID, agora precisava de outra ajuda sua !!!Aquele script que eu fiz ali pra aparecer o menu e o submenu, não tá funcionando legal !!!Preciso fazer um esquema igualzinho do IMASTERS !!!você tem algum exemplo em algum lugar que possa me indicar ???Tentei olhar no código do IMASTERS mas não consegui identificar.Valeu Eduardo Burko

[void 1]

seguinte para parecer igual ta ai

#navegacao {	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:10px;	margin-left:10px;	/*border-bottom: 2px inset white;*/	z-index:1;	float: left;		border-bottom: 1px solid #ffffff;	border-top: 1px solid #bebebe;	}#navegacao div {	/*border-top: 2px outset white;*/	border-bottom: 1px solid #bebebe;	border-top: 1px solid #ffffff;		padding-top:3px;	padding-bottom:3px;	padding-left:15px;	width:170px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/seta.gif) no-repeat 95% 50%;}

só com essas modificações ja ficam quase iguais agora é só você continuar!!sobre o script você pode olhar como funfa o do imasters!! mas o lance ta no tamanho do link pq o onmouseover ta nale você tem q fazer com q o link fique com a largura do menu! isso vai te ajudar!!the void

[Giovani 104]

Primeiro: sem palavrões!

 

Segundo, não precisa fazer dois arquivos css e verificar via JS qual navegador.

Aqui no fórum tem "n" posts falando das diferenças entre navegadores, basta dar uma pesquisada e você vai ver como resolver alguns problemas.

 

Em relação ao menu, basta estudar aquele link que te passei no outro post, e fazer as alterações no css dele conforme você quer.

 

[]´s http://forum.imasters.com.br/public/style_emoticons/default/natal_noel.gif

[Phantoxe 0]

Mas VOID, você comentou justamente o efeito 3D que eu dei na DIV !!!Agora não fica com efeito 3D em nenhuma das versões !!! heheheSobre o lance de deixa o LINK inteiro no DIV eu entendi !!! Vou tentar !!! Se você tiver algum exemplo ai na MANGA eu lhe agradeço !!!AbraçosEduardo BurkoUé GIO !!! O VOID disse que era necessário fazer 2 CSS para os navegadores diferentes !!! E dai verificar via JS !!!Aqui no trabalho falaram a mesma coisa !!!você podia me dar uma luz ?AbraçosEduardo Burko

[void 1]

pera ai você testou??eu comentei mas adicionei duas linhas em ambos os casos!!aki ficou cedrtinho o efeito q você quer c eu pudesse postava aki o screen!!the void

[Phantoxe 0]

Probleminhas com cache !!!Funcionou sim VOID !!! Brigadão mesmo cara !!!Agora pra finalizar !!! NOTE que o tamanho das LINHAS e a posição das SETAS CINZAS é diferente de cada browser, se você tiver paciencia ai e puder dar um help mais um vez eu lhe agradeço !!!Enquanto isso to verificando aquele lance lá do LINK na DIV inteira !!!ValeuEduardo Burko

[void 1]

posso ajudar sim faz o seguinte me manda um email com um gif contendo o design que você tem quq é na verdade como você quer q ele fique ai eu faço aki e posto para você!!mr.void@gmail.comthe void

[void 1]

ta ai funfando

<!-- Logo abaixo começa o leitor XML em PHP --><!-- Logo abaixo começa a codificação em HTML --><html><head><title>.:: Multimidia Manger ::.</title><style type="text/css">body{	margin:10px 15px;	font: 12px Arial, Helvetica, sans-serif;	background: url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/bg2.gif);	text-align:center;	}#tudo {	width:758px;	background: url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/bg.jpg) repeat-y 0 0;	text-align:left;	margin:0 auto;	}#topo {		background-image:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/topo.jpg);	height:96px;	width:758px	}#principal {	position:relative;	width:578px;	height:500px;	float:right;	z-index:2;	}#navegacao {	margin:0px;	padding:0px;	width:170px;	font-weight:bold;	color:#666666;	font-size:12px;	vertical-align:top;	float:left;	   list-style: none;	border-bottom: 1px solid #ffffff;	border-top: 1px solid #bebebe;	}div>#navegacao{margin-left:10px;}#navegacao li {	border-bottom: 1px solid #bebebe;	border-top: 1px solid #ffffff;	height:23px;	padding:0px;	margin:0px;	width:170px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/seta.gif) no-repeat 95% 50%;}#navegacao li a{	display: block;	line-height:23px;	text-decoration:none;}#navegacao * {	padding: 0 8px;	}a:hover {	text-decoration: underline;	color: #666666;}a:link {	color: #666666;	text-decoration: none;}#rodape {		clear:both;	height:20px;	background-image:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/bottom.jpg);	height:55px;	}#progID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:11px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#progID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#msgID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:34px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#msgID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#salaID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:57px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#salaID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#flipID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:80px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#flipID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#userID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:102px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#userID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#estaID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:125px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#estaID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#texto {	position:absolute;	padding: 0 20px;	z-index:3}</style><script type="text/JavaScript"><!--var timeout;var ultimo_id;function show(id) {	if (ultimo_id) hide(ultimo_id);	document.getElementById(id).style.visibility='visible';	}function hide(id) {	document.getElementById(ultimo_id).style.visibility='hidden';}function timeout_hide(id) {   ultimo_id = id;   timeout = setTimeout("hide('"+id+"')", 1000);}//--></script></head><body><div id="tudo">  <div id="topo"></div>  <div id="principal">	<div id="progID" onMouseOver="clearTimeout(timeout)" onMouseOut="timeout_hide('progID')">	  <div>Canal Informativo</div>	  <div>Canal Institucional</div>	  <div>Canal Treinamento</div>	  <div>Canal Externo</div>	  <div>Som Ambiente</div>	  <div>Preview</div>	</div>	<div id="msgID" onMouseOver="clearTimeout(timeout)" onMouseOut="timeout_hide('msgID')">	  <div>Institucional</div>	  <div>Tecnologia</div>	  <div>Motivação</div>	  <div>Urgente</div>	</div>	<div id="salaID" onMouseOver="clearTimeout(timeout)" onMouseOut="timeout_hide('salaID')">	  <div>Agenda</div>	  <div>Sala Virtual</div>	  <div>Treinamentos</div>	  <div>Material de apoio</div>	  <div>Blog</div>	</div>	<div id="flipID" onMouseOver="clearTimeout(timeout)" onMouseOut="timeout_hide('flipID')">	  <div>Institucional</div>	  <div>Novidades</div>	  <div>Portifólio</div>	</div>	<div id="userID" onMouseOver="clearTimeout(timeout)" onMouseOut="timeout_hide('userID')">	  <div>Incluir</div>	  <div>InPesquisar</div>	  <div>Alterar</div>	</div>	<div id="estaID" onMouseOver="clearTimeout(timeout)" onMouseOut="timeout_hide('estaID')">	  <div>Mensagens</div>	  <div>Treinamentos</div>	  <div>Usuários</div>	</div>	<div id="texto">	  <iframe width="528" height="500" src="inicio.php" frameborder="0"></iframe>	</div>  </div>  <!--div id="navegacao"-->  <div style="width:10px;display:block; float:left"></div>   <ul id="navegacao">	<li><a href="#">Programação</a></li>	<li><a href="#">Mensagens</a></li>	<li><a href="#">Sala Virtual</a></li>	<li><a href="#">Flips Eletrônicos</a></li>	<li><a href="#">Usuários</a></li>	<li><a href="#">Estatísticas</a></li>  </ul>  <!--/div-->  <div id="rodape"></div></div></body></html>

proximo passo é você acertar o script do submenu

[void 1]

terminei

para o ff dava para fazer o sub menu com css2.0 mas sabe como que o IE é né então adicionei o behaviour para facilitar a vida!!

 

behaviour.js

/*   Behaviour v1.1 by Ben Nolan, June 2005. Based largely on the work   of Simon Willison (see comments by Simon below).   Description:   	   	Uses css selectors to apply javascript behaviours to enable   	unobtrusive javascript in html documents.   	   Usage:      	var myrules = {		'b.someclass' : function(element){			element.onclick = function(){				alert(this.innerHTML);			}		},		'#someid u' : function(element){			element.onmouseover = function(){				this.innerHTML = "BLAH!";			}		}	};		Behaviour.register(myrules);		// Call Behaviour.apply() to re-apply the rules (if you	// update the dom, etc).   License:      	This file is entirely BSD licensed.   	   More information:   	   	[url="http://ripcord.co.nz/behaviour/"]http://ripcord.co.nz/behaviour/[/url]   */   var Behaviour = {	list : new Array,		register : function(sheet){		Behaviour.list.push(sheet);	},		start : function(){		Behaviour.addLoadEvent(function(){			Behaviour.apply();		});	},		apply : function(){		for (h=0;sheet=Behaviour.list[h];h++){			for (selector in sheet){				list = document.getElementsBySelector(selector);								if (!list){					continue;				}				for (i=0;element=list[i];i++){					sheet[selector](element);				}			}		}	},		addLoadEvent : function(func){		var oldonload = window.onload;				if (typeof window.onload != 'function') {			window.onload = func;		} else {			window.onload = function() {				oldonload();				func();			}		}	}}Behaviour.start();/*   The following code is Copyright © Simon Willison 2004.   document.getElementsBySelector(selector)   - returns an array of element objects from the current document	 matching the CSS selector. Selectors can contain element names, 	 class names and ids and can be nested. For example:	 	   elements = document.getElementsBySelect('div#main p a.external')	 	 Will return an array of all 'a' elements with 'external' in their 	 class attribute that are contained inside 'p' elements that are 	 contained inside the 'div' element which has id="main"   New in version 0.4: Support for CSS2 and CSS3 attribute selectors:   See [url="http://www.w3.org/TR/css3-selectors/#attribute-selectors"]http://www.w3.org/TR/css3-selectors/#attribute-selectors[/url]   Version 0.4 - Simon Willison, March 25th 2003   -- Works in Phoenix 0.5, Mozilla 1.3, Opera 7, Internet Explorer 6, Internet Explorer 5 on Windows   -- Opera 7 fails */function getAllChildren(e) {  // Returns all children of element. Workaround required for IE5/Windows. Ugh.  return e.all ? e.all : e.getElementsByTagName('*');}document.getElementsBySelector = function(selector) {  // Attempt to fail gracefully in lesser browsers  if (!document.getElementsByTagName) {	return new Array();  }  // Split selector in to tokens  var tokens = selector.split(' ');  var currentContext = new Array(document);  for (var i = 0; i < tokens.length; i++) {	token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');;	if (token.indexOf('#') > -1) {	  // Token is an ID selector	  var bits = token.split('#');	  var tagName = bits[0];	  var id = bits[1];	  var element = document.getElementById(id);	  if (tagName && element.nodeName.toLowerCase() != tagName) {		// tag with that ID not found, return false		return new Array();	  }	  // Set currentContext to contain just this element	  currentContext = new Array(element);	  continue; // Skip to next token	}	if (token.indexOf('.') > -1) {	  // Token contains a class selector	  var bits = token.split('.');	  var tagName = bits[0];	  var className = bits[1];	  if (!tagName) {		tagName = '*';	  }	  // Get elements matching tag, filter them for class selector	  var found = new Array;	  var foundCount = 0;	  for (var h = 0; h < currentContext.length; h++) {		var elements;		if (tagName == '*') {			elements = getAllChildren(currentContext[h]);		} else {			elements = currentContext[h].getElementsByTagName(tagName);		}		for (var j = 0; j < elements.length; j++) {		  found[foundCount++] = elements[j];		}	  }	  currentContext = new Array;	  var currentContextIndex = 0;	  for (var k = 0; k < found.length; k++) {		if (found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b'))) {		  currentContext[currentContextIndex++] = found[k];		}	  }	  continue; // Skip to next token	}	// Code to deal with attribute selectors	if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) {	  var tagName = RegExp.$1;	  var attrName = RegExp.$2;	  var attrOperator = RegExp.$3;	  var attrValue = RegExp.$4;	  if (!tagName) {		tagName = '*';	  }	  // Grab all of the tagName elements within current context	  var found = new Array;	  var foundCount = 0;	  for (var h = 0; h < currentContext.length; h++) {		var elements;		if (tagName == '*') {			elements = getAllChildren(currentContext[h]);		} else {			elements = currentContext[h].getElementsByTagName(tagName);		}		for (var j = 0; j < elements.length; j++) {		  found[foundCount++] = elements[j];		}	  }	  currentContext = new Array;	  var currentContextIndex = 0;	  var checkFunction; // This function will be used to filter the elements	  switch (attrOperator) {		case '=': // Equality		  checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };		  break;		case '~': // Match one of space seperated words 		  checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); };		  break;		case '|': // Match start with value followed by optional hyphen		  checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };		  break;		case '^': // Match starts with value		  checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };		  break;		case '$': // Match ends with value - fails with "Warning" in Opera 7		  checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };		  break;		case '*': // Match ends with value		  checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };		  break;		default :		  // Just test for existence of attribute		  checkFunction = function(e) { return e.getAttribute(attrName); };	  }	  currentContext = new Array;	  var currentContextIndex = 0;	  for (var k = 0; k < found.length; k++) {		if (checkFunction(found[k])) {		  currentContext[currentContextIndex++] = found[k];		}	  }	  // alert('Attribute Selector: '+tagName+' '+attrName+' '+attrOperator+' '+attrValue);	  continue; // Skip to next token	}		if (!currentContext[0]){		return;	}		// If we get here, token is JUST an element (not a class or ID selector)	tagName = token;	var found = new Array;	var foundCount = 0;	for (var h = 0; h < currentContext.length; h++) {	  var elements = currentContext[h].getElementsByTagName(tagName);	  for (var j = 0; j < elements.length; j++) {		found[foundCount++] = elements[j];	  }	}	currentContext = found;  }  return currentContext;}/* That revolting regular expression explained /^(\w+)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/  \---/  \---/\-------------/	\-------/	|	  |		 |			   |	|	  |		 |		   The value	|	  |	~,|,^,$,* or =	|   Attribute    Tag*/

 

agora a pagina

 

<html><head><title>.:: Multimidia Manger ::.</title><style type="text/css">body{	margin:10px 15px;	font: 12px Arial, Helvetica, sans-serif;	background: url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/bg2.gif);	text-align:center;	}#tudo {	width:758px;	background: url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/bg.jpg) repeat-y 0 0;	text-align:left;	margin:0 auto;	}#topo {		background-image:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/topo.jpg);	height:96px;	width:758px	}#principal {	position:relative;	width:578px;	height:500px;	float:right;	z-index:2;	}ul#navigation {	margin:0px;	padding:0px;	width:170px;	font-weight:bold;	color:#666666;	font-size:12px;	vertical-align:top;	float:left;	   list-style: none;	   z-index: 1;	border-bottom: 1px solid #ffffff;	border-top: 1px solid #bebebe;	}div>ul#navigation{margin-left:10px;}ul#navigation li {	border-bottom: 1px solid #bebebe;	border-top: 1px solid #ffffff;	height:23px;	padding:0px;	padding: 0 8px;	margin:0px;	width:170px;	cursor: pointer;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/seta.gif) no-repeat 95% 50%;}div>ul#navigation li{width:154px;}ul#navigation li a{	display: block;	line-height:23px;	text-decoration:none;}ul#navigation ul {	position: absolute;	margin: 0px;	padding: 0px;	margin-left:162px;	margin-top:-24px;	list-style: none;	z-index: 2;	background-color:#E4E4E6;	width: auto;	display: none;}ul#navigation ul li{	background-image:none;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	cursor: pointer;}#navigation li:hover ul {	display: block;}a:hover {	text-decoration: underline;	color: #666666;}a:link {	color: #666666;	text-decoration: none;}#rodape {		clear:both;	height:20px;	background-image:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/bottom.jpg);	height:55px;	}#progID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:11px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#progID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#msgID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:34px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#msgID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#salaID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:57px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#salaID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#flipID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:80px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#flipID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#userID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:102px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#userID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#estaID {	position:absolute;	border-color: #BEBEBE;	border-style: solid solid solid solid;	border-width: 1px 1px 0px 1px;	width:170px;	font-family:sans-serif;	font-weight:bold;	color:#666666;	font-size:12px;	margin-top:125px;	margin-left:1px;	background-color:#E4E4E6;	z-index:5;	visibility:hidden;}#estaID div {	border-bottom: 2px inset white;	padding-top:3px;	padding-bottom:3px;	padding-left:15px;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/red.gif) no-repeat 0% 50%;	z-index:6;}#texto {	position:absolute;	padding: 0 20px;	z-index:3}</style><script type="text/javascript" src="behaviour.js"></script><script>var myrules = {	'#navigation li' : function(element){		element.onmouseover = function(){			if(this.getElementsByTagName("UL").length>0){			menu = this.getElementsByTagName("UL")[0];			menu.style.display="block";			}		},		element.onmouseout = function(){			if(this.getElementsByTagName("UL").length>0){			menu = this.getElementsByTagName("UL")[0];			menu.style.display="none";			}		}	}};Behaviour.register(myrules);</script></head><body><div id="tudo">  <div id="topo"></div>  <div id="principal">	<div id="texto">	  ###########	</div>  </div>  <div style="width:10px;display:block; float:left"></div>  <ul id="navigation">	<li><a href="#">Programação</a>	  <ul>		<li><a href="#">Canal Informativo</a></li>		<li><a href="#">Canal Institucional</a></li>		<li><a href="#">Canal Treinamento</a></li>		<li><a href="#">Canal Externo</a></li>		<li><a href="#">Som Ambiente</a></li>		<li><a href="#">Preview</a></li>	  </ul>	</li>	<li><a href="#">Mensagens</a></li>	<li><a href="#">Sala Virtual</a></li>	<li><a href="#">Flips Eletrônicos</a></li>	<li><a href="#">Usuários</a></li>	<li><a href="#">Estatísticas</a></li>  </ul>  <div id="rodape"></div></div></body></html>

 

ta ai!!!

 

 

the void

[Phantoxe 0]

VOID !!! Ficou quase PERFECT cara !!!

 

Pra finalizar esta ajuda sua, gostaria que você me desse apenas 2 dicas:

 

1º: O meus menus estão muito colados, tentei usar a propriedade PADDING pra dar mais distância e não rolou, desconfigurou tudo !!! Qual é a propriedade pra dar mais distância da esquerda ?

 

2º: Agora que no MENU você não usa mais DIV e usa UL, como eu faço pra quando o MOUSE passar sobre cada ITEM do MENU, ele mudar a cor do TEXTO e SUBLINHAR ?

 

Bom, essa é a minha ultima dúvida cara !!! Brigadão por tudo.

 

Acessa ai: http://www.megamidiagroup.com.br/ti/multimidia/

 

Valeu

 

Eduardo Burko

[Guilherme Rambo 4]

Pra distancia eh margin:

/* margin:topo direita baixo esquerda; */margin:10px 5px 2px 3px; /* exemplo */

[void 1]

em

 

ul#navigation ul {	position: absolute;	margin: 0px;	padding: 0px;	margin-left:162px;	margin-top:-24px;	list-style: none;	z-index: 2;	background-color:#E4E4E6;	width: auto;	display: none;}

você muda o margin-left:162px; mudando ele você muda a distancia do submenu

 

para mudar a cor do text e sublinhar você tem q mudar a css do link a{}

 

ul#navigation li a{	display: block;	line-height:23px;	text-decoration:none;}

e

ul#navigation li a:hover{	display: block;	line-height:23px;	text-decoration:none;}

the void

[Phantoxe 0]

VOID,Não é MARGIN no SUBMENU !!!É a MARGIN no MENU NORMAL !!!Ali onde tá PROGRAMAÇÂO, MENSAGENS, etc...O resto funegou PERFECT !!!VALEUUUUUUUEduardo Burko

[void 1]

você quer aumentar a altura de cada item do menu é isso??

 

ul#navigation li {	border-bottom: 1px solid #bebebe;	border-top: 1px solid #ffffff;	height:23px;	padding:0px;	padding: 0 8px;	margin:0px;	width:170px;	cursor: pointer;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/seta.gif) no-repeat 95% 50%;}ul#navigation li a{	display: block;	line-height:23px;	text-decoration:none;}

você muda o height:23px; para um maior e depois muda o line-height:23px; para o mesmo valor!!

 

 

 

the void

[Phantoxe 0]

VOID não é a LARGURA cara !!! hahahahahahaÉ a distância da ESQUERDA de cada item do MENU !!!Eu já mudei o WIDTH e não funegou !!!To no aguardoEduardo Burko

[void 1]

agora sim você falou oq você quer! hehehehehehe

 

 

seguinte tem q fazer umas contas!!!

 

ul#navigation li {	border-bottom: 1px solid #bebebe;	border-top: 1px solid #ffffff;	height:23px;	padding:0px;	padding: 0 15px;	margin:0px;	width:170px;	cursor: pointer;	background:url(http://www.megamidiagroup.com.br/ti/multimidia/imgs/seta.gif) no-repeat 95% 50%;}div>ul#navigation li{width:140px;}ul#navigation ul {	position: absolute;	margin: 0px;	padding: 0px;	margin-left:155px;	margin-top:-24px;	list-style: none;	z-index: 2;	background-color:#E4E4E6;	width: auto;	display: none;}

para aumentar a distancia você tem q mudar este valor padding: 0 15px; só que tem outros valores que são ligados a ele como

 

div>ul#navigation li{

width:140px;

}

 

e o margin-left:155px;

 

 

c você mudar o 15 para 20 você tem q mudar o 140px para 130px e o 155px para 150px no caso do 140 é 170 - 2x e no caso do 155 é 170 - x ond x é o valor do padding!

 

 

manda ver!!!!

 

 

 

the void

[Phantoxe 0]

Resolvi VOIDValeuColoquei isso aqui ó:ul#navigation li a{ padding-left: 10px;}Até maisEduardo Burko

[void 1]

perfeito eu naum fiz melhor!!