CSS não funciona no FireFox

marvi · Novembro 15, 2008

Olá pessoal,

Estou montando um site e fiz algunas tabelas principais, como a tabela mãe e tal configurada no CSS, tive uma dor de cabeça, mas conseguir fazer ele ler legal no Internet Explorer, só que no firefox ele não ler como eu quero... minha CSS é:

<style type="text/css">
<!--
* { margin: 0; padding: 0; }
body {background-image: url('imagens/topo.gif'); background-repeat: repeat-x; }
#conteudo { margin: 45 auto;  text-align: left; position: relative; min-height: 100%; height: auto; height: 80%; background-image: url('imagens/fundom.gif');}
#rodape {  width:100%; background-image: url('imagens/topo10.gif'); color:#fff;  bottom:0px; height: 55px; margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
rodape-conteudo { text-align:center; line-height: 35px;}
#frente { position:relative; margin: -25 auto;}
#demo-table {
  width: 730;
  height: 550;
border: 0px solid #f00; 
margin-left: auto;
margin-right: auto;

  }
-->
</style>

Para ver o meu site todo, tabela, div e etc, é só ver o html dele: http://www.ideiabiz.com/lab . Acesse também ele no Internet Explorer e depois no FireFox para ver a diferença, no firefox por exemplo não tem o topo da página correto, que é deixa a barra azul separada do plano de fundo cinza... Não tem também o núcleo do site, o meio em branco, em cima da barra azul no topo, só tem no rodapé e o plano de fundo cinza não vai até lá em baixo na barra do rodapé azul...

Como resolver isso?

Obrigado mesmo!

Marcelo

marvi · Novembro 15, 2008

Pode deixar, resolvi!

GabrielLM · Novembro 15, 2008

O poxa '-', eu tava mechendo do nada a página tá fora do ar!

Eu tava implementando um layout tableless, quer que eu poste?

marvi · Novembro 15, 2008

Para resolver só fiz isso:

É só adicionar hacks nas folhas de estilo padrão:

#search {

margin: 10px 0 0 5px; /*todos os navegadores*/

*margin: 10px 0 0 5px; /* apenas para o IE*/

}

Veja que para o IE tem o * na frente...

Mas surgiu outro problema... quem poder me ajudar... é o seguinte:

Se vocês acessarem no FireFox o site que estou criando http://www.ideiabiz.com/lab1 verá que ao mudar a resolução para 800X600 o plano de fundo do meio (cor cinza) fica curto, não vai até o rodapé, ok? Se também você mudar a resolução para 1024 X 768 ele se encaixa certo... Mas, se você muda para uma resolução 1152 X 864, agora, o plano de fundo cinza do meio passa do rodapé azul...

Isso não acontece com o Internet Explorer, pois o IE se adequa, se ajusta, automáticamente em qualquer resolução, como resolver isso? Segue o CSS:

<!--
* { margin: 0; padding: 0; }
body {background-image: url('imagens/topo.gif'); background-repeat: repeat-x; }
#conteudo { margin: 45 auto; *margin: 45 auto; text-align: left; position: absolute; *position: relative; min-height: 100%; *min-height: 100%; height: auto; *height: auto; height: 138%; *height: 100%; background-image: url('imagens/fundom.gif');}
#rodape { width:100%; *width:100%; background-image: url('imagens/topo10.gif'); color:#fff;  bottom:0px; *bottom:0px; height: 71px; *height: 55px; margin:0px; *margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
rodape-conteudo { text-align:center; line-height: 40px; *text-align:center; *line-height: 35px;}
#frente { position:relative; margin: -25 auto; *position:relative; *margin: -25 auto;}
#demo-table {
  width: 730;
  height: 550;
border: 0px solid #f00; 
margin-left: auto;
margin-right: auto;

  }
-->

marvi · Novembro 15, 2008

Mais problemas!!!

Mais problemas... baixei o FireFox Mozilla Firefox 3.0.4 e ele não roda certo mesmo! Voltei a estaca zero! E agora, alguem pode me ajudar??

Usem o Mozilla Firefox 3.0.4 e veja a diferença dele com Internet Explorer.

GabrielLM · Novembro 15, 2008

Eu uso 0.4, você quer que a div a table que tem o conteúdo sobreponha o topo e o rodapé?

Vou continuar o que estava fazendo e posto aqui!

marvi · Novembro 15, 2008

Já fiz if e tal e dava uns erros, resolvir de novo, mas acho que só serve para ler na versão nova do firefox que é o 3.0.4...

Fiz: position: relative;

Mas surgiu outro problema também.... acesse: http://www.ideiabiz.com/lab1 o site está no ar sim, ou senão, http://www.ideiabiz.com/lab1/index.htm para ver se vai e verá que a barra vertical branca no meio do site, onde tem o conteudo, deveria ter o seu topo na frente da barra azul no topo, assim como é pelo Internet explorer...

Mas meu site não pode ser todo em tabless... tenho que está nesse que ja tenho

marvi · Novembro 16, 2008

GabrielLM, você vai fazer a página em toda em cs3 tablles? Fica ruim para mim, pois não conheço muito... só quero resolver esses bugs com esse css no fire fox e pronto... Não precisa ter trabalho assim não...

Pois na hora de dar manutenção e até criar outros sites precisarei disso...

GabrielLM · Novembro 16, 2008

Pois então cara, trabalho é mecher em um layout desse tamanh todo tabelado. O HTML aqui ficou com 87 linhas. Rapidinho você entende um layout tableless, e qualquer duvida no CSS tou aqui pra responder.

marvi · Novembro 16, 2008

Gabriel, acho que resolvi, acesse ai o site agora: http://www.ideiabiz.com/lab1

Ler tanto no Internet Explorer como no Fire Fox e com todas resoluções!

Se aparecer algum bug eu posto aqui de novo! Espero que não!

CSS ok:

<!--
* { margin: 0; padding: 0; }
body {background-image: url('imagens/topo.gif'); background-repeat: repeat-x; }
#conteudo {  width:100%; *width:100%; margin: 45 auto; *margin: 45 auto; text-align: left; position: absolute; *position: absolute; min-height: 100%; *min-height: 100%;  background-image: url('imagens/fundom.gif');}
#rodape { height: auto; *height: auto; height: 138%; *height: 100%; width:100%; *width:100%; background-image: url('imagens/topo10.gif'); color:#fff;  bottom:0px; *bottom:0px; height: 71px; *height: 55px; margin:0px; *margin:0px; }
* HTML #rodape { margin-bottom:0px; bottom:-1px; }
rodape-conteudo { text-align:center; line-height: 40px; *text-align:center; *line-height: 35px;}
#frente { position:relative; margin: -25 auto; *position:relative; *margin: -25 auto;}
#demo-table {
  width: 730;
  height: 550;
border: 0px solid #f00; 
margin-left: auto;
margin-right: auto;

  }
-->

Obrigado!

GabrielLM · Novembro 16, 2008

Hmm... a parte que tem conteudo tem que ficar assim mesmo? Sobrepondo o topo e o rodapé?

Uhum... parece ter dado certo. De qualquer forma, eu vo postar aqui beleza? Dai você decide o que faz =p

marvi · Novembro 16, 2008

Sim, a parte do conteudo, a parte branca fica na frente do rodapé e do topo sim, está certo.

Coloque também o seu código... pois posso pegar para estudá-lo e ver se entro em sites w3c.

Obrigado!

GabrielLM · Novembro 16, 2008

Olha o HTML tá pronto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">
	<head>
		<title>TITULO</title>
		<link rel="stylesheet" href="css.css" type="text/css" media="Screen" />
	</head>
	<body>
		<div id="top">
		 
		</div>
		<div id="geral">
			<div id="topo">
				<h1 id="topo-eqd">Laboratório Análise</h1>					
					<small>
						<a href="#">acesso restrito</a> | <a href="#">webmail</a>
					</small>
					<ul id="menu">
						<li><a href="#">Inicio</a></li>
						<li><a href="#">Nossa missão</a></li>
						<li><a href="#">História</a></li>
						<li><a href="#">Equipamentos</a></li>
						<li><a href="#">Equipe</a></li>
						<li><a href="#">Contato</a></li>
					</ul>
			</div>
			<div id="banner">
				<h2>Seja bem vindo ao nosso web-site</h2>
				<p><span>É um prazer</span> receber sua visita em nosso web site.<br />
				Esta comunicação é fundamental para que possamos continuar oferecendo <span>serviços de qualidade.</span></p>			
			</div>
			<hr class="hidden" />
			<div id="corpo">
				<div id="corpo-eqd">				
					<h3>selecione os itens</h3>
					<ul>
						<li><a href="#">Agendamento on-line</a></li>
						<li><a href="#">Resultado de exames</a></li>
						<li><a href="#">Tire as suas dúvidas</a></li>
						<li><a href="#">Instruções para exames</a></li>
						<li><a href="#">Nossas especialidades</a></li>
						<li><a href="#">Nossos convênios</a></li>
					</ul>
					<img src="img/partners/labsen.jpg" alt="Laboratório Sênior" />
					<img src="img/partners/baby.jpg" alt="Baby" />
					<img src="img/partners/iso.jpg" alt="ISO 9001" />
				</div>
				<div id="corpo-drt">
					<div id="corpo-cont">
						<div id="corpo-cont-eqd">
							<h3>Sobre o Lab.</h3>
							<p><span>O Lab. Análise</span> ocupa posição de destaque na área de análises clínicas no estado com tecnologia superior até mesmo a laboratórios de <span>grandes centros do país.</span></p>
							<p><span>Equipamentos de última geração</span>, equipe altamente qualificada, aliada a uma notável estrutura física que atende a todas as exigências legais, o que torna seus diagnósticos cada vez mais precisos e confiáveis.</p>
						</div>
						<div id="corpo-cont-drt">
							<h3>Fotos</h3>
							<img src="img/fotos/foto1.jpg" alt="Foto 1" class="img-thumb" />
							<img src="img/fotos/foto2.jpg" alt="Foto 2" class="img-thumb" />
							<img src="img/fotos/foto3.jpg" alt="Foto 3" class="img-thumb" />
							<img src="img/fotos/foto4.jpg" alt="Foto 4" class="img-thumb" />
							<img src="img/fotos/foto5.jpg" alt="Foto 5" class="img-thumb" />
							<img src="img/fotos/foto6.jpg" alt="Foto 6" class="img-thumb" />
							<img src="img/fotos/foto7.jpg" alt="Foto 7" class="img-thumb" />
							<img src="img/fotos/foto8.jpg" alt="Foto 8" class="img-thumb" />
							<img src="img/fotos/foto9.jpg" alt="Foto 9" class="img-thumb" />
							<small>+ mais fotos</small>
						</div>						
					</div>
					<hr class="hidden" />
					<div id="corpo-bott">
						<span>Confira abaixo o nosso horário de atendimento:</span><br />
						<p><span class="b">Segunda a Sexta</span>: 06:30 às 18:00 hs. <span class="b">Sábado</span>: 07:00 às 12:00 hs, sendo das 07:00 às 11:00 hs para coleta.</p>
						<p class="b">Tel.: (75) 3458.6712</p>
						<p class="b">
							E-mail:<br />
							comercial@labanálise.com
						</p>
						<small>Se você deseja obter maiores informações sobre os nosso serviços, ou opiniões e sugestões, entre em contato conosco.</small>
					</div>
				</div>
			</div>
		</div>
		<hr class="hidden" />
		<address>
			Todos os direitos reservados - Por Idéia Biz
		</address>
	</body>
</html>

O CSS falta um pouco ainda, mas tenho que fazer umas coisa... quando eu terminar eu continuo e posto aqui...

Por que nao tenta continuá-lo?

body { margin: 0; background: url(img/layout/fundo-body.gif) repeat; }
.hidden { display: none; }

div#topo, div#banner, div#corpo { width: 713px; margin: 0 auto; }
div#top { width: 100%; height: 41px; background: url(img/layout/fundo-top.gif) repeat; }
p { font: 13px Arial Narrow, verdana, arial; color: #808080; text-align: justify; }
span { font: 13px Arial Narrow, verdana, arial; color: #8AA701; }

div#geral {
	width: 730px; 
	margin: 0 auto 0 auto;
	padding-top: 0px;
	*padding-top: 15px;
	background: #fff; 
	height: 750px;
}
div#topo { width: 713px; height: 100px; }
h1#topo-eqd {
	background: url(img/layout/logo.gif) no-repeat;
	width: 179px;
	height: 76px;
	text-indent: -2000em;
	overflow: hidden;
	float: left;
}
div#topo small { position: absolute; right: 150px; }
ul#menu { float: left; margin-top: 50px; margin-left: -30px; *margin-left: 5px; }
ul#menu li { background: url(img/layout/fundoli.gif); display: inline; padding: 10px 11px 10px 12px; *padding: 0 11px 0 11px; margin-left: 3px; }
ul#menu li a { font: bold 16px Arial Narrow, Tahoma, Arial; text-decoration: none; color: #808080; *margin: 10px 0 10px 0; }
ul#menu li a:hover { font: bold 16px Arial Narrow, Tahoma, Arial; color: #8AA701; border-bottom: 3px solid #BCD0A7; *text-decoration: underline; }
div#banner {
	background: url(img/layout/banner.jpg) no-repeat; 
	width: 713px; 
	height: 178px; 
	padding-top: 70px;
	clear: both;
}
div#banner p {
	display: block;
	width: 230px; 
	margin: -60px 0 0 450px; 
	*margin-top: -40px; 
}
div#corpo { margin-top: -80px; *margin-top: -60px; }
div#banner h2 { text-indent: -2000em; overflow: hidden; }
div#corpo #corpo-eqd { background: #CDE0F7; float: left; width: 240px;}
div#corpo #corpo-eqd h3 { font: bold 14px verdana, arial, tahoma; color: #132233; text-indent: 5px; }
div#corpo #corpo-eqd ul li { background: #B6D1F3; color: #1B57A0; verdana; list-style-type: none; margin: 3px 3px 0 -35px; text-align: right; }
div#corpo #corpo-eqd ul li a { font: 9pt, arial, verdana; color: #444444; text-decoration: none; }
div#corpo #corpo-eqd ul li a:hover { border-bottom: 1px solid #8AA701; border-left: 3px solid #8AA701; }
address {
	width: 100%;
	height: 38px;
	background: url(img/layout/fundo-bottom.gif) repeat-x;
	font: 13px verdana, arial, tahoma;
	color: #fff;
	text-align: center;
	padding-top: 20px;	
}

marvi · Novembro 16, 2008

Certo Gabriel, vou far uma olhada no código!

Não é tão dificil assim não é?

GabrielLM · Novembro 16, 2008

Não é dificil não cara.. é muito mais simples!

Arquivado

CSS não funciona no FireFox

Recommended Posts

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielLM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielLM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielLM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielLM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielLM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marvi 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GabrielLM 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carregamento preloading

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Fóruns

Tempo Real

Informação importante