Incompatibilidad IE ancho capas

alamarcheta · #1 (**permalink**) 01/02/2007, 11:11

Muy buenas. Os paso un código para ver si me podeis echar una mano con los CSS. El código que he diseñado se me ve bien en todos menos en el pu.. IE y la capa en cuestión es la barraTitulo. ¿Podrias sin modificar las etiquetas html y solo con CSS hacer que se viera igual que en firefox,opera,... en IE esta capa?
Me interesa que siga asi la estructura porque todo el texto que le meta a textoTitulo el fondo de la misma me lo baja y el pie se ajusta al final.
Yo es que le dado mil vueltas y ya no se por donde tirar.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {background-color:#00FF00;margin: 0px; padding: 0px;}
#contenedor {PADDING-RIGHT: 0px; PADDING-LEFT: 0px;MARGIN:15px auto; WIDTH: 754px; height:31px; POSITION: relative; voice-family:inherit; background-color:#FF0000;z-index:0}
#fondo{ background-color:#FFFFFF;width:758px; height:400px; position:absolute; top:31px; left:-2px; z-index:0; padding:0}
#cabeceraTitulo{ background-color:#FF9900;position:absolute;top:229px;left:136px;width:450px;height:23px;z-index:3}
#barraTitulo{ background-color:#CC0000; position:absolute; top:23px; left:0px; width:450px; height:auto;z-index:3}
#textoTitulo{padding:0px 0px 0px 10px; width:420px; position:relative; top:10px; z-index:4;font-size:11px}
#pie{position:relative; background-color:#0000FF; background-repeat:no-repeat;width:758px;height:32px;top:20px;left:-138px; padding-bottom:15px; color:#CCCCCC}
</style>

</head>
<body>

<div id="contenedor">

	<div id="fondo"></div>

	<div id="cabeceraTitulo">
	<div id="barraTitulo">

		<div id="textoTitulo">
		<H1>Novedades en Windows   XP</H1>
		<p>Windows&nbsp;XP incluye muchas caracter&iacute;sticas nuevas, programas mejorados y herramientas.   Consulte las novedades; d&eacute; un paseo entretenido; aprenda acerca de los programas   que contiene Windows&nbsp;XP, incluidos los sistemas, accesorios y programas de   comunicaciones y entretenimiento. Lea art&iacute;culos que contienen descripciones   completas para realizar tareas clave desde el principio hasta el final. Consulte   en el glosario t&eacute;rminos que no le resulten familiares. Conozca las ventajas de   registrar la copia de Windows&nbsp;XP en l&iacute;nea.
		</p>
		</div>

		<div id="pie"></div>

		</div>
	
	</div>

</div>
</body>
</html>

Gracias y saludos.

Mikmoro · #2 (**permalink**) 01/02/2007, 17:57

Buenas. Esto te puede servir, pero para mi es un apaño bastante feo.

Código:

  <style type="text/css">
body { margin: 0px;
padding: 0px;
background-color: rgb(0, 255, 0);
}
#contenedor { margin: 15px auto;
padding-right: 0px;
padding-left: 0px;
width: 754px;
height: 31px;
position: relative;
voice-family: inherit;
background-color: rgb(255, 0, 0);
z-index: 0;
}
#fondo { padding: 0pt;
background-color: rgb(255, 255, 255);
width: 758px;
height: 400px;
position: absolute;
top:31px;
left: -2px;
z-index: 0;
}
#cabeceraTitulo { background-color: rgb(255, 153, 0);
position: absolute;
top: 229px;
left: 136px;
width: 450px;
z-index: 3;
height: 23px;
}
#barraTitulo { background-color: rgb(204, 0, 0);
top: 23px;
height: auto;
z-index: 3;
width: 450px;
position: absolute;
right:0px;
margin-left:138px;
}
#textoTitulo { padding: 0px 0px 0px 10px;
width: 420px;
top: 10px;
z-index: 4;
font-size: 11px;
position: relative;
}
#pie { position: relative;
background-color: rgb(0, 0, 255);
background-repeat: no-repeat;
height: 32px;
top: 20px;
left: -138px;
margin-right: -308px;
padding: 15px;
color: rgb(204, 204, 204);
}
  </style>

Mikel.

Ruben_JD · #3 (**permalink**) 01/02/2007, 20:38

No se si ya lo solucionaste, mira este codigo es un poco más corto y funciona en IExplorer, Firefox, Opera

Código HTML:

<html>
<head>
    <!-- Created by TopStyle Pro -->
    <title></title>    
</head>
<style type="text/css">
<!--
body{ background-color: #00FF00; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }
h1{ background-color: #CC0000; color: #FFFFFF; margin: 0; text-align: center; }
#cabecera{ background-color: #FF9900; margin: 0 auto; padding: 0; width: 450px; }
#cabecera span{ display: block; font-size: 12px; margin: 0; padding: 10px; text-indent: 10px; }
#contenedor{ background-color: #FFFFFF; margin: auto; width: 754px; }
#pie{ background-color: #0000FF; height: 32px; margin: auto; width: 754px; }
#superior{ background-color: #FF0000; height: 31px; margin: auto; width: 754px; }
-->
</style>
<body>
<div id="contenedor">
<div id="superior"></div>
    <div id="cabecera">
        <H1>Novedades en Windows   XP</H1>
                <span>Windows&nbsp;XP incluye muchas caracter&iacute;sticas nuevas, 
                programas mejorados y herramientas.   Consulte las novedades; 
                d&eacute; un paseo entretenido; aprenda acerca de los programas   
                que contiene Windows&nbsp;XP, incluidos los sistemas, accesorios y 
                programas de   comunicaciones y entretenimiento. Lea art&iacute;culos 
                que contienen descripciones   completas para realizar tareas clave 
                desde el principio hasta el final. Consulte   en el glosario t&eacute;rminos 
                que no le resulten familiares. Conozca las ventajas de   registrar la 
                copia de Windows&nbsp;XP en l&iacute;nea.</span>
            
    </div>
    <div id="pie"></div>
</div>
</body>
</html>

espero que te sea de utilidad.

alamarcheta · #4 (**permalink**) 02/02/2007, 03:16

Voy a probar y ya os cuento. Gracias