Foros del Web » Creando para Internet » CSS »

Problema viendo sitio en ie

 Estas en el tema de Problema viendo sitio en ie en el foro de CSS en Foros del Web. hola, tengo este sitio montado en joomla http://www.bethlemitaspalmira.edu.co resulta que en firefox y chrome se ven bien los estilos, pero en ie se descuadra todo ...
  #1 (permalink)  
Antiguo 13/04/2010, 08:20
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 23 años, 5 meses
Puntos: 20
Problema viendo sitio en ie
hola, tengo este sitio montado en joomla http://www.bethlemitaspalmira.edu.co resulta que en firefox y chrome se ven bien los estilos, pero en ie se descuadra todo quisiera saber si alguien me puede ayudar a organizar el estilo para que se vea bien en ie y en firefox por ahi estuve leyendo y vi que hay que crear una hoja de estilos para ie y que la cargue con un if, pero no sabria bien como hacerlo, y si alguien me pudiera explicar por que pasa esto.

gracias


esta es mi hoja de estilos


Código: 
.body {
	background-color:#CCCCCC;
	
}
#container {
	position: relative;
	width: 1024px;
	height: auto;
	background-color: #66ffcc;

    left: 15%;
    width: 85%;    // 60% + 20% + 20% = 100%
}
.header { 
	position:relative;
}
.escudo {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 150px;
	width:  174px;
	
}
.banner {
	position: absolute;
	top: 0px;
	left: 204px;
	width: 370px;
	height: 150px;
	background-color: #0033ff;
}
.foto_col {
	position: absolute;
	top: 0px;
	left: 604px;
	width: 298px;
	height: 150px;
	background-color; #ff0000;
}

.menu {
	position:relative;
	top:200px;
}
.inicio {
	position:absolute;
	top:0px;
	left:0px;
	width:89px;
	height:30px;
}
.info_inst {
	position:absolute;
	top:0px;
	left:89px;
	width:89px;
	height:30px;
}
.servicios {
	position:absolute;
	top:0px;
	left:178px;
	width:89px;
	height:30px;
}
.empresas {
	position:absolute;
	top:0px;
	left:267px;
	width:89px;
	height:30px;
}
.cuadro {
	position:absolute;
	top:0px;
	left:356px;
	width:89px;
	height:30px;
}
.matricula {
	position:absolute;
	top:0px;
	left:445px;
	width:89px;
	height:30px;
}
.contacto {
	position:absolute;
	top:0px;
	left:534px;
	width:73px;
	height:30px;
}

.barra {
	position:absolute;
	top:236px;
	left:185px;
	height:19px;
	width: 1024px;
}

.flor {
	position:absolute;
	top: 252px;
	left: 189px;
	width: 57px;
	height: 298px;
}

#contenido {
	position:absolute;
	top:300px;
	left: 250px;
	width: 864px;
	height:auto;

}

.menu_principal_title {
	position:absolute;
	top: 0px;
	left: 0px;
	width:249px;
	height:35px;
	background-image:url(../images/menuprincipal_head.jpg);
	background-repeat:no-repeat;
}
.menu_title {
	position:absolute;
    top:50%;
	left:23%;
    
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
}
.menu_border {
	position:absolute;
	top:35px;
	width:249px;
	height:auto;
	background-image:url(../images/menupr_border.jpg);
	float:left;
}
.menu_cont {
	position:relative;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:left;
	width:240;
	height:auto;
	top:20px;
	left:20px;
}
a {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#0000CC;
	text-decoration:none;
}
a:hover {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	text-decoration:underline;
}
#navi {
	list-style:none;
	margin:10px;
	padding:0;

}
#navi li {
	margin:2px;
	padding:2px;

	
}
a:visited {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#0099CC;
	text-decoration:none;
}

.menu_footer {
	position:absolute;	
	width:249px;
	height:40px;
	background-image:url(../images/menupr_foot.jpg);
}
.video_header {
	position:absolute;
	top: 50px;
	left: 0px;
	width:249px;
	height:35px;
	background-image:url(../images/video_title.jpg);
	background-repeat:no-repeat;
}
.video_title {
	position:absolute;
    top:50%;
	left:23%;
    
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
}
.video_border {
	position:absolute;
	top:35px;
	left: 1px;
	width:248px;
	height:auto;
	background-image:url(../images/video_border.jpg);
	float:left;
}
.video_footer {
	position:absolute;	
	width:248px;
	height:37px;
	background-image:url(../images/video_footer.jpg);
}

.sabiasque_header {
	position:absolute;
	top: 50px;
	left: 0px;
	width:249px;
	height:35px;
	background-image:url(../images/sabiasque_title.jpg);
	background-repeat:no-repeat;
}
.sabiasque_title {
	position:absolute;
    top:50%;
	left:23%;
    
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
}
.sabiasque_border {
	position:absolute;
	text-align:justify;
	top:35px;
	width:248px;
	height:auto;
	background-image:url(../images/sabiasque_border.jpg);
	float:left;
}
.sabiasque_cont {
	position:relative;
	top:10px;
	width:130;
	height:auto;
	padding:10px 40px 10px 0px;
	left:10px;
	text-align:justify;
}
.sabiasque_footer {
	position:absolute;	
	width:249px;
	height:65px;
	background-image:url(../images/sabiasque_footer.jpg);
}

.front {
	position:absolute;
	top: 0px;
	width: 600px;
	height: 35px;
	left: 233px;
	background-image:url(../images/cont_header.jpg);
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#FFFFFF;
}
.front_border {
	position:absolute;
	top:35px;
	width: 540px;
	background-image:url(../images/cont_border.jpg);
	left: 292px;
}
.front_cont {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px 40px 10px 0px;
	position:relative;
	top:20px;
	width: 520;
	left: 10px;
}
.front_footer {
	position:absolute;
	width:540px;
	height:85px;
	background-image:url(../images/cont_footer.jpg);
	left:0px;
}
.info {
	position:absolute;
	top:140px;
	left: 80px;
	width:400px;
	height:auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:right;
}
.footer {
	position:absolute;
	width: 864px;
	height: 179px;
	top:200px;
	left:-400px;
	background-image:url(../images/footer.jpg);
}
.representante_title {
	position:relative;
	top:20px;
	width: 510px;
	height: 35px;
	background-image:url(../images/representante_tit.png);
	left:0px;
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	color:#FFFFFF;
}
.representante_cont {
	position:relative;
	top:20px;
	width:400px;
	height:auto;
	left: 10px;
	
}
__________________
Say no more.......
  #2 (permalink)  
Antiguo 13/04/2010, 08:24
Avatar de RIVERMILLOS  
Fecha de Ingreso: marzo-2010
Mensajes: 1.336
Antigüedad: 14 años, 8 meses
Puntos: 15
Respuesta: Problema viendo sitio en ie
creo que lo que buscas es algo como esto

<!--[if IE]>
<style type="text/css">
@import ("basico_ie.css");
</style>
<![endif]-->


saludos
  #3 (permalink)  
Antiguo 13/04/2010, 08:24
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 23 años, 5 meses
Puntos: 20
Respuesta: Problema viendo sitio en ie
y aqui dejo la web donde lo uso


Código PHP: 
Ver original
  1. <?php defined('_JEXEC') or die('Restricted access'); ?>
  2. <?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
  5. <head>
  6.         <jdoc:include type="head" />
  7.     
  8.     
  9.     <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/2010_front/css/estilos.css" type="text/css">
  10.     <script type="text/JavaScript">
  11. ...
  12. </script>
  13.  
  14.  
  15.  
  16.     </head>
  17.  
  18. <body >
  19. <div id="container">
  20.     <div class="header">
  21.         <div class="escudo"><img src="<?php echo $this->baseurl; ?>/templates/2010_front/images/escudo.jpg" /></div>
  22.         <div class="banner"></div>
  23.         <div class="foto_col"><img src="<?php echo $this->baseurl; ?>/templates/2010_front/images/foto_col.jpg" width="298" height="150" /></div>
  24.     </div>
  25.     
  26.     <div class="menu">
  27.         <div class="inicio"></div>
  28.         <div class="servicios"></div>
  29.         <div class="empresas"></div>
  30.         <div class="cuadro"></div>
  31.         <div class="matricula"></div>
  32.         <div class="contacto"></div>
  33.     </div>
  34.     
  35.         
  36. </div>
  37.  
  38.     <div class="barra"><img src="<?php echo $this->baseurl; ?>/templates/2010_front/images/barra.jpg" alt="Barra" width="910"/></div>
  39.     <div class="flor"><img src="<?php echo $this->baseurl; ?>/templates/2010_front/images/flor.jpg" alt="Flor"/></div>
  40.     
  41. <div id="contenido">
  42.     <div class="menu_principal_title"><div class="menu_title">MEN&Uacute; PRINCIPAL</div></div> 
  43.     <div class="menu_border"><ul id="navi"><li><a href="#">Cibercolegios</a></li><li><a href="#">Instituci&oacute;n</a></li><li><a href="#">Historia</a></li><li><a href="#">S&iacute;mbolos</a></li></ul>
  44.         <div class="menu_footer">
  45.             <div class="video_header"><div class="video_title">VIDEO DE LA SEMANA</div>
  46.                     <div class="video_border"><!--<object width="220" height="188"><param name="movie" value="http://www.youtube.com/v/zxCI2LtKY58&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zxCI2LtKY58&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="220" height="188"></embed></object>
  47.                     <a href="http://www.youtube.com/watch?v=zxCI2LtKY58" target="_blank">Thalia - Equivocada<br />
  48.           <i>Actualizado por <a href="http://www.crmbusiness.biz">CRM Business </a>-->
  49.                     <div class="video_footer">
  50.                         <div class="sabiasque_header"><div class="sabiasque_title">SABIAS QUE...</div>
  51.                         <div class="sabiasque_border"><div class="sabiasque_cont">El Parque Arqueol&oacute;gico de San Agust&iacute;n fue declarado Patrimonio de la Humanidad en 1995 por la Unesco.
  52.  
  53. En la regi&iacute;n de San Agust&iacute;n (Departamento de Huila) se han efectuado los principales hallazgos arqueol&oacute;gicos: templos excavados en la roca, tumbas y grandes estatuas de piedra, de &iacute;dolos, zoom&oacute;rficas o antropom&oacute;rficas?</div>
  54.                                                                             <div class="sabiasque_footer"></div>
  55.                         </div>
  56.  
  57.                     </div>
  58.                     </div>
  59.         </div>
  60.         </div>
  61.     </div>
  62.     
  63.  
  64. </div>
  65. <div class="front">Actividades Abril</div>
  66.         <div class="front_border"><div class="front_cont"><li><strong>12 
  67. </div>
  68.                                   <div class="representante_title">Representante del Mes</div>
  69.                                   <div class="representante_cont"><!-- Slide representantes-->
  70.             <td width="49%">
  71.             <ul id="slide">
  72.                 <li>
  73.                     <table>
  74.                         <tr>
  75.                             <td>Por distinguirse en el cumplimiento y vivencia de responsabilidades como Representante del grado 9 A 
  76. en el mes de Febrero de 2010</td>
  77.                             <td>&nbsp;</td>
  78.                         </tr>
  79.                         <tr>
  80.                             <td align="center">
  81.                             <strong>Valentina Varela Nieto</strong></td>
  82.                             <td align="center"><img src="http://www.bethlemitaspalmira.edu.co/representantes/valentina_varela_nieto.jpg"></td>
  83.                         </tr>
  84.                     </table>
  85.  
  86.                 </li>
  87.                 <li>
  88.                     <table>
  89.                         <tr>
  90.                             <td>Por distinguirse en el cumplimiento y vivencia 
  91. de responsabilidades como 
  92. Representante del grado 11B 
  93. en el mes de Febrero de 2010</td>
  94.                             <td>&nbsp;</td></tr><tr><td align="center"><strong>Laura Liliana Posso Orrego</strong></td>
  95.   <td align="center"><img src="http://www.bethlemitaspalmira.edu.co/representantes/laura_liliana_posso_orrego.jpg"></td>
  96. </tr></table>
  97. </li>
  98.                     <li><table><tr><td colspan="2">Por su cumplimiento 
  99. y vivencia del Manual del 
  100. Educador Bethlemita.</td></tr><tr><td align="center"><strong>Shirley Rojas Casta&ntilde;o.</strong></td>
  101.   <td rowspan="2" align="center"><img src="http://www.bethlemitaspalmira.edu.co/representantes/shirley_rojas_castano.jpg"></td>
  102. </tr><tr><td align="center"><strong>Docente Periodo II Primaria</strong></td>
  103.   </tr></table>
  104.  
  105. </li>
  106.                      <li><table><tr><td colspan="2">Por su cumplimiento 
  107. y vivencia del Manual del Educador Bethlemita.</td></tr><tr><td align="center"><strong> Luis Arturo Sanchez Alvarez</strong></td>
  108.   <td rowspan="2" align="center"><img src="http://www.bethlemitaspalmira.edu.co/representantes/Luis_Arturo_Sanchez_Alvarez.jpg"></td>
  109. </tr><tr><td align="center"><strong>Docente Periodo II Bachillerato</strong></td>
  110.   </tr></table>
  111.  
  112. </li>
  113.             </ul>
  114.             </td>
  115.  
  116. <!-- fin representantes--></div>
  117.                                   
  118.         <div class="front_footer"><div class="info"><p>Cra 30 No. 27-19 Barrio Nuevo Centro</p>
  119.         <div class="footer"></div>
  120. <p><strong>Tel&eacute;fono:</strong> (2) 271 0115 - 275 6806 - 271 5753</p>
  121. <p>Palmira Valle del Cauca</p>
  122. <p><strong>Horario de Atenci&oacute;n:</strong> Lunes a Viernes de 7:30 a.m. a 12:00 p.m.</p>
  123. <p>y de 2:00 p.m. a 5:00 p.m.</p><p align="center"><span class="text_menu_header">Desarrollado y Administrado por <a href="http://www.crmbusiness.biz">CRM Business 
  124.     <img src="http://www.crmbusiness.biz/footer/logo_crm.png" border="0" alt="CRM Business" /></a></font></p></div></div></div>
  125.  
  126.  
  127. </div>
  128.  
  129. </body>
__________________
Say no more.......
  #4 (permalink)  
Antiguo 13/04/2010, 08:25
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 23 años, 5 meses
Puntos: 20
Respuesta: Problema viendo sitio en ie
rivermillos, eso es algo como lo ue busco, muchas gracias, pero tambien quisiera saber cual es el problema para que ie no tome bien los estilos?
__________________
Say no more.......
  #5 (permalink)  
Antiguo 13/04/2010, 09:03
Avatar de alexk
Colaborador
  
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 15 años, 4 meses
Puntos: 137
Respuesta: Problema viendo sitio en ie
como te recomienda RIVERMILLOS sera mejor hacer uso de los comentarios condicionales y mejor aun... especificanco en la condicion la version del IE, 6, 7 o donde tengas problema envez de que coja la hoja de estilos pa todos los IE's.

tu problema esta en demasiadas posiciones absolutas... para la estructura de un sitio es mejor que los elementos sigan su flujo natural, o bien que esten bien flotados.
__________________
Toroflix - movies.
  #6 (permalink)  
Antiguo 13/04/2010, 09:43
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 23 años, 5 meses
Puntos: 20
Respuesta: Problema viendo sitio en ie
mmmm el problema es que no sabria como hacerlo para que al flotarlos queden bien posicionados, por eso lo hice con posiciones absolutas para que se fijen las posiciones, sera que alguien me podria ayudar a organizarlo como debe ser?
__________________
Say no more.......
  #7 (permalink)  
Antiguo 13/04/2010, 10:36
Avatar de alexk
Colaborador
  
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 15 años, 4 meses
Puntos: 137
Respuesta: Problema viendo sitio en ie
como decia en un post anterior
Cita:
si estamos aprendiendo CSS lo mejor sera:
http://www.forosdelweb.com/f53/aport...ml-css-648073/
http://www.forosdelweb.com/f53/aport...rte-ii-657814/

y claro:
http://librosweb.es/css/index.html
http://librosweb.es/xhtml/index.html
para mi mucho mas sencillo que los elementos siguan su flujo natural envez de calcular uno por uno los espacios y posiciones etc...
__________________
Toroflix - movies.
  #8 (permalink)  
Antiguo 13/04/2010, 10:49
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 23 años, 5 meses
Puntos: 20
Respuesta: Problema viendo sitio en ie
muchas gracias alexk hoy mismo empiezo a leerlos
__________________
Say no more.......
  #9 (permalink)  
Antiguo 13/04/2010, 11:37
Avatar de alexk
Colaborador
  
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.698
Antigüedad: 15 años, 4 meses
Puntos: 137
Respuesta: Problema viendo sitio en ie
pues suerte el_cesar se que al comienzo la parte teorica es muy aburrida asi que si te trabas con gusto te ayudamos :)
__________________
Toroflix - movies.
  #10 (permalink)  
Antiguo 13/04/2010, 13:59
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 23 años, 5 meses
Puntos: 20
Respuesta: Problema viendo sitio en ie
gracias alexk por aqui estare con mis dudas :)
__________________
Say no more.......

Etiquetas: Ninguno
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:10.