Tema: Aplicacion css todos vs Opera... ¿?
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 25/08/2009, 05:14
tistklehoff
 
Fecha de Ingreso: agosto-2009
Mensajes: 67
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Aplicacion css todos vs Opera... ¿?
Hola.


La página es de la intranet corporativa, así que no te puedo dar un enlace. Aquí tienes el código. El CSS está un poco desordenado, no os asusteis mucho...


Cambios apreciables: Una línea azul debajo del título y el formato de la tabla al completo, por ejemplo.

Muchas gracias.

Un saludo.

Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h t t p : / / w w w . w 3 . o r g / T R / x h t m l 1 / D T D / x h t m l 1 - s t r i c t . d t d">
<html xmlns="h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / x h t m l">
	<head>
		<title>Enter the title of your HTML document here</title>
		<link rel="stylesheet" type="text/css" href=".\css\mystyle.css">
	</head>
	<body>
	<div id="contenido" style="background-color: white;">
		<div id="CurrentAccountdiv" style="display: block;">
			<table border="0" cellpadding="0" cellspacing="0" width="100%">
				<tbody>
					<tr>
						<td class="background_tablet titulo_principal linea_inferior">
							<font class="link_text_bold">
								<span>Datos del Perfil</span>
							</font>
						</td>
					</tr>
				</tbody>
			</table>
			<div id="ayuda" class="text11" align="right">
				<a href="#" target="popup" onclick='window.open(this.href, this.target, "height=768,width=1024,left=50,top=50,resizable=yes,scrollbars=yes"); return false;'>
					<img src=".\img\cuestion_blue.gif" alt="Ayuda" title="Ayuda" border="0"/>
				</a>
			</div>
		</div>
		<div style="padding: 10px 5px 10px 25px; font-style:">
         <div style="width: 100%;">
				<table id="Datos_Socio_Superior">
					<thead>
						<tr>
							<th>
								<span>
									<img src=".\img\marca.gif" border="0" width="4" height="8"/>
									&nbsp;
									C&oacute;digo TIPI
								</span>
							</th>
							<th>
								<span>
									<img src=".\img\marca.gif" border="0" width="4" height="8"/>
									&nbsp;
									C&oacute;digo de perfil
								</span>
							</th>
							<th>
								<span>								
								<img src=".\img\marca.gif" border="0" width="4" height="8"/>
									&nbsp;
									Tipo de perfil</span>
							</th>
							<th>
								<span>
									<img src=".\img\marca.gif" border="0" width="4" height="8"/>
									&nbsp;
									Nombre y apellidos
								</span>
							</th>
							<th>
								<span>
									<img src=".\\img\marca.gif" border="0" width="4" height="8"/>
									&nbsp;
									Forma de Pago
								</span>
							</th>
							<th>
								<span>
									<img src=".\\img\marca.gif" border="0" width="4" height="8"/>
									&nbsp;			
									Pr&eacute;stamo
								</span>
							</th>
							<th>
								<span>
									<img src=".\\img\marca.gif" border="0" width="4" height="8"/>
									&nbsp;
									Retenci&oacute;n
								</span>
							</th>
						</tr>
					</thead>
					<tbody>					
						<tr>
							<td>
								0000000000
							</td>
							<td>
								0000
							</td>
							<td>
								Consultor
							</td>
							<td>
								Socio 21909
							</td>
							<td>
								Transferencia
							</td>
							<td>
								no
							</td>
							<td>
								no
							</td>
						</tr>
					</tbody>
				</table>
				<table id="Datos_Socio_Inferior" class=" TeseoFormDecorated">
					<tbody>			
						<tr>
							<th>
								<span>
									<img src=".\\img\marca.gif" border="0" width="4" height="8"/>
									&nbsp;
									Informacion del Perfil
								</span>
							</th>
							<th>
								<span>
									<img src=".\\img\marca.gif" border="0" width="4" height="8"/>
									&nbsp;							
									Desglose
								</span>
							</th>
							<th width="15%" rowspan="2">
								<fieldset class="marcoBorde">
									<legend class="marcoTituloAdm">Código Perfil</legend>
									<span style="white-space: nowrap; outline: 0;" >
                              <input id="lnCodAdmtdToFind" name="lnCodAdmtdToFind" class="inputTextShort" onkeypress="javascript:eventOnKeyIntro()" type="text" align="left"/>
                              <a href="#" class="img_link"><img style="width: 20px; height: 20px; border: 0px solid; padding:0px; margin:0px;"  src=".\img\detalle.gif" alt="Saldos Administrado [ENTER]" title="Saldos"/></a>
                           </span>
								</fieldset>			
							</th>
						</tr>
						<tr>
							<td>
								Consultor con Filiales.
							</td>
							<td>
								<input id="strIndBusquedaNivel2" name="strIndBusquedaNivel2" value="on" checked="checked" onclick="javascript:eventOnChangeBox()" type="checkbox"/>
							</td>
						</tr>
					</tbody>
				</table>
			</div>				
		</div>	
<!-- ___________________________________________________________________________________________________________ -->
<!-- _____  LINEA DE SEPARACION HORIZONTAL ___________________________________________________________________ -->
<!-- ___________________________________________________________________________________________________________ -->
		<hr/>
		<br/>
		<!-- ESTE DIV VA A CONTENER LA INFORMACION DE LAS TABLAS -->
		
		<div id="Datos_Cuerpo_Informe" style="width: 100%;"> 
			<div>
				<!-- ___________________________________________________________________________________________________________ -->
				<!-- _____  TABLA DE DE TOTALES____ ____________________________________________________________________________ -->
				<!-- ___________________________________________________________________________________________________________ -->
				<table>
					<caption>Total</caption>
					<thead>
						<tr>
							<th class=" recuadro_tablas no_partir_contenido">
								<span>
									<img src=".\img\marca.gif" valign="middle" border="0" width="4" height="8"/>
									&nbsp;
									Producto
								</span>
							</th>
							<th class=" recuadro_tablas no_partir_contenido">
								<span>
									<img src=".\img\marca.gif" valign="middle" border="0" width="4" height="8"/>
									&nbsp;
									Margen Disponible
								</span>
							</th>
						</tr>
					</thead>
						<!-- ___________________________________________________________________________________________________________ -->
						<!-- _____  LINEA DE DATOS DE LA TABLA DE TOTALES _____________________________________________________________ -->
						<!-- ___________________________________________________________________________________________________________ -->
					<tbody>						
						<tr>
							<td class=" recuadro_lateral_tablas no_partir_contenido">
								<span>
									<a href="#" class="text">
										Margen Total
									</a>
								</span>
							</td>
							<td class=" recuadro_lateral_tablas no_partir_contenido" title="Mostrar Movimientos Partidas Abiertas" align="right"><span>
								<a href="#" class="text">
									0,00
								</a>
							</span>
						</td>
						</tr>
						<tr class="tablet_off">
							<td class=" recuadro_lateral_tablas no_partir_contenido">
								<span>
									<a href="#" class="text">
										Margen Parcial 1
									</a>
								</span>
							</td>
							<td class=" recuadro_lateral_tablas no_partir_contenido" title="Mostrar Movimientos Partidas Abiertas" align="right"><span>
								<a href="#" class="text">
									0,00
								</a>
							</span>
						</td>
						</tr>						
					</tbody>
				</table>
			</div> <!-- fin div de la tabla de totales -->
		</div>	
		<div>	<!-- DIV de pie de página-->
		</div>
	</body>
</html>


CSS

Código: 
BODY	{
   text-align: left;
   background-color:#EEE;
   font: 10px normal Arial, Verdana, sans-serif;
}

CAPTION {
	white-space: nowrap; 
	text-align:left; 
	padding: 10px 10px;
   font-size: 110%;
   font-weight: bold;
}

#contenido{
	min-width: 850px; width: 100%;
	width: expression(document.body.clientWidth < 850? "850px" : "auto");
        font: 10px normal Arial, Verdana, sans-serif;
}

#Datos_Socio_Superior, #Datos_Socio_Inferior {
	width: 100%; font: 10px normal Arial, Verdana, sans-serif;
}

#Datos_Socio_Superior th,  #Datos_Socio_Inferior th {
	white-space: nowrap; vertical-align: middle;
	padding: 3px; text-align: left;
}

 #Datos_Socio_Superior td , #Datos_Socio_Inferior td{
	white-space: nowrap; vertical-align: middle;
	padding: 3px 18px;
}


#Datos_Cuerpo_Informe table {
	margin: 10px; cellpadding: 3px; cellspacing: 0px; 
	border-collapse: collapse; border: 1px solid #A6B0F8;
	text-align: left; font: 10px normal Arial, Verdana, sans-serif;
}

#Datos_Cuerpo_Informe table td, #Datos_Cuerpo_Informe table th{
	padding: 3px 5px; 
}

#Datos_Cuerpo_Informe table th{
	background-color: #A6B0F8;
}

th.no_partir_contenido, td.no_partir_contenido {
	white-space: nowrap;
}

td.linea_inferior {
	border-bottom: 1px solid #0066CC;
}

td.recuadro_lateral_tablas {
	border-left: 1px solid #A6B0F8; border-right: 1px solid #A6B0F8;
}

.recuadro_tablas {
	border: 1px solid #A6B0F8;
}


.titulo_principal {
	white-space: nowrap; padding-left: 28px; height: 23px; 
}

.title {font-family: Arial,Verdana;font-size: 1.3em;color: #474747;text-decoration: none;}
.text11 {font-family: Arial,Verdana;font-size: 1.1em;color: #000000;text-decoration: none;font-weight:bold;}

.url_text {font-family: Arial,Verdana;font-size: 1.1em;color: #474747;text-decoration: none;}

.text {font-family: Arial,Verdana;font-size: 10px;color: #000000;text-decoration: none;font-weight:bold;}

td a {color: #000;text-decoration: none;outline:0;padding:0px;margin:0px; width: 100%; height: 100%; display: block; }

a.text:active, a.text:focus, a.text:link, a.text:visited  {font-weight:bold;}
a.text:hover   {font-weight:bold; color: #CC33DD}

.tablet_off {background-color:#E0E0E1;}
.tablet_on	{background-color:#FFF;}