Ir para conteúdo

Arquivado

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

MetalDragonX

Erro nos Navegadores!

Por , em Desenvolvimento frontend

Recommended Posts

MetalDragonX    0

MetalDragonX
Postado

Ta dando um erro no FF e no Opera.

Ja no IE fica a imagem de fundo na variavel #site.

 

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="revisit-after" content="2"><meta name="classification" content="Entertainment - Site"><meta name="description" content="Aqui você encontra as melhores festas, baladas e agitos da região do Cariri. Portal completo com notícias, colunistas, humor, etc."><meta name="keywords" content="sorteios, brindes, surto, cobertura, eventos, crato, diversão, cariri, festas, fotos, baladas, agitos, ceará, notícias, sensualidade, alegria, juazeiro, colunistas, bandas, crítica, portal"><meta name="robots" content="INDEX,FOLLOW"><meta name="rating" content="General"><title>Untitled Document</title><link href="estilo/css.css" rel="stylesheet" type="text/css" media="screen" /></head><body><div id="site">	<div id="barra">		<form action="" method="" name="login" class="login">		Nome:		<input name="login" type="text" value="" size="12" maxlength="12" class="texto" />		Senha:		<input name="pwd1" type="password" value="" size="8" maxlength="8" class="texto" />		<input type="submit" value="Ok" class="ok" />		<a href="" title="">Esqueceu a sua senha?</a> <a href="" title="">Cadastre-ser Gratis!</a>		</form>	</div>	<div id="topo">	<span class="banner"></span>	</div>	<div id="menu">		<div class="principal">Surto.com.br</div>		<div class="m1">			<ul>				<li><a href="" title="">Principal</a></li>				<li><a href="" title="">Contatos</a></li>				<li><a href="" title="">Sobre nós</a></li>				<li><a href="" title="">Anuncie!</a></li>				<li><a href="" title="">Serviços</a></li>				<li><a href="" title="">Equipe</a></li>			</ul>		</div>		<div class="principal">Menu</div>		<div class="m1">			<ul>				<li><a href="" title="">ClickFEST</a></li>				<li><a href="" title="">ClickVIP</a></li>				<li><a href="" title="">Agenda</a></li>				<li><a href="" title="">Noticias</a></li>				<li><a href="" title="">Entrevistas</a></li>				<li><a href="" title="">Recados</a></li>				<li><a href="" title="">Dj's</a></li>				<li><a href="" title="">Colunistas</a></li>				<li><a href="" title="">Usuários</a></li>				<li><a href="" title="">Humor</a></li>				<li class="final"><a href="" title="">Sorteios e Brindes</a></li>			</ul>		</div>	</div>	<div id="conteudo"></div>	<div id="rodape">		<div class="limite">			<address>			©2003 - 2006 Surto.com.br - Todos os Direitos Reservados.			</address>			<ul>				<li><a href="" title="">Principal</a> |</li>				<li><a href="" title="">Contatos</a> |</li>				<li><a href="" title="">Sobre nós</a> |</li>				<li><a href="" title="">Anuncie!</a> |</li>				<li><a href="" title="">Serviços</a> |</li>				<li><a href="" title="">Equipe</a></li>			</ul>		</div>	</div></div></body></html>

CSS

*,body , html {	margin:0;	padding:0;	list-style:none;	text-decoration:none;	border:none;	vertical-align:middle;}#site {		width:778px;	background:url(../images/barra.jpg) repeat-y left top; }/* BARRA */#barra {	width:100%;	height:25px;	float:right;	background:#FFF;}#barra .login { padding:0 10px;	font:bold 70% Arial, Verdana, Tahoma, Helvetica, sans-serif; margin:4px; }#barra .login a {	text-decoration:none;	font:bold 100% Arial, Verdana, Tahoma, Helvetica, sans-self;	color:#000;}#barra .login a:hover {	text-decoration:underline; }#barra .texto { color:#FFF; border:1px solid #D0D0D0; height:14px; font-size:11px; background-color:#000; }#barra .ok { padding-bottom:2px; _padding-bottom:0px; width:24px; color:#FFF; height:15px; background: #000; border:0px; font-size:9px; }/* FIM DE BARRA *//* TOPO */#topo {	width:758px;	height:300px;	float:right;	background:#CCC;}#topo .banner {	width:750px;	height:90px;	position:absolute;	margin:206px 4px 4px;}/* FIM DO TOPO *//* MENU */#menu {	width:150px; height:100%; float:left; }#menu .principal {	width:150px;	height:25px;	float:right;	color:#C71507;	font:120% Arial, Verdana, Tahoma, Helvetica, sans-serif;	background:#FFF;}#menu .m1 {	width:130px;	background:#FFF;	text-align:left;	float:right;}#menu .m1 li a {	text-align:left;	display:block;	width:130px;	_width:128px;	padding:1px;	font:70% Arial, Verdana, Tahoma, Helvetica, sans-serif;	color:#660000;	border-bottom:1px solid #EEE;}#menu .m1 li a:hover {	background:#660000;	color:#FFF;}#menu .m1 li.final a {	border-bottom:none;}/* FIM DO MENU *//* CONTEUDO */#conteudo {	width:628px;	float:right;	margin:0 auto;	padding:0;	background:#FFF;}/* FIM DO CONTEUDO *//* RODAPE */#rodape {	width:758px;	float:right;	border-top:1px solid #A3A3A3;	padding:15px 0;	line-height:0px;	background:#FFF;}#rodape .limite {	width:758px;	margin:0 auto;	text-align:center;}#rodape .limite address {	color:#CCC;	font:70% Arial, Verdana, Tahoma, Helvetica, sans-serif;}#rodape .limite ul li { 	display:inline;	font:70% Arial, Verdana, Tahoma, Helvetica, sans-serif;	color:#A3A3A3;}#rodape .limite ul li a { color:#A3A3A3;}#rodape .limite ul li a:hover {	color:#C71507;}/* FIM DO RODAPE */

Se alguem conseguir tirar esses erros.

 

vlw ae

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buscopan    0

Buscopan
Postado

Olá ... realmente já vi vários casos de CSS que não funcionam no FF, como, por exemplo, o da mudança da cor de barra de rolagem ?Existe um código CSS para isso que seja no padrão W3C ? Pesquisei em vários lugares e não encontrei nada ...Parece que é o mesmo tipo de problema que o do amigo do post anterior ...

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Div pai não acompanha a altura dos filhos que estão com float. Como fazer para que acompanhe

 

1) Tente colocar um 'display:table' no div pai (se não der certo, tente a 2a solução)

 

2) Técnica do Containing Floats consiste em colocar um elemento vazio qualquer no final da div pai, colocar este elemento pseudo-invisível e colocar um clear:both nele. Assim, como ele tá com clear:both, ele irá ser empurrado abaixo até que nenhum float fique sobre ele. Com isso a largura do pai também aumenta: http://www.complexspiral.com/publications/containing-floats/.

 

3) (Solução "normal" 1): Não deixar apenas elementos float dentro do div pai

 

4) (Solução "normal" 2): Definir manualmente a altura (height) do div pai

 

 

 

**********************************************************************

Obs.: O texto acima foi editado pra ficar mais fácil de entender ao procurar a solução. O post original está abaixo:

 

É como diz o velho pa_bruno: Links por favor, e não códigos.

 

Explicação:

Seu problema é causado no FF e Opera, pois estes navegadores tem a característica de reduzir a 0px a altura de um elemento que seja pai apenas de elementos float.

Exemplo:

Se você criar uma div, e só colocar dentro dela elementos que tem float left ou right, no IE esta div pai ficará com a altura dos elementos, mas no FF e no Opera este div pai não terá altura (height:0).

Não sei se isso é certo ou errado. Só sei que , pra mim, tem sido uma desvantagem...

 

Pra corrigir você tem 3 opções:

1) Não deixar apenas elementos float dentro do div pai

2) Definir manualmente a altura (height) do div pai

3) A melhor: colocar um 'display:table' no div pai

 

 

realmente já vi vários casos de CSS que não funcionam no FF, como, por exemplo, o da mudança da cor de barra de rolagem ?

Não funciona em outros navegadores que não o IE, pois o CSS para mudança de cor da barra de rolagem não é padrão recomendado pelo W3C e sim uma invenção da Microsoft.

Não que isto seja um crítica ao IE da Microsoft, pois o FF também tem suas CSS 'não padrão' como o '-moz-border-radius'.

Compartilhar este post

Link para o post
Compartilhar em outros sites

MetalDragonX    0

MetalDragonX
Postado

haaaaaaa...

 

mt obg micox.

 

mudei somente o seguinte comando e ele esta funcionando perfeitamente bem.

 

#rodape {	width:758px;	border-top:1px solid #A3A3A3;	padding:15px 0;	clear:both;	line-height:0px;	background:#FFF;}

se caso você puder me add no msn eu agradeço.

 

MSN: metaldragonx(arroba)gmail.com

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buscopan    0

Buscopan
Postado

he he ... eu tb agradeceria se você pudesse me adicionar ...você me parece manjar realmente muuuuuuuuuito de CSS, espero poder trocar experiências ...rodrigopissarro(arroba)hotmail.com

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Pois é, galera. VAleu os elogios aí, mas realmente só 'parece', porque na verdade eu não manjo muito não... Começei a mexer com isso a fundo só no começo do ano.Tipo. Aqui no serviço eu não tenho acesso à msn, mas qd eu chegar em casa eu adiciono vocês.Quanto à dúvidas por msn, é bom que sejam postadas aqui no fórum mesmo pois:1) Outros malucos poderão ajudar também2) Outros malucos que tiverem a mesma dúvida futuramente encontrarão a resposta...Ah, buscopan, e pra você que mexe com ASP (e pra todos que mexem com linguagens serverSide - php,asp,jsp,etc). Vocês não imaginam as vantagens que os webstandards trazem na hora de fazer o PHP ou ASP. Fica muuito simples, limpo e fácil, pois você só precisa se preocupar com o conteúdo e com a semântica. Não precisará se preocupar com a parte visual no código serverside, pois ele será tratado por CSS.PS.: Editei os emails de Vcs pra que spammers não peguem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

bluereal    0

bluereal
Postado

Não que isto seja um crítica ao IE da Microsoft, pois o FF também tem suas CSS 'não padrão' como o '-moz-border-radius'.

oi, micoxo que é isso '-moz-border-radius'?o que é que faz?abrs,blue :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

o que é isso '-moz-border-radius'?o que é que faz?

Isto maravilhosamente faz com que as bordas de suas divs tenham formato arredondado sem precisar fazer outras firulas complicadas.Dá uma pesquisada no google aí e abra seu firefox que você vai ver que beleza... Muito bom... heheh

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Aaaa. Achei a resolução do problema dos elementos perderem altura se seus filhos forem só float.

A solução é usar "display:table" neles.

 

Seu problema é causado no FF e Opera, pois estes navegadores tem a característica de reduzir a 0px a altura de um elemento que seja pai apenas de elementos float.Exemplo:Se você criar uma div, e só colocar dentro dela elementos que tem float left ou right, no IE esta div pai ficará com a altura dos elementos, mas no FF e no Opera este div pai não terá altura (height:0).Não sei se isso é certo ou errado. Só sei que , pra mim, tem sido uma desvantagem...

 

Vivaaa o vídeo da visie: http://forum.imasters.com.br/index.php?showtopic=171603

Compartilhar este post

Link para o post
Compartilhar em outros sites

AlexCabral    0

AlexCabral
Postado

Div pai não acompanha a altura dos filhos que estão com float. Como fazer para que acompanhe

 

1) Tente colocar um 'display:table' no div pai (se não der certo, tente a 2a solução)

 

2) Técnica do Containing Floats consiste em colocar um elemento vazio qualquer no final da div pai, colocar este elemento pseudo-invisível e colocar um clear:both nele. Assim, como ele tá com clear:both, ele irá ser empurrado abaixo até que nenhum float fique sobre ele. Com isso a largura do pai também aumenta: http://www.complexspiral.com/publications/containing-floats/.

 

3) (Solução "normal" 1): Não deixar apenas elementos float dentro do div pai

 

4) (Solução "normal" 2): Definir manualmente a altura (height) do div pai

 

 

 

**********************************************************************

Obs.: O texto acima foi editado pra ficar mais fácil de entender ao procurar a solução. O post original está abaixo:

 

É como diz o velho pa_bruno: Links por favor, e não códigos.

 

Explicação:

Seu problema é causado no FF e Opera, pois estes navegadores tem a característica de reduzir a 0px a altura de um elemento que seja pai apenas de elementos float.

Exemplo:

Se você criar uma div, e só colocar dentro dela elementos que tem float left ou right, no IE esta div pai ficará com a altura dos elementos, mas no FF e no Opera este div pai não terá altura (height:0).

Não sei se isso é certo ou errado. Só sei que , pra mim, tem sido uma desvantagem...

 

Pra corrigir você tem 3 opções:

1) Não deixar apenas elementos float dentro do div pai

2) Definir manualmente a altura (height) do div pai

3) A melhor: colocar um 'display:table' no div pai

 

 

realmente já vi vários casos de CSS que não funcionam no FF, como, por exemplo, o da mudança da cor de barra de rolagem ?

Não funciona em outros navegadores que não o IE, pois o CSS para mudança de cor da barra de rolagem não é padrão recomendado pelo W3C e sim uma invenção da Microsoft.

Não que isto seja um crítica ao IE da Microsoft, pois o FF também tem suas CSS 'não padrão' como o '-moz-border-radius'.

 

********************************************************************************

**************************************************

Sou novato aqui e não se é bem assim que se responde, mas, vamos lá!

 

Bom eu acredito que a solução do problema seja utilizar "min-height" que define o valor mínimo para a altura, mas, se precisar ele aumentar conforme o conteúdo, já o "height" define o valor fixo e fica aqui e pronto. Será que ajudei? Até mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Edenilson    0

Edenilson
Postado

Simples a solução, adiciona um clear: both após os elementos flutuantes

Ex:

<html>
<hed></head>
<body>

<div id="box-conteudo">
   <div class="box-conteudo-left">

</div>
   <div class="box-conteudo-right">

</div>

<br class="clearfloat" />
  </div>
</body>

Exemplo CSS:

 

#box-conteudo{
	width: 340px;
	margin: 0;
	padding: 0;
	background-color:#3F565C;
}

.box-conteudo-left{
	width: 300px;
	float: left;
	background-color: transparent;
	padding: 5px;
	margin: 0px;
	display: inline;
}

.box-conteudo-right{
	background-color: transparent;
	margin: 0px;
	padding: 5px;
	float: right;
	width: 300px;
	display: inline;
}

.clearfloat{
				clear: both;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Este tópico já era de há uns anos para trás :P..

 

Cumprimentos,

webflex

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Edenilson

 

o objetivo do forum é ajudar as pessoas, sua dica foi muito boa, porem se pesquisar nos tópicos já postarem esta solução em outro tópico.

 

uma coisa ruim aqui no forum somos nós, os usuários, postamos um problema, queremos uma solução e quando conseguimos nem sempre voltamos ao post para postar a solução.

 

o que o Paulo de Tarso F. M. disse é que o tópico é de 03/2006, estamos em 12/2008. Como eu disse acima, já teve essa solução aqui.

 

Mas sua intenção foi muito boa, continue contribuindo para o forum crescer cada vez mais e não ter nenhum post sem resposta

 

abraço

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