Foros del Web » Creando para Internet » CSS »

Incompatibilidad IE ancho capas

Estas en el tema de Incompatibilidad IE ancho capas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/02/2007, 11:11
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
Pregunta Incompatibilidad IE ancho capas

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.

Última edición por alamarcheta; 01/02/2007 a las 11:24
  #2 (permalink)  
Antiguo 01/02/2007, 17:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Incompatibilidad IE ancho capas

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.
  #3 (permalink)  
Antiguo 01/02/2007, 20:38
Avatar de Ruben_JD  
Fecha de Ingreso: diciembre-2003
Ubicación: Quito-Ecuador
Mensajes: 218
Antigüedad: 14 años
Puntos: 7
Re: Incompatibilidad IE ancho capas

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.
__________________
RubénJ. Regresando al foro despues de un par de años. A preguntar más de las novedades del foro.
  #4 (permalink)  
Antiguo 02/02/2007, 03:16
Avatar de alamarcheta  
Fecha de Ingreso: mayo-2005
Ubicación: Isla Mêlée
Mensajes: 502
Antigüedad: 12 años, 7 meses
Puntos: 1
Voy a probar y ya os cuento. Gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:49.