Mi plantilla se ve bien en firefox pero en ie no

el_cesar · #1 (**permalink**) 21/08/2009, 12:20

hola tengo esta plantilla

Código php:

Ver original<?php
  defined( '_JEXEC' ) or die( 'Restricted access' );
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
 
<head>
    <jdoc:include type="head" />
 
<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/crm_index/css/styles.css" type="text/css">
<!--[if gte IE 6]> 
    <link href="<?php echo $this->baseurl; ?>/templates/crm_index/css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
 
</head>
<body>
  <div class="main_containner">
      <div class="header">
         <div id="navigation-menu">
            <jdoc:include type="modules" name="left" />
         </div>
       </div>
    
         <div id="logo"><img src="<?php echo $this->baseurl; ?>/templates/crm_index/images/logo_crm.png" alt="CRM Business"> </img>
         </div>
           <div id="cuadro_texto">
        <jdoc:include type="component" />
           </div>
             <div id="footer_left">
        <div id="info">
            <p>
            <p>
            <li><strong>DIRECCIÓN: </strong>Avenida 3A Norte # 24 N 24 
            <li><strong>PBX: </strong>++57 (2) 485 4564
            <li><strong>FAX: </strong>++57 (2) 485 4441
            <li><strong>eMAIL: </strong><a href="mailto: [email protected]">[email protected]</a>
        </div>
             </div>
               <div id="footer_r">
        <jdoc:include type="modules" name="user2" />
               </div>
  </div>
</body>

y esta su hoja de estilos

Código:

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:13px;
	background: url(../images/background.jpg);
}

.main_containner {


	width: 995px;
	margin:auto;
	display:relative;
	height:auto;
	border-top:none;
	border-bottom:none;
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {

	text-decoration: underline;
}

.header {
	width: 995px;

	clear: both;

}

.header .menu_header {
	float:left;
	margin-top:0px;
	margin-left:0px;
	width:193px;
}

/**
 * menu 
 */
#navigation-menu ul li {
        
	display: inline;
	font-family: "Tahoma", "Geneva", sans-serif
	font-size:15px;
        padding: 2px 9px; /*Separar el texto*/
        margin:7px; /* Separar los botones */

      /*  background-color:#E4E4E4;*/ /* Color de fondo */
}
#navigation-menu ul li:hover {
        background-color:#58ACFA; /* Color de fondo sobre el boton */
        cursor: pointer; /* cambiar el aspecto del puntero */
}
#navigation-menu ul li a {
        text-decoration: none;
	text-align: center;
	color: #0000ff;
}
#navigation-menu ul {
        /* Linea para delimitar la botonera */

	border-bottom-width: 5px;
        border-bottom-style: solid;
        border-bottom-color: #ffffff;

}


/** LOGO
*/

#logo {
	
	height: 130px;
	text-align: center;

	}

/** contenedor de texto*/
#cuadro_texto {

	width: 995px;
	height: 290px;
	background: #ffffff;

}

/**footer*/

#info {
	position: relative;
	width: 330px;
	float: left;
	top: 10px;
	left: 5px;	
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #ffffff;
}

#footer_left {
	width: 330px;
	height: 100px;
	top: 30px;
	background-image: url(../images/footer_left.jpg);
	float: left;
	position: relative;

}
#footer_r {
	width: 660px;
	height: 100px;
	top:30px;
	background-image: url(../images/footer_right.jpg);
	float: right;
	position: relative;
}

y resulta que en firefox se ve como quiero pero en ie no para verla en ie tengo este otro estilo que asumo se debe aplicar como condicional

Código:

.content .bienvenido_containner 
{
	height: 426px;
}

pero no se ve igual, es decir las medidas se trocan y las transparencias de las imagenes png no se ven asi como el fondo de los botones del menu, como lo puedo arreglar

el_cesar · #2 (**permalink**) 22/08/2009, 19:08

aqui subi la plantilla htp://www.crmbusiness.biz pero noten que en firefox se ve bien pero en ie no coge las transparencias ni el fondo de los botones, como la puedo arreglar?

el_cesar · #3 (**permalink**) 26/08/2009, 09:49

mmmm ahora, quien podra defenderme?

hendrix · #4 (**permalink**) 26/08/2009, 10:31

ese es un problema de IE6 y las imagenes PNG con transparencias.

por lo que recuerdo se debia agregar algo al archivo CSS para luego colocar las imagenes.

aqui hay algo, espero te sirva

ojo que estas plantillas ya tienen el css listo para aceptar png con transparencias en ie6

saludos

el_cesar · #5 (**permalink**) 26/08/2009, 10:54

encontre este foro con una solucion http://www.comocreartuweb.com/phpBB2/ftopic5542.html

pero lo pruebo para ie 6 y no me funka

lo estoy haciendo asi

Código:

<div id="logo"><img src="<?php echo $this->baseurl; ?>/templates/crm_home/images/logo_crm.png" alt="CRM Business"></img>
	<!--[if gte IE 6]>
<script type="text/javascript" src="/templates/crm_home/images/png.js"></script>
<![endif]-->

y no me da porque lo que pasa es que la img la insero en el index para poder ponerle el enlace

alguna idea?

hendrix · #6 (**permalink**) 26/08/2009, 11:12

coloca esto entre los head del index.php del template para ver que pasa.

Código:

<!--[if gte IE 5.5000]>
<script language="JavaScript">
function correctPNG()
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()

      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText

         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

         var strNewHTML = "<span " + imgID + imgClass + imgTitle
             + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;"
             + imgStyle + ";"      + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
             + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"

         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->

el_cesar · #7 (**permalink**) 26/08/2009, 11:39

mm ya lo puse asi entre los heads y no funciona

Larenz · #8 (**permalink**) 26/08/2009, 12:42

Oye por cierto, ¿cómo es posible que uses los tags li sin antes usar ul ó ol?.... creo que esa sintaxis está incorrecta!

P.D: Creo que yo tengo un código por aquí que uso en mis plantillas y funciona... en cuanto tenga chance lo saco y te lo mando.

el_cesar · #9 (**permalink**) 26/08/2009, 14:54

ok Larenz te lo agradeceria infinitamente porque no he podido darle solucion y lograr que se vea bien en ie y en firefox