Problema con el DOCTYPE

Myakire · #1 (**permalink**) 06/04/2009, 16:32

Gracias de antemano por su ayuda

Tengo un estilo de listas que cuando lo hice funcionó bien con el DOCTYPE que viene por default en mi editor (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">), fue error mio no ajustar primero este dato en el editor, pero bueno, el problema es que al incorporarlo al resto de las páginas con otro DOCTYPE (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">) ya no funciona como lo espero, el bloque contenedor no crece conforme el texto. He estado investigando al respecto para encontrar el estilo que debo cambiar pero he perdido ya mucho tiempo en esto y no creo estar cerca.

Alguien con más experiencia pudiera darme alguna orientación, por favor?

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
<!--
#venContenedor{
  font:100% Arial,Tahoma,Verdana, sans-serif;
	clear:both;
	margin-left: -40px;
}
.ventajaFoto{
	 display:block; 
	 height: 100px;
	 width: 100px;
	 border: 1px;
	 border-style: dotted;
   padding:10px 10;
	 float:left;
}

.venCajaTextos{
	 border: 1px;
	 border-style: dotted;
	 height: 100px;
	 margin-left:110px;
}

ol {
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
   margin:5;

}
ol li {
   padding: 2px;
	 margin-top: 5px;
 	 width:100%;
	 float:left;
}

.venImpar{
   background:#fff;

}

.venPar{
background:#ffcc00;
}

.venTitulo{
font-size:20px;
font-style:normal;
font-weight:bold;
}

-->
</style>

</head>
<body>
<div style="width:50%">
             <div id="venContenedor">
             <ol>
            	  <li class="venPar"><div class="ventajaFoto" style="background:url('images/imagen')"></div><div class="venCajaTextos"><div class="venTitulo">Encabezado</div><div class="venDescripcion">Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion v Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion v Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion </div></div></li>
            	  <li class="venImpar"><div class="ventajaFoto" style="background:url('images/imagen')"></div><div class="venCajaTextos"><div class="venTitulo">Encabezado</div><div class="venDescripcion">Descripcion</div></div></li>
            	  <li class="venPar"><div class="ventajaFoto" style="background:url('images/imagen')"></div><div class="venCajaTextos"><div class="venTitulo">Encabezado</div><div class="venDescripcion">Descripcion</div></div></li>
            	  <li class="venImpar"><div class="ventajaFoto" style="background:url('images/imagen')"></div><div class="venCajaTextos"><div class="venTitulo">Encabezado</div><div class="venDescripcion">Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion v Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion v Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion DescripcionDescripcion Descripcion Descripcion Descripcion Descripcion Descripcion v Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion Descripcion</div></div></li>
             </ol>
             </div>	
						</div>

</body>
</html>

willyfc · #2 (**permalink**) 06/04/2009, 19:11

lo que pasa es que estás dando un alto fijo de 100px a la caja que contiene texto y a eso solo ie obecece, corrige esta clase:

Código:

.venCajaTextos{
	 border: 1px;
	 border-style: dotted;
	 min-height:100px;
	 height:auto!important;
	 height: 100px;
	 margin-left:110px;
}

por si acaso !important no es hack, espero te sirva.

Myakire · #3 (**permalink**) 06/04/2009, 20:05

excelente !!!

Tienes idea de lo que me he tardado leyendo decenas de páginas y haciendo muchas pruebas antes de preguntar esto??!!!

Antes de preguntar primero investigo mucho, y tu respuesta (sencilla para el que sabe) me hace pensar que quizá debo de modificar mi comportamiento y preguntar un poco más rápido.

Te lo agradezco mucho!

Te debo una cerveza

willyfc · #4 (**permalink**) 07/04/2009, 07:19

Cita:

Iniciado por Myakire

Te lo agradezco mucho!

Te debo una cerveza

, no hay problema, cuando quieras, haber si la cerveza la pones en un rar y me la envías por mail

.

fue un placer

jomaruro · #5 (**permalink**) 07/04/2009, 13:52

Cita:

Iniciado por willyfc

, no hay problema, cuando quieras, haber si la cerveza la pones en un rar y me la envías por mail

.

¡¡Buen sistema!!, nunca lo había pensado.

Saludos.

Mikmoro · #6 (**permalink**) 07/04/2009, 16:27

Dos en zip por aquí en la mesa del fondo

Triby · #7 (**permalink**) 07/04/2009, 16:31

Una en <div id="barra"> por favor

Myakire · #8 (**permalink**) 07/04/2009, 18:33

Empacar la cerveza no tenía mucho problema

... pero no me pidas que maquete una por ahí si no

Bueno, pago mi deuda:

willyfc · #9 (**permalink**) 07/04/2009, 18:55

no te preocupes, si te cuesta maquetar yo te ayudo

, y me la llevo antes que Mik y triby vengan

.

pao01 · #10 (**permalink**) 07/04/2009, 20:40

Una solita? Somos muchos por acá

Myakire · #11 (**permalink**) 07/04/2009, 22:18

Una respuesta = una cerveza

seoista · #12 (**permalink**) 08/04/2009, 00:18

¡¡¡ CERVEZAAAAA !!!