Foros del Web » Creando para Internet » CSS »

Buscando un hack para IE

Estas en el tema de Buscando un hack para IE en el foro de CSS en Foros del Web. Buenos días. Vereis: Estoy trabajando en una página web y he visto que funcionaba perfectamente en Firefox. Pero cuando la probé en Internet Explorer descubrí ...
  #1 (permalink)  
Antiguo 18/07/2009, 11:20
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 11 años, 2 meses
Puntos: 0
Buscando un hack para IE

Buenos días.

Vereis: Estoy trabajando en una página web y he visto que funcionaba perfectamente en Firefox. Pero cuando la probé en Internet Explorer descubrí dos pequeños fallos: La imagen de fondo no empezaba arriba del todo ni a la izquierda del todo y una div se movía de su sitio.

He probado todo tipo de hacks e historias y no he encontrado manera de arreglarlo, así que no me queda más remedio que pediros ayuda.

He subido la página con las imágenes y todo para verlo mejor a Megaupload:

h**p://megaupload.com/?d=CQ3DFA52 <= (No puedo ponerlo completo por el filtro antispam. Me he tomado la libertad de modificarlo por no ser spam. Lo mismo he hecho con los demás enlaces)

El código CSS es:

Código:
/*decoracion y contenedor*/

.tira_up {
width:100%;
height:117px;
background-image:url(imgs/tira_rojo.gif)
}
.contenedor_todo {
width:966px;
background-color:bb8f8f;
vertical-align:middle;
}

/*borde superior de la tabla*/

.contenedor_up {
width:966px;
height:17px;
background-color:bb8f8f;
border:0px;
}
.borde_superior {
width:330px;
height:17px;
float:left;
background-image:url(imgs/borde_superior.gif);
border:0px;
}

/*fila de menu de idiomas*/

.contenedor_menu {
width:966px;
height:46px;
background-image:url(imgs/tira_medio.gif)
}
.logo1 {
width:276px;
height:46px;
float:left;
}
.menu_izq {
width:55px;
height:46px;
float:left;
background-image:url(imgs/menu_izq.gif);
}
.menu_tira {
width:556px;
height:46px;
float:left;
background-image:url(imgs/menu_tira.gif);
}
.menu_der {
width:79px;
height:46px;
float:left;
background-image:url(imgs/menu_der.gif);
}

/*fila de titulo y flores*/

.fila_titulo {
width:966px;
height:77px;
float:left;
background-image:url(imgs/tira_medio.gif)
}
.logo2 {
width:152px;
height:77px;
float:left;
}
.titulo {
width:556px;
height:47px;
float:left;
padding-top:18px;
background-color:#FFFFFF;
text-align:left;
font-family:"Times New Roman", Times, serif;
font-size:26px;
font-weight:bold;
}
.titulo a:link {
color:#AA1111;
text-decoration:none;
}
.titulo a:visited {
color:#AA1111;
text-decoration:none;
}
.titulo a:hover {
color:#EE0000;
text-decoration:underline;
}
.flores {
width:258px;
height:77px;
float:left;
background-image:url(imgs/flores.gif);
}

/*botones a las secciones*/

.fila_interior {
width:966px;
height:128x;
float:left;
background-image:url(imgs/tira_medio.gif)
}
.margen_izq {
width:22px;
height:128px;
float:left;
}
.boton {
width:220px;
height:128px;
float:left;
}
.fila_separatoria {
width:966px;
height:35px;
float:left;
background-image:
url(imgs/tira_medio.gif);
}

/*pie de página*/

.contenedor_pie {
width:966px;
height:56px;
float:left;
background-image:url(imgs/down.gif);
}
.pie_enlaces {
width:400px;
height:25px;
float:left;
padding-top:14px;
padding-left:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
}
.pie_enlaces a:link {
color:#FFFFFF;
text-decoration:none;
}
.pie_enlaces a:visited {
color:#FFFFFF;
text-decoration:none;
}
.pie_enlaces a:hover {
color:#EE0000;
text-decoration:underline;
}
.pie_centro {
width:55px;
height:56px;
float:left;
}
.pie_direccion {
width:480px;
height:25px;
float:left;
padding-top:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#FFFFFF;

}
El código HTML es:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h**p://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="h**p://w3.org/1999/xhtml">
<head>
<title>Bienvenidos a White Rose</title>
<title></title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ff4c4c" marginheight="0" marginwidth="0">

<div class="tira_up"></div>

<br />

<center>
<div class="contenedor_todo">

<div class="contenedor_up">
	<div class="borde_superior"></div>
</div>

<div class="contenedor_menu">
	<div class="logo1"><img src="imgs/logo_1.gif" align="left" /></div>
	<div class="menu_izq"></div>
	<div class="menu_tira"><a href=""><img src="imgs/espanol.gif" border="0" align="right" /></a><a href="english/index.htm"><img src="imgs/english.gif" border="0" align="right" /></a>
	</div>
	<div class="menu_der"></div>	
</div>

<div class="fila_titulo">
	<div class="logo2"><img src="imgs/logo_2.gif" align="left" /></div>
	<div class="titulo">&nbsp;&nbsp;&nbsp;<a href="">WHITE ROSE VALLADOLID</a></div>
	<div class="flores"></div>
</div>

<div class="fila_interior">
<div class="margen_izq"></div>
	<div class="boton"><a href="presentacion.htm"><img src="botones/presentacion.png" border="0" align="right" alt="Texto ALT" /></a></div>
	<div class="boton"><a href="clases.htm"><img src="botones/servicios.png" border="0" align="right" alt="Texto ALT" /></a></div>
	<div class="boton"><a href="horarios.htm"><img src="botones/horarios.png" border="0" align="right" alt="Texto ALT" /></a></div>
	<div class="boton"><a href="dondeestamos.htm"><img src="botones/mapa.png" border="0" align="right" alt="Texto ALT" /></a></div>
</div>

<div class="fila_separatoria"></div>

<div class="fila_interior">

<div class="fila_separatoria"></div>

<div class="contenedor_pie">
	<div class="pie_enlaces">
		<a href="pprivacidad.htm">Política de privacidad</A>
	&nbsp;&nbsp;|&nbsp;&nbsp;
		<a href="mailto:whiterose_vaatyahoo.es">Contacto</A>
	&nbsp;&nbsp;|&nbsp;&nbsp;
		<A HREF="h**p://dremin.com">Diseño: Rael del Fraile</A>
	</div>
	<div class="pie_centro"></div>
	<div class="pie_direccion">López Gómez, Nº 28. 47002 VALLADOLID - ESPAÑA  (+34) 983 305 605</div>
</div>

</div>

</center>

</body>
</html>
Si alguien supiera como resolverlo se lo agradecería infinito.

Muchas gracias.
  #2 (permalink)  
Antiguo 18/07/2009, 12:08
Avatar de bioxido  
Fecha de Ingreso: diciembre-2008
Ubicación: $_SERVER['PHP_SELF']
Mensajes: 601
Antigüedad: 9 años
Puntos: 21
Respuesta: Buscando un hack para IE

Ufff..... si no habre intentado yo arreglar ese tipo de cosas con 'hacks'... nunca me funciono ninguno.

Mejor trabajar directamente con los estandares webs y no vas a tener tantos problemas... se que con IE tenes que hacer las cosas 2 veces mas, pero no nos queda otra...
  #3 (permalink)  
Antiguo 18/07/2009, 12:30
 
Fecha de Ingreso: mayo-2007
Mensajes: 348
Antigüedad: 10 años, 6 meses
Puntos: 9
Respuesta: Buscando un hack para IE

Ok, he visto tu hoja de estilo.

Y refuerzo mi teoría de que no hace falta ningún tipo de hack para I.E 6 * para que un sitio se vea igual.

( Con hacer el (X)HTML de forma correcta y limpia, sin complicaciones... al final podrás lograr lo que quieres )

Veo que no la reseteas con algo tan básico cómo utilizar el selector universal:

Código HTML:
* {
margin:0;
padding:0;
}
Código HTML:
background:url("") repeat-x top left;
Aprende a utilizar los shorthand:

background



Lo demás ya es investigar por tu cuenta cómo se comparta I.E6 and family.

No hace falta hacer las cosas 2 veces para distintos navegadores...

Un saludo.
__________________
Debian Squeeze rules!

Última edición por Nathan_1979; 18/07/2009 a las 12:37
  #4 (permalink)  
Antiguo 18/07/2009, 16:08
 
Fecha de Ingreso: septiembre-2006
Mensajes: 19
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: Buscando un hack para IE

Me llevo todo esto que me decís y mañana en el trabajo lo investigo.

Tampoco creais que soy un superexperto, que esto que he hecho es lo más que sé hacer. :Þ

Muchas gracias. Si lo resuelvo os lo comunico :)
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 16:53.