otra vez lo mismo FF ok IE MAL

sumolari · #1 (**permalink**) 02/07/2007, 00:07

En mi web (http://www.sumolari.com) se tienen que ver como si fuesen dos tres módulos con esquinas redondeadas, dos grises (lados) y entre ellos uno rojo-granate (el que tiene el contenido). En FF se ve de maravilla, pero resulta que anoche acedí con IE y

el módulo central se desplaza por debajo de los laterales. ¿Qué puedo tener mal?

brokenbones · #2 (**permalink**) 02/07/2007, 04:02

quizas tengas otra capa en el lado izquierdo que sea mas grande que la columna y no te deja meter el menu del centro, te lo digo xq parece que cuando acaba la columna continua un borde gris por la derecha y si eso cuenta como espacio de capa no te dejará meterlo. de todas maneras yo no se xq si se ve bien en uno no se ve en el otro....

marioraja · #3 (**permalink**) 02/07/2007, 04:40

Además que el primer módulo en IE se deforma por todo el extremo derecho. Nose yo, pero hasta que los de microsoft no les de por seguir los estándares web, me parece que los dolores de cabeza no van a cesar.

sumolari · #4 (**permalink**) 02/07/2007, 14:55

mirad, este es el codigo de la página que uso para hacer las vistas previas:

Código HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Esitlo por defecto : Preview</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<!--Curvy Corners code -->
<script type="text/JavaScript" src="curvy/rounded_corners_lite.inc.js"></script>
<script type="text/javascript" language="javascript">window.onload = function()
  {
      /*
      The new 'validTags' setting is optional and allows
      you to specify other HTML elements that curvyCorners
      can attempt to round.

      The value is comma separated list of html elements
      in lowercase.

      validTags: ["div", "form"]

      The above example would enable curvyCorners on FORM elements.
      */
      settings = {
          tl: { radius: 20 },
          tr: { radius: 20 },
          bl: { radius: 20 },
          br: { radius: 20 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }

      /*
      Usage:

      newCornersObj = new curvyCorners(settingsObj, classNameStr);
      newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
      */
      var myBoxObject = new curvyCorners(settings, "myBox");
      newCornersObj = new curvyCorners(settings, "myBoxleft");
      newCornersObj2 = new curvyCorners(settings, "myBoxright");
      myBoxObject.applyCornersToAll();
      newCornersObj.applyCornersToAll();
      newCornersObj2.applyCornersToAll();
  } 
</script>
<!-- End of Curvy Corners code -->
</head>

<body>
    <p>&nbsp;</p>
    <div class="left">
        <div class="myBoxleft">
        <div class="centro">
<h3>General</h3>
<ul>
  <li><a href="<?php echo $row_site['siteurl']; ?>">Inicio</a></li>
  <li><a href="<?php echo $row_site['siteurl']; ?>users.php">Lista de usuarios</a></li>
  <li><a href="<?php echo $row_site['siteurl']; ?>search.php">Buscar </a></li>
  <?php if ($totalRows_usuario_conectado == 0) { // Show if recordset empty ?>
  <li><a href="<?php echo $row_site['siteurl']; ?>login.php">Iniciar sesi&oacute;n</a></li>
  <li><a href="<?php echo $row_site['siteurl']; ?>create.php">Crear tu cuenta </a></li>
  <?php } // Show if recordset empty ?>
  <?php if ($totalRows_usuario_conectado > 0) { // Show if recordset not empty ?>
  <li><a href="<?php echo $row_site['siteurl']; ?>users/">Zona para usuarios</a></li>
  <li><a href="<?php echo $row_site['siteurl']; ?>admin/">Administraci&oacute;n</a></li>
  <li><a href="<?php echo $row_site['siteurl']; ?>salir.php">Salir</a> </li>
  <?php } // Show if recordset not empty ?> <li><a href="http://blog-noticias.sumolari.com">Blog de noticias</a></li> <li><a href="http://blog-sumolari.sumolari.com">Blog de Sumolari</a></li> <li><a href="http://foro.sumolari.com">Foros</a></li>
  <li><a href="http://sims.sumolari.com">Sims</a></li><li><a href="http://blogs.sumolari.com" target="_blank">&iexcl;Crea tu blog! </a></li></ul>
          <h3>Plataformas</h3>
          <ul>
              <li><a href="#">PC</a></li>
          </ul>
          <h3>Juegos</h3>
          <ul>
              <li><a href="#">Final Fantasy VIII</a></li>
          </ul>
          <h3>Categor&iacute;as</h3>
          <ul>
              <li><a href="#">General</a></li>
          </ul>
        </div>
        </div>
    </div>
    <div class="right">
        <div class="myBoxright"><div class="centro">
          <h3>Informaci&oacute;n</h3>
          <p>Derecha, con un <a href="#">link</a> genial.</p>
        </div></div>
    </div>
    <div class="contenedor_de_myBox">
        <div class="myBox">
            <div class="centro">
                <h2>Sumolari.com</h2>
                <h4><a href="<?php echo $row_site['siteurl']; ?>">Inicio</a> &raquo; Inicio</h4>
                <h3>T&iacute;tulo</h3>
                <p>Texto </p>
            </div>
        </div>
    </div>
</body>
</html>

Tiene un poco de php, pero no mucho.

Este es el css de la página

Código:

.myBox {
    border: 0px solid #ffffff;
    color: #ffffff;
    background-color:#660000;
    border: 3px solid #ffffff;
    /*
    background-image: url(back_test2.jpg);
    background-repeat: no-repeat;
    */
}
.myBoxleft {
    border: 0px solid #ffffff;
    color: #ffffff;
    background-color:#999999;
    border: 3px solid #ffffff;
    /*
    background-image: url(back_test2.jpg);
    background-repeat: no-repeat;
    */
}
.myBoxright {
    border: 0px solid #ffffff;
    color: #ffffff;
    background-color:#999999;
    border: 3px solid #ffffff;
    /*
    background-image: url(back_test2.jpg);
    background-repeat: no-repeat;
    */
}
.left {
    float:left;
    width:200px;
}
.left .myBoxleft .centro {
    margin-left:10px;
    width:200px;
    margin-right:10px;
}
.left .myBoxleft .centro h3{
    font-size:20px;
    font-family:batang;
}
.left .myBoxleft .centro li {
    list-style-type:none;
    font-family:"Calibri", gulim;
    font-size:14px;
}
.left .myBoxleft .centro li a {
    color:#CCCCCC;
    text-decoration:none;
}
.left .myBoxleft .centro li a:hover {
    color:#FFFFFF;
    font-size:15px;
    text-decoration:underline;
}
.right {
    float:right;
    width:200px;
}
.right .myBoxright .centro {    
    margin-right:10px;
    width:150px;
    margin-left:10px;
}
.right .myBoxright .centro h3 {    
    font-size:20px;
    font-family:batang;
}
.right .myBoxright .centro p {    
    font-size:13px;
    font-family:"Tahoma", Verdana;
}
.right .myBoxright .centro a {    
    color:#CCCCCC;
    text-decoration:none;
}
.right .myBoxright .centro a:hover {
    color:#FFFFFF;
    text-decoration:underline;
    font-size:14px;    
}
.contenedor_de_myBox .myBox .centro {
    margin-left:10px;
    margin-right:10px;
}
.contenedor_de_myBox .myBox .centro h2 {
    font-size:36px;
    text-align:center;
    font-family:"Cambria", batang;
}

.contenedor_de_myBox .myBox .centro p {
    font-size:14px;;
    font-family:"Segoe UI", LucidaSansRegular;
    text-align:justify;
    color:#FFFFFF;
}
.contenedor_de_myBox .myBox .centro p a{
    color:#CCCCCC;
    text-decoration:none;
}
.contenedor_de_myBox .myBox .centro p a:hover{
    color:#FFFFFF;
    text-decoration:underline;
    font-size:15px;
}
.contenedor_de_myBox .myBox .centro table a{
    color:#CCCCCC;
    text-decoration:none;
}
.contenedor_de_myBox .myBox .centro table a:hover{
    color:#FFFFFF;
    text-decoration:underline;
    font-size:15px;
}
.contenedor_de_myBox .myBox .centro h3 {
    font-size:20px;
    font-family:"Cambria", batang;
    width:100%;
    border-bottom:1px dotted #FFFFFF;
}
.contenedor_de_myBox .myBox .centro h4 {
    font-size:16px;
    font-family:"Cambria", batang;
    width:100%;
    border-bottom:1px dotted #FFFFFF;
}
.contenedor_de_myBox .myBox .centro h4 a {
    font-size:16px;
    font-family:"Cambria", batang;
    width:100%;
    border-bottom:1px dotted #FFFFFF;
    color:#FFFFFF;
    text-decoration:none;
}
.contenedor_de_myBox .myBox .centro h4 a:visited {
    font-size:16px;
    font-family:"Cambria", batang;
    width:100%;
    border-bottom:1px dotted #FFFFFF;
    color:#FFFFFF;
    text-decoration:none;
}
.contenedor_de_myBox .myBox .centro h4 a:active {
    font-size:16px;
    font-family:"Cambria", batang;
    width:100%;
    border-bottom:1px dotted #FFFFFF;
    color:#FFFFFF;
    text-decoration:none;
}
.contenedor_de_myBox .myBox .centro h4 a:hover {
    font-size:17px;
    font-family:"Cambria", batang;
    color:#CCCCCC;
    text-decoration:none;
}
.contenedor_de_myBox .myBox .centro h5 {
    font-family:Verdana;
    font-size:12px;
}
.contenedor_de_myBox {
    margin-left:205px;
    margin-right:205px;
}
h5 {
}
h5 a {
    color:#FFFFFF;
    text-decoration:none;
}
h5 a:hover {
    color:#CCCCCC;
    text-decoration:overline;
}

sumolari · #5 (**permalink**) 05/07/2007, 09:09

Tras estar un rato probandop, ya encontré el problema, estaba relacionado con los bordes de las capas con borde redondo, era 3 px y lo he puesto a 0 px.
Funciona en IE7 y en FF, ¿alguien que tenga IE6 me puede confirmar que se ve todo en la misma línea?

erick_arcini · #6 (**permalink**) 05/07/2007, 10:13

Cita:

Iniciado por sumolari

Tras estar un rato probandop, ya encontré el problema, estaba relacionado con los bordes de las capas con borde redondo, era 3 px y lo he puesto a 0 px.
Funciona en IE7 y en FF, ¿alguien que tenga IE6 me puede confirmar que se ve todo en la misma línea?

nop...

sumolari · #7 (**permalink**) 05/07/2007, 12:16

Cita:

Iniciado por erick_arcini

nop...

Seguiré mirando, gracias por avisarme