Si quito el DocType funciona!! :|

T_O_N_N_Y · #1 (**permalink**) 23/06/2008, 12:39

Bueno, pues desde hace unos días llevo un quebradero de cabeza.

Trato de conseguir esto:

En firefox, obviamente, me lo hace bien (hasta el navegador de mi teléfono móvil lo visualiza bien), pero con IE6 y 7 me lo muestra así:

Dejo aquí el código (he usado lo que phpbb3 utiliza):

Código HTML:

<!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" lang="es" xml:lang="es">
<head>
	<title>probando</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<style type="text/css">


	body {	
	margin: 0px;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 70%;padding: 0px;
	background: #4A9BEA;
}
#general {
	padding:5px;
	background: #FAFAFA;
	border: #83ACE9 solid 1px;
	width:940px;
	margin:auto;
	margin-top:5px;
	overflow:hidden;
	}
.contenido {
	text-align:justify;
	background: #E4F0FF;
	width:720px;
	float:left;
	margin-bottom:10px;
	padding: 5px;
	border: #83ACE9 solid 1px;
	color: #000000;
}	
	
	dl.details dt {
	float: left;
	clear: left;
	width: 30%;
	text-align: right;
	color: #000000;
	display: block;
}

dl.details dd {
	margin-left: 0;
	padding-left: 5px;
	margin-bottom: 5px;
	color: #105BAC;
	float: left;
	width: 65%;
}


*:first-child+html dl.details dd {
	margin-right: 30%;
	float: none;
}

* html dl.details dd {
	margin-right: 30%;
	float: none;
}

/* Correctly clear floating for details on profile view */
* html dl.details dd {
	margin-left: 30%;
	float: none;
}
*:first-child+html dl.details dd {
	margin-left: 30%;
	float: none;
}

</style>
</head>
<body>
<div id="general">

<div class="contenido">
	<dl class="details">
		<dt>Usuario:</dt><dd><span style="font-weight:bold;">T_O_N_N_Y</span></dd>
		<dt>Ubicación:</dt>
		<dd>Quart de Poblet (València)</dd>
		<dt>Cumpleaños:</dt> 
		<dd>5-11-1989, 18 años</dd>
		<dt>Ocupación:</dt> 
		<dd>Estudiante de ingeniería de telecomunicaciones en la UPV</dd>
		<dt>Intereses:</dt> 
		<dd>Disfrutar la vida en general bla bla</dd>
	</dl>
</div>
</div>
</body>
</html>

Ese código funciona en FF perfectamente, pero para que funcione en IE debo quitar el DocType, cosa que no quiero hacer.

A ver si sabéis dónde puede estar el problema

Muchisisisisisismas gracias!

ArturoGallegos · #2 (**permalink**) 23/06/2008, 13:13

mmm me puedes decir para que es esto

*:first-child+html dl.details dd {
margin-right: 30%;
float: none;
}

no habia visto css asi, y ese fracmento es el que ami me parece raro quitandolo deve funcionar pero, como no se para que es no te puedo decir que lo quites ya con toda la confianza

prueba crear un respaldo quitas ese fracmento que puse y echalo a andar aver como te va

hCanté · #3 (**permalink**) 23/06/2008, 13:24

Hola Ag666

T_O_N_N_Y esta utilizando selectores adyacentes

Saludos,

ArturoGallegos · #4 (**permalink**) 23/06/2008, 13:30

mmm grax hCanté por el dato de que es eso jeje ya mismo toy biendo mas info al respecto en dado caso yo tengo el IE7 y quitando ese codigo que mencione se ve como el lo quiere

mmm a primera instancia de mi consulta sobre esos selectores encontre esto

(Desafortunadamente, el navegador Internet Explorer 6 y sus versiones anteriores no soportaban este tipo de selectores avanzados, por lo que su uso no era común hasta hace poco tiempo.)

abra que ver la compatiblidad de eso tambien y si lo puede reemplazar por algo mas jejej pero bueno yo voy a echarme una buena lectura al respecto ahorita me quedo corto de ideas a aportar

T_O_N_N_Y · #5 (**permalink**) 23/06/2008, 15:01

El código es tal cual el que usa phpbb3 para mostrar el perfil, no llego a entender el por qué de que al quitar el DocType sí que funcione en IE, no le veo ninguna lógica, podéis hacer las pruebas que creáis oportunas con el código que puse a ver si veis algo raro.

También he intentado cambiar de transitional a strict (phpbb3 usa strict) y tampoco funciona.

Un saludo y muchas gracias de anteman

Mikmoro · #6 (**permalink**) 23/06/2008, 16:11

Yo imagina que el problema puede venir por aquí:

estas usando para los dd por un lado

dl.details dd {
margin-left: 0;
padding-left: 5px;
margin-bottom: 5px;
color: #105BAC;
float: left;
width: 65%;
}

y por otro sólo para IE

* html dl.details dd {
margin-right: 30%;
float: none;
}

* html dl.details dd {
margin-left: 30%;
float: none;
}

Y claro, el dd no cabe en la línea y se salta a la siguiente.

¿Por qué FF lo hace bien? por que el exceso de márgenes lo usas con el hack para IE de *html, que FF no entiende.

Mikel.

T_O_N_N_Y · #7 (**permalink**) 23/06/2008, 23:51

Buenas Mikmoro, he probado a quitarlos, a cambiarlos, etc, pero sigue sin aparecer correctamente.

Por favor, podrías probar el código en el probador de scripts ?

Un saludo y muchisimas gracias de antemano

Mikmoro · #8 (**permalink**) 24/06/2008, 00:05

Prueba con esto:

Cita:

<!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" lang="es" xml:lang="es">
<head>
<title>probando</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
margin: 0px;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 70%;padding: 0px;
background: #4A9BEA;
}
#general {
padding:5px;
background: #FAFAFA;
border: #83ACE9 solid 1px;
width:940px;
margin:auto;
margin-top:5px;
overflow:hidden;
}
.contenido {
text-align:justify;
background: #E4F0FF;
width:720px;
float:left;
margin-bottom:10px;
padding: 5px;
border: #83ACE9 solid 1px;
color: #000000;
}
dl.details dt {
float: left;
width: 30%;
text-align: right;
color: #000000;
display: block;
}
dl.details dd {
margin-left: 0;
padding-left: 5px;
margin-bottom: 5px;
color: #105BAC;
float: left;
width: 65%;
}
</style>
</head>
<body>
<div id="general">
<div class="contenido">
<dl class="details">
<dt>Usuario:</dt><dd><span style="font-weight:bold;">T_O_N_N_Y</span></dd>
<dt>Ubicación:</dt>
<dd>Quart de Poblet (València)</dd>
<dt>Cumpleaños:</dt>
<dd>5-11-1989, 18 años</dd>
<dt>Ocupación:</dt>
<dd>Estudiante de ingeniería de telecomunicaciones en la UPV</dd>
<dt>Intereses:</dt>
<dd>Disfrutar la vida en general bla bla</dd>
</dl>
</div>
</div>
</body>
</html>

Mikel.

T_O_N_N_Y · #9 (**permalink**) 24/06/2008, 05:56

Cita:

Iniciado por Mikmoro

Prueba con esto:

Mikel.

Muchisiisisisisisisimas gracais!

Muy buena respuesta! ;)

Un saludo!