Aplicacion css todos vs Opera... ¿?

tistklehoff · #1 (**permalink**) 21/08/2009, 04:17

Hola a todos.

Estoy experimentando cierto problema bastante extraño.

Viendo todos los consejos que dais en estos foros, de los que me he vuelto asiduo, decidí probar a usar una regla css para body, donde defino la fuente y el tamaño de texto para toda la página.

Como parece que no me la cogía bien, busqué y encontré (gracias S. Google) en estos mismos foros, que incluyendo las líneas

Código:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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">

. . . y lo que sigue

el problema se solucionaba. Y ciertamente, así ha sido para IE, FF y Chrome. Sin embargo, Opera se empeña en quitarme todos los estilos de la página (la regla BODY está la primera en la CSS). Sin embargo, si quito estas líneas que he añadido, Opera lo muestra perfectamente, incluyendo el estilo de texto definido en el body, pero el resto de los navegadores pasan del estilo, en particular, pasan del tamaño de la fuente, porque el color lo cambian, el tipo de letra también, la negrita sin problemas...

La versión de Opera que uso es la 9.64. ¿Hay alguna forma de que Opera admita esto sin tener que empezar a meter demasiados atributos class por ahí?

Muchas gracias a todos.

Un saludo.

Mikmoro · #2 (**permalink**) 21/08/2009, 04:46

Antes de nada, prueba eliminando las declaración de XML:

<?xml version="1.0" encoding="ISO-8859-1"?>

y dejando que empiece directamente con el DOCTYPE.

tistklehoff · #3 (**permalink**) 24/08/2009, 06:01

Hola.
Gracias por la respuesta tan rápida.

Hoy he estado mirando esto y sigue haciendo lo mismo.

<!DOCTYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Strict //EN" "h t t p :// w w w. w3 .o r g /TR /xhtml1 /DTD /xhtml1 -strict. dtd">
<html xmlns="h t t p ://w w w . w3 .org/ 1999/ xhtml">

Esta es mi cabecera ahora. Sigue funcionando en todos los navegadores que he probado menos en el Opera.

¿Me falta alguna otra cosa o soy un paquete y he hecho algo mal?

Un saludo y gracias.

kseso? · #4 (**permalink**) 24/08/2009, 07:14

¿Puedes poner un enlace a la página en cuestión?

tistklehoff · #5 (**permalink**) 25/08/2009, 05:14

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;}

kseso? · #6 (**permalink**) 25/08/2009, 05:33

Tu código en el html:

Cita:

cambia:<link rel="stylesheet" type="text/css" href="./css/mystyle.css">

Un saludo

tistklehoff · #7 (**permalink**) 25/08/2009, 06:38

Gracias.

Una tontería que me ha costado un par de días de insomnio...

Todo perfecto.

Un saludo.

jomaruro · #8 (**permalink**) 25/08/2009, 15:38

Hola:

Cita:

Iniciado por tistklehoff

Cambios apreciables: Una línea azul debajo del título

simplemente debes cerrar la etiqueta link, la tienes así

Cita:

Iniciado por tistklehoff

debes ponerla así

Código:

<link rel="stylesheet" type="text/css" href="./css/mystyle.css" />

Saludos.