Erro nos Navegadores! - iMasters Fóruns

Página 1 de 1

Novo tópico
Responder

Erro nos Navegadores! CSS alguém pode ajudar?

#1 MetalDragonX

Grupo: Membros
Posts: 226
Cadastrado: 22-maio 04

Ícone Postou 29 março 2006 - 10:08

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&aacute;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

#2 Buscopan

Grupo: Membros
Posts: 292
Cadastrado: 14-setembro 05

Postou 29 março 2006 - 10:17

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 ...

#3 micox

elmicox.blogspot.com

Grupo: Membros
Posts: 2334
Cadastrado: 31-maio 03
Localização:Goiânia/GO

Postou 29 março 2006 - 10:25

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.complexsp...taining-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

Quote

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'.

#4 MetalDragonX

Grupo: Membros
Posts: 226
Cadastrado: 22-maio 04

Postou 29 março 2006 - 10:33

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

#5 Buscopan

Grupo: Membros
Posts: 292
Cadastrado: 14-setembro 05

Postou 29 março 2006 - 10:35

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

#6 micox

elmicox.blogspot.com

Grupo: Membros
Posts: 2334
Cadastrado: 31-maio 03
Localização:Goiânia/GO

Postou 29 março 2006 - 11:28

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ém
2) 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.

#7 bluereal

Grupo: Membros
Posts: 91
Cadastrado: 31-dezembro 05

Postou 29 março 2006 - 14:27

Quote

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, micox
o que é isso '-moz-border-radius'?
o que é que faz?
abrs,

blue

#8 micox

elmicox.blogspot.com

Grupo: Membros
Posts: 2334
Cadastrado: 31-maio 03
Localização:Goiânia/GO

Postou 29 março 2006 - 15:25

Quote

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

#9 micox

elmicox.blogspot.com

Grupo: Membros
Posts: 2334
Cadastrado: 31-maio 03
Localização:Goiânia/GO

Postou 29 março 2006 - 21:34

Pra você brincar bluereal:

Mozilla CSS Extensions
http://developer.moz..._CSS_Extensions

Não é só o IE que inventa coisas não padrão...

#10 micox

elmicox.blogspot.com

Grupo: Membros
Posts: 2334
Cadastrado: 31-maio 03
Localização:Goiânia/GO

Postou 29 março 2006 - 23:09

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.imaster...howtopic=171603

#11 danielvlopes

Grupo: Membros
Posts: 332
Cadastrado: 02-agosto 05

Postou 05 maio 2007 - 14:14

O problema de usar display table é que algumas vezes o conteudo da página é quebrado para a linha de baixo no FF

#12 AlexCabral

Grupo: Membros
Posts: 2
Cadastrado: 05-novembro 07

Postou 05 novembro 2007 - 16:39

micox, em 29/03/2006 - 11:25, disse:

Quote

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 ?

********************************************************************************
**************************************************
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.

#13 Edenilson

Grupo: Membros
Posts: 2
Cadastrado: 08-junho 08

Postou 04 dezembro 2008 - 07:01

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;
}

#14 webflex

webflex

Grupo: Membros
Posts: 2046
Cadastrado: 08-janeiro 07
Localização:Portugal

Postou 04 dezembro 2008 - 07:55

Olá,

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

..

Cumprimentos,
webflex

#15 Paulo de Tarso F. M.

Desenvolvedor Web(standards)

Grupo: Moderadores
Posts: 2016
Cadastrado: 01-janeiro 07
Sexo:Masculino
Localização:São Paulo/SP

Postou 04 dezembro 2008 - 11:01

De vez em quando alguns "desenterram" uns tópicos assim... :wacko:

#16 Edenilson

Grupo: Membros
Posts: 2
Cadastrado: 08-junho 08

Postou 05 dezembro 2008 - 06:09

Sim, e pelo visto, você "enterrou" o falecido sem uma solução satisfatória.

Paulo de Tarso F. M., em 04/12/2008 - 12:01, disse:

De vez em quando alguns "desenterram" uns tópicos assim... :wacko:

#17 Aprendiz CSS

http://aprendacss.wordpress.com

Grupo: Membros
Posts: 1540
Cadastrado: 23-junho 08
Localização:São Paulo - SP

Postou 05 dezembro 2008 - 07:34

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

Página 1 de 1

Novo tópico
Responder

iMasters Fóruns: Erro nos Navegadores! - iMasters Fóruns

Erro nos Navegadores! CSS alguém pode ajudar?

#1 MetalDragonX

#2 Buscopan

#3 micox

#4 MetalDragonX

#5 Buscopan

#6 micox

#7 bluereal

#8 micox

#9 micox

#10 micox

#11 danielvlopes

#12 AlexCabral

#13 Edenilson

#14 webflex

#15 Paulo de Tarso F. M.

#16 Edenilson

#17 Aprendiz CSS

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

Skin e idioma

Execution Stats

iMasters Fóruns: Erro nos Navegadores! - iMasters Fóruns

Member Login

Erro nos Navegadores! CSS alguém pode ajudar?

1 usuário(s) está(ão) lendo este tópico 0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

Skin e idioma

Execution Stats

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)