Mesmo design (HTML + CSS) mas visualização diferente

Juliano.net · Abril 18, 2007

Tem como eu testar se realmente está sendo aplicada a configuração correta que defini em meu CSS?

Tenho um projeto que possui 1 módulo em ASP3 e outro em ASP.Net. Ambos utilizam o mesmo HTML e o mesmo CSS para elaboração do layout, mas apenas uma delas exibe corretamente.

Este é o código da que não pega o visual configurado no CSS:

<script src="funcoes.js" type="text/javascript"></script><script src="padrao.js" type="text/javascript"></script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]"><head id="Head1"> <title>Sincovaço - Liquidação de Contas a Pagar e Receber</title> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> <script language="JavaScript" type="text/javascript">	 <!--//Código do menu - escondido} // mmLoadMenus()//--> </script> <script type="text/javascript" language="JavaScript" src="mm_menu.js"></script><!-- ************ REFERENCIA AO CSS **************** --> <link href="[url="http://rcsnt1/sincovaco/App_Themes/Layout/Layout.css"]App_Themes/Layout/Layout.css[/url]" type="text/css" /> <style type="text/css"> <!--   body  {   font-family: Arial, Verdana !important;  }  //--> </style></head><body id="Body1" style="margin: 0px 0px 0px 0px;"> <script type="text/javascript" language="JavaScript1.2">mmLoadMenus();</script> <table cellpadding="1" style="border: solid 1px gray;" width="777" align="center">  <tr>   <td>	<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="777">	 <tr>	  <td rowspan="3">	   <img id="sindcomercio_01" alt="" height="95" src="images/sindcomercio_01.gif" width="10" /></td>	  <td rowspan="2">	   <img id="logo_sindcomercio" alt="" height="84" src="images/logo_sindcomercio.gif" width="174" /></td>	  <td>	   <img id="menu_cadastro" alt="" height="55" name="image1" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0205005215_0,0,55,null,'image1')" src="images/menu_cadastro.gif" width="86" /></td>	  <td>	   <img id="menu_operacao" alt="" height="55" name="image2" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0205010215_0,0,55,null,'image2')" src="images/menu_operacao.gif" width="90" /></td>	  <td>	   <img id="menu_cartoes" alt="" height="55" name="image3" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0205010342_0,0,55,null,'image3')" src="images/menu_cartoes.gif" width="74" /></td>	  <td>	   <img id="menu_gerais" alt="" height="55" name="image4" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0205010546_0,0,52,null,'image4')" src="images/menu_gerais.gif" width="60" /></td>	  <td>	   <img id="menu_financeiro" alt="" height="55" name="image5" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0205010621_0,-50,55,null,'image5')" src="images/menu_financeiro.gif" width="95" /></td>	  <td>	   <img id="menu_orcamento" alt="" height="55" name="image6" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0205010953_0,-180,55,null,'image6')" src="images/menu_orcamento.gif" width="98" /></td>	  <td>	   <img id="menu_cobranca" alt="" height="55" name="image7" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_0205011148_0,-160,55,null,'image7')" src="images/menu_cobranca.gif" width="89" /></td>	  <td>	   <img id="Img1" alt="" height="55" src="images/spacer.gif" width="1" /></td>	 </tr>	 <tr>	  <td colspan="7" height="40" rowspan="2" style="text-align: right;" width="592">	   <span id="spnAreaData"></span>	   </td>	  <td>	   <img id="Img2" alt="" height="29" src="images/spacer.gif" width="1" /></td>	 </tr>	 <tr>	  <td>	   <img id="sindcomercio_11" alt="" height="11" src="images/sindcomercio_11.gif" width="174" /></td>	  <td>	   <img id="Img3" alt="" height="11" src="images/spacer.gif" width="1" /></td>	 </tr>	</table>	 <table id="Table2" border="0" cellpadding="0" cellspacing="0" width="777">	  <tr>	   <td><form action="dad_entrega_cartao_assist_medica.asp" method="post" name="frmEntregaCartao" id="frmEntregaCartao"> <div id="PainelFeedback" runat="server" class="Linha" style="display: none;">  <table border="0" width="100%">   <tr>	<td style="width: 5%;" valign="middle">	 <img id="imgIcone" alt="Ícone Mensagem" src="Images/erro.gif" />	</td>	<td align="left" style="padding-left: 5px;" valign="middle">	 <span id="lblMensagem" class="MensagemFeedback">Ocorreram erros durante o registro da entrega de cartões.	 </span>	</td>   </tr>  </table> </div> <fieldset id="Campos" runat="server">  <legend id="Titulo" runat="server">Liquidação de Contas a Pagar e Receber</legend>   <div id="Formulario">	<div id="Controles">	 <table width="100%" border="0">	  <tr>	   <td>		Selecionar contas à <input type="radio" name="rdoContasPagarReceber" id="rdoContasPagarReceber_OpReceber" value="receber" /><label for="rdoContasPagarReceber_OpReceber">Receber</label> <input id="rdoContasPagarReceber_OpPagar" name="rdoContasPagarReceber" type="radio" value="pagar" /><label for="rdoContasPagarReceber_OpPagar">Pagar</label>	   </td>	   <td>		Com vencimento entre: <input type="text" name="txtDataInicioVencimento" value="" maxlength="10" size="11" /> e 		<input type="text" name="txtDataFimVencimento" value="" maxlength="10" size="11" />	   </td>	   <td>		Nº Boleta: <input type="text" name="txtNumBoleta" value="" maxlength="15" size="12" />	   </td>	  </tr>	 </table>	</div>   </div> </fieldset> <fieldset id="GridArea" runat="server">  <legend id="TituloGridArea" runat="server">Contas</legend>  <div id="divGrid" class="Linha">   Teste  </div> </fieldset></form><iframe id="FrameConsultas" name="FrameConsultas" src="blank.html" style="width: 0px; height: 0px; border: none;"></iframe></td>	  </tr>	 </table>	<table id="Table3" border="0" cellpadding="0" cellspacing="0" width="776">	 <tr>	  <td height="56" style="background-image: url(images/rodape_repeat.gif); background-repeat: repeat-x; text-align: center;" width="6"> 	   </td>	  <td class="Rodape" style="background-image: url(images/rodape_repeat.gif); background-repeat: repeat-x; text-align: center;">	   © Copyright 2007 - Sindcomércio - Todos os direitos reservados<br />	   Desenvolvido pela <a href="[url="http://www.rcs.srv.br"]http://www.rcs.srv.br">RCS[/url] Informática</a>	  </td>	 </tr>	</table>   </td>  </tr> </table></body></html>

Código da página que aceita a configuração:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]"><head id="ctl00_Head1"><title> Sindcomércio - Cadastro de Serviço</title><meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /><!-- ************ REFERENCIA AO CSS **************** --><link href="App_Themes/Layout/Layout.css" type="text/css" rel="stylesheet" /></head><body id="ctl00_Body1" style="margin: 0px 0px 0px 0px;"> <script type="text/javascript" language="JavaScript1.2">mmLoadMenus();</script> <table cellpadding="1" style="border: solid 1px gray;" width="777" align="center">  <tr>   <td>	<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="777">	 <tr>	  <td rowspan="3">	   <img src="images/sindcomercio_01.gif" id="ctl00_sindcomercio_01" height="95" width="10" /></td>	  <td rowspan="2">	   <img src="images/logo_sindcomercio.gif" id="ctl00_logo_sindcomercio" height="84" width="174" /></td>	  <td>	   <img src="images/menu_cadastro.gif" id="ctl00_menu_cadastro" height="55" name="image1" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_0205005215_0,0,55,null,'image1')" width="86" /></td>	  <td>	   <img src="images/menu_operacao.gif" id="ctl00_menu_operacao" height="55" name="image2" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_0205010215_0,0,55,null,'image2')" width="90" /></td>	  <td>	   <img src="images/menu_cartoes.gif" id="ctl00_menu_cartoes" height="55" name="image3" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_0205010342_0,0,55,null,'image3')" width="74" /></td>	  <td>	   <img src="images/menu_gerais.gif" id="ctl00_menu_gerais" height="55" name="image4" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_0205010546_0,0,52,null,'image4')" width="60" /></td>	  <td>	   <img src="images/menu_financeiro.gif" id="ctl00_menu_financeiro" height="55" name="image5" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_0205010621_0,-50,55,null,'image5')" width="95" /></td>	  <td>	   <img src="images/menu_orcamento.gif" id="ctl00_menu_orcamento" height="55" name="image6" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_0205010953_0,-180,55,null,'image6')" width="98" /></td>	  <td>	   <img id="menu_cobranca" alt="" height="55" name="image7" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_0205011148_0,-160,55,null,'image7')" src="images/menu_cobranca.gif" width="89" /></td>	  <td>	   <img src="images/spacer.gif" id="ctl00_Img1" height="55" width="1" /></td>	 </tr>	 <tr>	  <td colspan="7" height="40" rowspan="2" style="text-align: right;" width="592">	   <span id="spnAreaData"></span>	   </td>	  <td>	   <img src="images/spacer.gif" id="ctl00_Img2" height="29" width="1" /></td>	 </tr>	 <tr>	  <td>	   <img src="images/sindcomercio_11.gif" id="ctl00_sindcomercio_11" height="11" width="174" /></td>	  <td>	   <img src="images/spacer.gif" id="ctl00_Img3" height="11" width="1" /></td>	 </tr>	</table>	<form name="aspnetForm" method="post" action="cad_servicos.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">	 <table id="Table2" border="0" cellpadding="0" cellspacing="0" width="777">	  <tr>	   <td>		 <fieldset id="ctl00_ContentPlace_Campos">  <legend id="ctl00_ContentPlace_Titulo">Cadastro de Serviço</legend>	  <div id="ctl00_ContentPlace_ParteSuperior" class="Linha">		     </div>  <div id="Div1">   <div id="ParteInferior">				<div class="Linha">	 <div id="ctl00_ContentPlace_ValidationSummary1" style="color:Red;font-family:Arial,Verdana;font-size:X-Small;display:none;"></div>	  <table cellspacing="0" border="0" id="ctl00_ContentPlace_FormView1" style="border-collapse:collapse;"> <tr>  <td colspan="2">			   <div class="Linha">				<div style="width: 80px;">				 <label for="CD_SERVICOTextBox">				  Código:</label><br />		<input name="ctl00$ContentPlace$FormView1$CD_SERVICOTextBox" type="text" maxlength="6" size="6" readonly="readonly" id="ctl00_ContentPlace_FormView1_CD_SERVICOTextBox" class="IDRegistro" />				</div>				<div style="width: 420px;">				 <label for="DS_SERVICOTextBox">				  Descrição:</label><br />				 <input name="ctl00$ContentPlace$FormView1$DS_SERVICOTextBox" type="text" maxlength="80" size="60" id="ctl00_ContentPlace_FormView1_DS_SERVICOTextBox" />				 <span id="ctl00_ContentPlace_FormView1_RequiredFieldValidator2" style="color:Red;visibility:hidden;">*</span>				</div>				<div style="width: 100px;">				 <label for="VL_SERVICOTextBox">				  Valor:</label><br />				 <input name="ctl00$ContentPlace$FormView1$VL_SERVICOTextBox" type="text" maxlength="8" size="10" id="ctl00_ContentPlace_FormView1_VL_SERVICOTextBox" />				 <span id="ctl00_ContentPlace_FormView1_RangeValidator3" style="color:Red;visibility:hidden;">*</span>							</div>							   </div>			   <div class="Linha">				<div style="width: 200px;">				 <label for="DT_ATUALIZACAO_VALORLabel2">				  Data Atualização:</label><br />				 <input name="ctl00$ContentPlace$FormView1$DT_ATUALIZACAO_VALORLabel2" type="text" readonly="readonly" id="ctl00_ContentPlace_FormView1_DT_ATUALIZACAO_VALORLabel2" />				</div>								<div style="width: 80px;">				 <label for="DS_USUARIOLabel3">				  Usuário:</label><br />				 <input name="ctl00$ContentPlace$FormView1$DS_USUARIOLabel3" type="text" readonly="readonly" id="ctl00_ContentPlace_FormView1_DS_USUARIOLabel3" />				</div>				 			</div>												<div id="Controles">							<a id="ctl00_ContentPlace_FormView1_lnkNovo" href="cad_servicos.aspx"><img src="images/botao_novo.gif" style="border-width:0px;" /></a>							<input type="image" name="ctl00$ContentPlace$FormView1$ImageButton1" id="ctl00_ContentPlace_FormView1_ImageButton1" src="images/botao_salvar.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlace$FormView1$ImageButton1", "", true, "", "", false, false))" style="border-width:0px;" />							<a id="ctl00_ContentPlace_FormView1_lnkCancelar" href="cad_servicos.aspx"><img src="images/botao_cancelar.gif" style="border-width:0px;" /></a>							<input type="image" name="ctl00$ContentPlace$FormView1$DeleteButton" id="ctl00_ContentPlace_FormView1_DeleteButton" src="images/botao_excluir.gif" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlace$FormView1$DeleteButton", "", true, "", "", false, false))" style="border-width:0px;" />							<a id="ctl00_ContentPlace_FormView1_lnkConsultar" href="cons_servicos.aspx"><img src="images/botao_consultar.gif" style="border-width:0px;" /></a>						</div					</td> </tr></table>					</div>	   </div>  </div> </fieldset>	   </td>	  </tr>	 </table>			</form>	<table id="Table3" border="0" cellpadding="0" cellspacing="0" width="776">	 <tr>	  <td height="56" style="background-image: url(images/rodape_repeat.gif); background-repeat: repeat-x; text-align: center;" width="6">	    </td>	  <td class="Rodape" style="background-image: url(images/rodape_repeat.gif); background-repeat: repeat-x; text-align: center;">	   © Copyright 2007 - Sindcomércio - Todos os direitos reservados<br />	   Desenvolvido pela <a href="[url="http://www.rcs.srv.br"]http://www.rcs.srv.br">RCS[/url] Informática</a>	  </td>	 </tr>	</table>   </td>  </tr> </table></body></html>

E o arquivo CSS

/******************************************************	ELEMENTOS******************************************************/* {	font-family: Arial, Verdana;	font-size: 10pt;}#Formulario div{	float: left;}legend{	font-weight: bold;	text-transform: uppercase;	padding-bottom: 10px;	vertical-align: middle;}label{}input[type=text]{	border: solid 1px #a7bad3;	background-image: url(/Sincovaco/images/fundo_input.gif);}input[type=password]{	border: solid 1px #a7bad3;	background-image: url(/Sincovaco/images/fundo_input.gif);}/******************************************************	CLASSES******************************************************/.Linha{	width: 100%;	float: left;	padding-bottom: 10px;}.IDRegistro{	color: Red;}.QuadroFeedback{	width: 450px;	background-color: #fffff2;	text-align: center;	border-right: #edeeef 1px solid;	border-top: #edeeef 1px solid;	border-left: #edeeef 1px solid;	border-bottom: #edeeef 1px solid;}.BotaoPesquisar{	vertical-align: bottom;}.InputSemFoco{	border: solid 1px #a7bad3;	background-image: url(/Sincovaco/images/fundo_input.gif);}.InputComFoco{	border: solid 1px #f7e291;	background-image: url(/Sincovaco/images/fundo_input_foco.gif);}.Grid th{	font-weight: bold;}.Grid th a{	text-decoration: none;	border: solid 1px #5D7B9D;}.Grid th a:hover{	text-decoration: none;	color: #F7F6F3 !important;	border: dashed 1px white;}.Grid td{	/*font-family: Arial, Verdana;	font-size: 10pt;*/}.SemEfeitoLink{	border: none !important;}.SemEfeitoLink:hover{	border: none !important;}.MensagemFeedback{	/*font-family: Arial, Verdana;	font-size: 10pt;*/}.THMENU{	background-color: #5D7B9D;	color: Black !important;}.TDMENU{	background-color: #F7F6F3;	color: Black !important;}.TDITEM{	background-color: #F7F6F3 !important;}.TDITEM A{	color: #3366CC !important;	text-decoration: none;}/******************************************************	ELEMENT IDs******************************************************/#Controles{	position: relative;	float:left;	padding-top: 10px;}#cabecalho{	font-weight: bold;	color: Blue;	height: 70px;	vertical-align: middle;	text-align: center;	width: 770px;}#corpo{	width: 770px;}#rodape{	width: 770px;}

Hunter_ · Abril 18, 2007

Posta um link, códigos enormes como esse dificultam muito, pois, nem todo mundo tem tempo nem saco de ta lendo code. Como disse, poste o código e ajude-nos a te ajudar...

Juliano.net · Abril 18, 2007

Desculpe, e ao mesmo tempo obrigado brother.Desculpe por postar tal código e obrigado pela resposta. Mas infelizmente não é um projeto que está executando na web, então não tem como postar uma URL.

Juliano.net · Abril 19, 2007

Galera, descobri o problema.Quando temos uma tag <link> fazem referência à um CSS externo e depois temos uma tag <style> definindo novos estilos, a tag <style> substitui as definições do CSS externo.

Hunter_ · Abril 19, 2007

É por isso que são chamadas de CSS (Cascading Style Sheets - Folhas de Estilo em Cascata) pois os estilos obedecem uma ordem de precedência, quanto mais próximo ao elemento mais "forte" será a inerência desse estilo sobre o mesmo. Complementando o que você descobriu, se você no caso, tiver um estilo inline, escrito diretamente no elemento html esse estilo será mais forte do que o estilo declarado na folha de estilos externa, que o declarado no body.Algo ComoFolha de Estilo Externa >> Estilo no Body >> Estilo inline

Entrar

Arquivado

Mesmo design (HTML + CSS) mas visualização diferente

Recommended Posts

Juliano.net 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hunter_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Juliano.net 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Juliano.net 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hunter_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

comando like (Mysql) no php

mostrar quanto tempo foi postado um conteudo

lendo RSS com PHP mostrando a imagem de preview

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante