Ir para conteúdo

POWERED BY:

Arquivado

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

Mr Crowley

FF e IE visualizam iguais, poren na impressao do IE sai errado

Por , em Desenvolvimento frontend

Recommended Posts

Mr Crowley    0

Mr Crowley
Postado

ola pessoal

estou fazendo uns layouts aqui

estao "iguais" tanto no ff qto no IE

porem qdo mando gerar a impressao no IE sai errado, ele joga desloca os DIVs

ja no FF não

tem cura pra isso?

 

segue o codigo

<!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>Untitled Document</title><style type="text/css"><!--* { 	margin:			0px; 	padding:		0px; 	font-size: 		9px;		font-family: 	Verdana, Arial, Helvetica, sans-serif;	color:			#000;	text-decoration:none;}body {	background-color: #F7F7F7;}a {	color: #C6C8CA;}a:hover {	color: #FFF;}h1{	padding-top:3px;	font-size: 	11px;	color: 		#fff;}.Texto {	color:	#333; }.TextoErr {	color:	#F00;}.CbcTit,.CbcTitEsq,.CbcTitDir,.CbcTitCentro {	height:	21px;	float:	left;	border:	0px;}.CbcTit{	background:	url(../img/img_cinza_cbc_centro.gif);	}.CbcTitCentro{	background:	url(../img/img_cinza_cbc_centro.gif);	}.CbcTitEsq{	background:	url(../img/img_cinza_cbc_esq.gif) no-repeat;	width:		21px;	}.CbcTitDir{	background:	url(../img/img_cinza_cbc_dir.gif) no-repeat;	width:		23px;}.Botao{	background:	#D8D8D8;	font-size:	12px;}.TblRow,.TblRowTrue,.TblRowFalse,.TblRowCabecalho,.TblCel,.TblTit,.TblTitEsq,.TblTitDir,.TblTitCentro,.TblRowRodape {	height:	21px;	float:	left;	border:	1px solid  #C4C4C4;	}.TblRow,.TblRowCabecalho{	background:	#CCC;}.TblRowTrue{	background:	#F7F7F7;}.TblRowFalse{	background:	#D6D6D6;}.TblRowRodape{	background:	#CCC;}--></style></head><body><div style="width:600px">		<div class="CbcTit" style="width:600px">		<div class="CbcTitEsq"> </div>		<div class="CbcTitCentro" style="width:556px"><h1>1. Exemplo de Dados Tabulares</h1></div>		<div class="CbcTitDir"> </div>		</div>		<div class="TblRowCabecalho" style="width:600px">		<div class="TblCel" style="width:302px">Cliente</div>		<div class="TblCel" style="width:294px">Contrato</div>	</div>		<div class="TblRowCabecalho" style="width:600px">		<div class="TblCel" style="width:200px">Nome</div>		<div class="TblCel" style="width:100px">CPF</div>		<div class="TblCel" style="width:120px">Data</div>		<div class="TblCel" style="width:100px">Valor</div>		<div class="TblCel" style="width:70px">Qtd.</div>	  </div>		<div class="TblRowTrue" style="width:600px">		<div class="TblCel" style="width:200px">Carlos </div>		<div class="TblCel" style="width:100px">111.222.333-12</div>		<div class="TblCel" style="width:120px">01/02/2003</div>		<div class="TblCel" style="width:100px">100,00</div>		<div class="TblCel" style="width:70px">2</div>	</div>		<div class="TblRowFalse" style="width:600px">		<div class="TblCel" style="width:200px">Carlos </div>		<div class="TblCel" style="width:100px">111.222.333-12</div>		<div class="TblCel" style="width:120px">01/02/2003</div>		<div class="TblCel" style="width:100px">100,00</div>		<div class="TblCel" style="width:70px">2</div>	</div>			<div class="TblRowTrue" style="width:600px">		<div class="TblCel" style="width:200px">Carlos </div>		<div class="TblCel" style="width:100px">111.222.333-12</div>		<div class="TblCel" style="width:120px">01/02/2003</div>		<div class="TblCel" style="width:100px">100,00</div>		<div class="TblCel" style="width:70px">2</div>	</div>		<div class="TblRowRodape" style="width:600px">		<div class="TblCel" style="width:200px">Total</div>		<div class="TblCel" style="width:100px">4</div>		<div class="TblCel" style="width:120px"></div>		<div class="TblCel" style="width:100px">400,00</div>		<div class="TblCel" style="width:70px">8</div>	</div>						</div></body></html>

se alguem encontrar coisas erradas no codigo relacionado a semantica, ou DESSA FORMA FICA MELHOR, dicas, criticas entre outras coisas vao ser bem vindas

 

falow

T+

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Então kra, não se sinta ofendido, mas seu codigo ta uma div-mania sab...

Só tem div, e pelo que eu vi são dados tabulares, então deve-se usar tabela.

E também evite o css inline, prefira ele separado do html.

 

Pesquise aqui no forum sobre div-mania http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

Então kra, não se sinta ofendido, mas seu codigo ta uma div-mania sab...Só tem div, e pelo que eu vi são dados tabulares, então deve-se usar tabela.E também evite o css inline, prefira ele separado do html.Pesquise aqui no forum sobre div-mania http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

belezavou dar uma procurada nesse tal de div-maniae sobre o css, ele esta separado, so postei tudo junto no exemplo pra caso alguem copia-se e cola-se ficaria mais facilmais uma duvida, em um formulario, é "errado" utilizar DIVs?melhor usar tabela mesmo?valeuT+

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Então kra, não se sinta ofendido, mas seu codigo ta uma div-mania sab...Só tem div, e pelo que eu vi são dados tabulares, então deve-se usar tabela.E também evite o css inline, prefira ele separado do html.Pesquise aqui no forum sobre div-mania http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

belezavou dar uma procurada nesse tal de div-maniae sobre o css, ele esta separado, so postei tudo junto no exemplo pra caso alguem copia-se e cola-se ficaria mais facilmais uma duvida, em um formulario, é "errado" utilizar DIVs?melhor usar tabela mesmo?valeuT+
Em um formulario você vai usar os elementos de formulario, <form>, <fieldset>, <legend>, <label>, <input> e por aeh vai..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

INSIDE

nao querendo ser chatao mais ja sendo

e em questao a posicionamento

ja resolvi a parte de posicionamento de layout do site em si

porem e no caso de eu querer posicionar os item do formulario

sei que isso é div-mania, mais é a unica forma que sei fazer o posicionamento, a nao ser com tabelas

veja esse codigo

<!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>Untitled Document</title><style type="text/css"><!--* { 	margin:			0px; 	padding:		0px; 	font-size: 		9px;		font-family: 	Verdana, Arial, Helvetica, sans-serif;	color:			#000;	text-decoration:none;}body {	background-color: #EEEEEE;}a {	color: #666;}a:hover {	color: #000;}h1{	padding-top:3px;	font-size: 	11px;	color: 		#305273;}.Texto {	color:	#333; }.TextoErr {	border: 		1px solid #FF0000;	background:		#FFFFCC;	width:			100%;	font-style:		normal;	color:			#FF0000;}.MSG_Err{	border: 		1px solid #FF0000;	padding: 		4px;	margin: 		4px;	background-color:#FFFFCC;	font-style:		normal;	color:			#FF0000;}.FormRow,.FormCel,.FormTit,.FormTitEsq,.FormTitDir,.FormTitCentro {	height:	21px;	float:	left;	border:	1px solid #DBE2EC;	}.FormRow{	background:	#DBE2EC;}.FormCampo,.FormCampoErr{	background:		url(../img/img_azul_form_bg.gif) #FAFFFF;	color: 			#666666;		border:			1px solid;	border-style: 	solid;	text-transform:	capitalize;}.FormCampoErr{	background:		#CDD2D8;	color:			#FF0000;	border-color:	#FF0000;	}--></style></head><body><form id="form" name="form" method="post" action=""><div style="width:740px">	<div class="FormRow" style="width:740px">		<div class="FormCel" style="width:35px">Nome</div>		<div class="FormCel" style="width:270px"><input name="Nome" type="text" class="FormCampo" id="Nome" size="50" maxlength="50" />		</div>		<div class="FormCel" style="width:40px">Sexo</div>		<div class="FormCel" style="width:45px"><select name="Sexo" class="FormCampo" id="Sexo">												  <option value="0"></option>												  <option value="1">M</option>												  <option value="2">F</option>												  </select>		  </div>		<div class="FormCel" style="width:105px">Data de Nascimento</div>		<div class="FormCel" style="width:65px"><input name="NascDt" type="text" class="FormCampo" id="NascDt" size="10" maxlength="10" /></div>		<div class="FormCel" style="width:40px">CPF</div>		<div class="FormCel"><input name="CPF" type="text" class="FormCampo" id="CPF" size="15" maxlength="15" /> </div>		 	</div>		<div class="FormRow" style="width:740px">		<div class="FormCel" style="width:35px">End.</div>		<div class="FormCel" style="width:270px"><input name="Nome" type="text" class="FormCampo" id="Nome" size="50" maxlength="50" />	</div>		<div class="FormCel" style="width:40px">End Nº</div>		  <div class="FormCel" style="width:45px"><input name="EndN" type="text" class="FormCampo" id="EndN" size="5" maxlength="6" />		  </div>		<div class="FormCel" style="width:105px">Bairro</div>		<div class="FormCel" style="width:65px"><input name="NascDt" type="text" class="FormCampo" id="NascDt" size="10" maxlength="10" /></div>		<div class="FormCel" style="width:40px">Compl.</div>		<div class="FormCel" ><input name="CPF" type="text" class="FormCampo" id="CPF" size="15" maxlength="15" /></div>		 	</div></div></form></body></html>

 

como você pode ser, na hora em que você visualiza o formulario(sei qu esta faltando varias coisas sobre formulari, mais quero postar apenas sobre o posicionamento, entao removi esses item pro codigo nao ficar grande), ele aparece alinhado, tem como eu fazer isso sem div ou tabela ou de uma forma mais correta?

 

obrigado pela ajuda que tem dado

T+ cara

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Primeiramente você não é chato, é eu que sou ^^Assim, acho que você deve ir estudando mais a fundo materias sobre semantica e padrões web, só assim e com pratica você vai aprender o que deseja.Da forma como você está fazendo, por enquanto, da na mesma que fazer com tabela ;)Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

Primeiramente você não é chato, é eu que sou ^^Assim, acho que você deve ir estudando mais a fundo materias sobre semantica e padrões web, só assim e com pratica você vai aprender o que deseja.Da forma como você está fazendo, por enquanto, da na mesma que fazer com tabela ;)Abraços

Valeu vou procurar no google sobre padroes e semantica, ai qualquer coisa eu retornofalo e obrigado novamenteT+

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

INSIDE

 

veja se você pode me ajudar nesse caso

crie algumas classes de estilo como no exemplo abaixo

 

form input, select {		background:		url(../img/img_cinza_form_bg.jpg) #9E9E9E;			color: 			#F00;		text-transform:	capitalize;	}

porem no IE ou no FF (nao sei quem interpleta errado nesse caso) fica "errado"

aparece um quadrado envolta do radio,

tem como eu aplicar essa classe apenas para o input do tipo text?

 

tentei

form input.text, select

porem nao deu certo

alem de eu dar um nome de classe para o input

<input class="text" type="text" name="name" id="name" />
tem outra solução para eu especificar uma classe para cada tipo de input no formulario?

 

obrigado novamente pela ajuda

T+ cara

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Todo o input tem uma borda padrão, se você não quer que ela apareça tem que botar border:none;

Sobre o lance de só aplicar aos do tipo text, existe sim a seguinta maneira:

 

input[type="text"] {width:300px;}
Mas adivinha se funciona no IE <_<

 

Portanto, por enquanto o melhor jeito é utilizando class

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

Todo o input tem uma borda padrão, se você não quer que ela apareça tem que botar border:none;Sobre o lance de só aplicar aos do tipo text, existe sim a seguinta maneira:

input[type="text"] {width:300px;}
Mas adivinha se funciona no IE <_<Portanto, por enquanto o melhor jeito é utilizando class[]'s
É o jeito e fazer "manual" mesmo!!!valeu pela dicaacho que hj a noite eu termino o teste do form, ai posto pra você ver se tem muitas irregularidades..rse novamenteobrigado pela ajuda que tem dadoT+ Cara

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mr Crowley    0

Mr Crowley
Postado

pessoal

vejam se tem muita coisa errada em criar um formulario desse jeito

 

e mais uma duvida

qdo eu fiz a classe de css "form span" ele do vai aplicar essa classe aos span que estiverem abaixo de um form ou nao?

 

segue o codigo do form que criei

form fieldset{	background:#CCC;	width:746px;	float:left;}form .FormCampo, select{	background:		url(../img/img_cinza_form_bg.jpg) #9E9E9E;		color: 			#F00;	text-transform:	capitalize;}.FormCampoErr{	background:		#FF8C8C;	color: 			#000;	}form span {	display:block;	float:left;	height:20px;	overflow:hidden;}

<div class="ContainerForm">	<span class="TituloBarraEsq"> </span>  <span class="TituloBarra"><h1>Formulario de Exemplo</h1></span>	<span class="TituloBarraDir"> </span>	<form id="form" name="form" method="post" action="">		<fieldset>			<span style="width:50px">Nome</span>			<span style="width:280px"><input name="Nome" type="text" class="FormCampo" id="Nome" size="50" maxlength="30" />			</span>			<span style="width:40px">Sexo</span>			<span style="width:50px">	<select name="Sexo" id="Sexo">											  <option value="F">F</option>											  <option value="M">M</option>										</select>			</span>			<span style="width:60px">Fumante:</span>			<span style="width:240px">Sim <input name="Fumante" type="radio" value="1" /> Não <input name="Fumante" type="radio" value="0" /></span>										<span style="width:50px">End.</span>			<span style="width:280px"><input name="End" type="text" class="FormCampo" id="End" size="50" maxlength="50" /></span>			<span style="width:40px">Nº</span>					<span style="width:50px"><input name="EndN" type="text" class="FormCampo" id="EndN" size="5" maxlength="50" /></span>			<span style="width:60px">Bairro</span>			<span style="width:220px"><input name="EndN" type="text" class="FormCampo" id="EndN" size="30" maxlength="30" />			</span>							<span style="width:50px">Errp</span>			<span style="width:280px"><input name="End" type="text" class="FormCampoErr" id="End" size="50" maxlength="50" />			</span>			<span style="width:40px">Err 2</span>					<span style="width:50px"><select name="Sexo" id="Sexo" class="FormCampoErr">											  <option value="F">F</option>											  <option value="M">M</option>										</select></span>			<span style="width:60px">Bairro</span>			<span style="width:220px"><input name="EndN" type="text" class="FormCampoErr" id="EndN" size="30" maxlength="30" />			</span>			<span class="MsgErr">Exemplo de explicativo de erro</span>			<div align="center"><input name="Enviar" type="submit" class="Botao" id="Enviar" value="Enviar" /></div>		</fieldset>	</form></div>

obrigado a ajuda de todos

t+

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Para dados tabulares você usa tabelas, para formulários usa tags de formulário. Fazer site no padrão significa fazer ele "certo", ou seja, utilizando as tags HTML pra que elas realmente servem.Dá uma pesquisada sobre padrões, usar layers não significa que você esteja certo, é preciso entender a informação pra saber como tratá-la visualmente. :) 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