Ir para conteúdo

POWERED BY:

Arquivado

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

Fleury

Desfiguração do layout no FF

Por , em Desenvolvimento frontend

Recommended Posts

Fleury    3

Fleury
Postado

Começei a brincar de tabless hoje... nem sei se tô fazendo certo.

O problema é que meu inicio de layout ta certo no IE e no FF ele disfigura e não faço idéia de como arrumar.

Já tentei colocar clear: both; na minha classe #contextFF mas não melhorou muito.

Além disso, gostaria que me apontassem os meus erros quanto ao padrão tabless.

Valeus!

 

IE:

Imagem Postada

 

FF:

Imagem Postada

 

 

Source:

<!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" /><title>Solicitação de Vistoria Prévia</title><link href="solicita_vistoria/estilo.css" rel="stylesheet" type="text/css" /><script src="solicita_vistoria/lib.js" language="JavaScript" type="text/javascript"></script><script>MM_reloadPage(true);</script></head><body><div id="titulo"></div>			   <!--Titulo da página--><div id="separador"></div>			<!--Linha branca de 1px--><div id="context" align="center">	 <!--Inicio do conteudo-->  <div id="intContext">				<!--Interior do conteudo-->	  	<div id="formField-1" class="formField">			 <!--Area de formulario 1-->	  <div id="cabecalhoFF">							  <!--Cabeçalho da area-->		<div id="tituloFF">Dados do Solicitante</div>   <!--Titulo do formulario 1-->		<div id="showModeFF"><img id="mm-ff-1" src="/imagens/btn_minimize.gif" border="0" width="10" height="10" /></div>  <!--Botão de esconder/mostrar conteudo do formulario-->	  </div>	  <div id="contextFF"><span class="label">Nome:</span></div> <!--Conteudo do formulario-->	</div>		  </div></div></body></html>
CSS:
body {	margin-top: 10px;	margin-left: 10px;	background-image: url(fundo.jpg);}#titulo {	width: 604px;	height: 36px;	border: 1px solid #000000;	padding: 1px 1px 1px 1px;	background-color: #FFFFFF;	background-position: center;	background-image: url(solicita_vistoria_top.jpg);	background-repeat: no-repeat;}#separador {	width: 608px;	height: 1px;	overflow: auto;	background-color: #FFFFFF;}#context {	width: 604px;	border: 1px solid #000000;	padding: 1px 1px 1px 1px;	background-color: #FFFFFF;	}#intContext {	width: 598px;	padding: 3px 3px 3px 3px;	background-position: bottom;	background-image: url(/imagens/fundo_main.gif);	background-repeat: repeat-x;}.formField {	border: 1px solid #000000;}#cabecalhoFF {	width: 100%;	background-repeat: repeat-x;	background-image: url(/imagens/fundo_dy_table.gif);	border-bottom: 1px solid #000000;}#tituloFF {	height: 13px;	padding: 4px 4px 5px 4px;	float: left;	font-family: Tahoma;	font-size: 12px;	color: #122844;	font-weight: bold;}#showModeFF {	height: 13px;	float: right;	padding: 7px 5px 3px 4px;}#contextFF {	width: 586px;	padding: 5px 5px 5px 5px;	background-color: #E5EAEF;	border-top: 1px solid #FFFFFF;}.label {	color: #816D1F;	font-family: Tahoma;	font-size: 10px;	font-weight: bold;	float:left;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Teu código ainda ta meio sujo, ta muito "old school" de ser....vou analisar e ver o q pode ta errado, demora um bucadim http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Alguém mais pode olhar para mim? É que meu serviço depende um pouco disso... senão vou fazer tudo em tabela mesmo hehehe

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

http://forum.imasters.com.br/public/style_emoticons/default/devil.gif

 

Ve isso ai acho q ajuda Fleury

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Pronto. Depois de um muito trabalho.

 

As explicações estão em cada linha alterada. Depois eu quero ajuda também heim. hehehe

 

Tive que usar isso em alguns sites tipo meu blogzim de concursos públicos, blog com dicas do orkut e msn e fotos, e blog de dietas e regimes (sim, estão toscos mesmo, eu também preciso ganhar uma graninha com o ad se ns e heheh)

 

<!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" /><title>Solicitação de Vistoria Prévia</title><link href="estilo.css" rel="stylesheet" type="text/css" /><script src="solicita_vistoria/lib.js" language="JavaScript" type="text/javascript"></script><script>MM_reloadPage(true);</script></head><body><div id="geral"> <!-- ACICIONEI ESTE DIV PRA FICAR MAIS FÁCIL DEFINIR WIDTH E POSICIONAMENTO --><H1>Solicitacao de Vistoria Previa</H1>  <!--Titulo da página //TROQUEI PELO REAL VALOR SEMANTICO PARA UM TÍTULO QUE É O H1 --><!-- <div id="separador">ESTE SEPARADOR NÃO É MAIS NECESSÁRIO, COLOQUEI UMA MARGEM BOTTOM DE 1PX</div>  --><div id="context" >	 <!--Inicio do conteudo--> <!-- RETIREI O ALIGN CENTER -->  <div id="intContext">				<!--Interior do conteudo-->	  	<div id="formField-1" class="formField">			 <!--Area de formulario 1-->	  <div id="cabecalhoFF">							  <!--Cabeçalho da area-->		<!-- passei o botao para cima do h2 para que o float right funcione corretametne -->	<div id="showModeFF"><img id="mm-ff-1" src="/imagens/btn_minimize.gif" border="0" width="10" height="10" /></div>		<h2>Dados do Solicitante</h2>   <!--Titulo do formulario 1   TRANSFORMEI ESTE DIV EM H2 -->			  </div>	  <div id="contextFF"><span class="label">Nome:</span></div> <!--Conteudo do formulario-->	</div>		  </div></div></div> <!-- fim div GERAL --></body></html>

* {margin: 0px; padding: 0px;} /* TRUQUE QUE você DEVE USAR EM TODOS SEUS CSS PARA QUE VOCE MESMO TENHA CONTROLE SOBRE OS ELEMENTOS E NÃO O BROWSER USE VALORES PADRÃO */body {	margin-top: 10px;	margin-left: 10px;	background-image: url(fundo.jpg);}#geral {	width: 604px; /* ELIMINA A NECESSIDADE DE DEFINIR WIDTH EM CAAADA DIV */}h1 { /* AQUI ESTAVA O #TITULO */	margin-bottom:1px; /* ELIMINA A NECESSIDADE DO SEU DIV SEPARADOR */	/* width: 604px; COLOCADO NO #GERAL */	/* height: 36px; TIREI E ESTOU DEFININDO NO PADDING */	border: 1px solid #000000;	padding: 10px 0px 10px 10px;	background-color: #57718B;	background-position: center;	background-image: url(solicita_vistoria_top.jpg);	background-repeat: no-repeat;	font-weight: bold;	font-family: Verdana;	font-size: 16px;	color:white;}/* SEU SEPARADOR NÃO É MAIS NECESSÁRIO POIS DEFINI UM MARGIN BOTTOM NO TITULO H1, ENTAO RETIREI A DECLARAÇÃO DELE */#context {	/* width: 604px; COLOCADO NO #GERAL */	border: 1px solid black;	padding: 1px 1px 1px 1px;	background-color: #FFFFFF;	}#intContext {	/* width: 598px; NÃO PRECISAREMOS DISSO SE DEFINIRMOS UM PADDING BOM EM #CONTEXT */	padding: 3px 3px 3px 3px;	background-position: bottom;	background-image: url(/imagens/fundo_main.gif);	background-repeat: repeat-x;}.formField {	border: 1px solid red;}#cabecalhoFF {	/* width: 100%; NÃO PRECISAMOS DISSO. É AUTOMÁTICO */	background-repeat: repeat-x;	background-image: url(/imagens/fundo_dy_table.gif);	border-bottom: 1px solid black;	height:24px;}h2 { /* TRANSFORMEI O DIV TITULOFF EM UM H2 */	/* height: 13px; PASSEI ESTE HEIGHT PARA O CABECALHOFF */	padding: 4px 4px 5px 4px;/* A CULPA DO SEU TITULOFF FICAR FORA DA CAIXA É DESTE FLOAT LEFT. ELE NÃO É NECESSÁRIO. DEFINIREMOS SÓ O FLOAT RIGHT NA IMAGEM */	/* float: left;  -- RETIREI O FLOAT LEFT SERVE PARA O TEXTO APARECER NA LATERAL E NÃO É O CASO AQUI */	font-family: Tahoma;	font-size: 12px;	color: #122844;	font-weight: bold;}#showModeFF {	height: 13px;	float: right;	padding: 7px 5px 3px 4px;}#contextFF {	/* width: 586px; NÃO PRECISAMOS DISTO */	padding: 5px 5px 5px 5px;	background-color: #E5EAEF;	border-top: 1px solid #FFFFFF;}.label {	color: #816D1F;	font-family: Tahoma;	font-size: 10px;	font-weight: bold;	/* float:left; NOVAMENTE O FLOAT LEFT TIRA ELE DE DENTRO DO DIV PAI */}

Agora você faz suas alterações. Quem tiver mais coisa a corrigir aqui, é só postar...

 

Ah e lembre-se de ler os tutoriais indicados aqui no forum, foi neles que eu aprendi...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

:blink: tem de perguntar a quem sabe oia ai o micox destruindo...valeu ai micox!! tem duas saídas agora, mas a dele ta melhor pq tem os coments.Fleury chefe,....volte pras tables não!! huaruarhur :lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Hehehe, vou estudar galera... phoda é o tempo =/Mas mesmo assim vou tentar.A proposito, não testei ainda do micox mas o seu hunter, não funcionou no FF também.mesmo assim valeu a ajuda de todos e quando precisar, é só chamar xD

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Não intendi isso muito bem...

 

h2 { /* TRANSFORMEI O DIV TITULOFF EM UM H2 */	/* height: 13px; PASSEI ESTE HEIGHT PARA O CABECALHOFF */	padding: 4px 4px 5px 4px;/* A CULPA DO SEU TITULOFF FICAR FORA DA CAIXA É DESTE FLOAT LEFT. ELE NÃO É NECESSÁRIO. DEFINIREMOS SÓ O FLOAT RIGHT NA IMAGEM */	/* float: left;  -- RETIREI O FLOAT LEFT SERVE PARA O TEXTO APARECER NA LATERAL E NÃO É O CASO AQUI */	font-family: Tahoma;	font-size: 12px;	color: #122844;	font-weight: bold;}#showModeFF {	height: 13px;	float: right;	padding: 7px 5px 3px 4px;}

<div id="showModeFF"><img id="mm-ff-1" src="/imagens/btn_minimize.gif" border="0" width="10" height="10" /></div>		<h2>Dados do Solicitante</h2>   <!--Titulo do formulario 1   TRANSFORMEI ESTE DIV EM H2 -->			  </div>

Tipo que tanto a imagem quanto o h2 estão dentro do div com o float: right.

pq esse float só se aplicou na imagem e não colocou o h2 a direita também?

Compartilhar este post

Link para o post
Compartilhar em outros sites

THE_WATCHER    0

THE_WATCHER
Postado

Parece que não, Fleury... dá uma olhada melhor... e lê os comentários que eu coloquei:

 

<div id="showModeFF"> <!-- Começa o div --> <img id="mm-ff-1" src="/imagens/btn_minimize.gif" border="0" width="10" height="10" />   <!-- Imagem --></div> <!-- Fim do DIV --><h2>Dados do Solicitante</h2>   <!--Titulo do formulario 1   TRANSFORMEI ESTE DIV EM H2 --></div> <!-- Não olhei direito, mas aqui me parece ser um div superior, que engloba inclusive o #showModeFF -->

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

É o seguinte pessoal:

 

O h2("dados do solicitante") e o div showModeFF (o que tem a imagem de minimizar) estão dentro de um Div pai que serve de cabecalho (cabecalhoFF).

 

Quando você Possui 2 elementos e quer que eles fiquem lado a lado, não é necessário utilizar float nos 2. você escolhe 1 dos 2 elementos, coloca ele antes no código fonte e aplica o float nele. Por isto que o div do showMOdeFF ficou antes do h2 e só ele levou o float. Sakou?

 

Quanto a este comentário

/* A CULPA DO SEU TITULOFF FICAR FORA DA CAIXA É DESTE FLOAT LEFT. ELE NÃO É NECESSÁRIO. DEFINIREMOS SÓ O FLOAT RIGHT NA IMAGEM */	/* float: left;  -- RETIREI O FLOAT LEFT SERVE PARA O TEXTO APARECER NA LATERAL E NÃO É O CASO AQUI */
Ele explica o que eu falei acima. E, se dentro do div cabeçalhoFF só tiverem elementos que estão em float, o cabeçalhoFF recebe um height quase 0 (zero) e os elementos em float ficam aparecendo pra fora (isso no FF).

 

Sacaram? qualquer coisa postae...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

É isso aí micox...É que parece que o Fleury não tinha visto que a tag do div showModeFF fechava antes do H2...

isso isso isso xD

Compartilhar este post

Link para o post
Compartilhar em outros sites

THE_WATCHER    0

THE_WATCHER
Postado

QUOTE(THE_WATCHER @ Feb 8 2006, 07:25 PM) *É isso aí micox...É que parece que o Fleury não tinha visto que a tag do div showModeFF fechava antes do H2...isso isso isso xD

hehehe era o que eu imaginava...se tiver mais alguma dúvida, manda aí :)

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