Problema con fondo de un div

Nemutagk · #1 (**permalink**) 28/05/2007, 07:20

Buenas compañeros foreros =P, acudo a ustedes ya que no he podido solucionar un problema que traigo con el fondo de un div, y como dicen que una imagen dice mas que mil palabras mi problema es el siguiente

se dan cuenta que hay una franja entre la imagen de cabecera y el header, bueno, pues esto solo me sucede en firefox con un doctype xhtml 1.0 strict ya que si lo pongo transicional no aparece dicha franja (cabe decir que va perfecto eninternet explorer), el problema se encuetra en el div contenedor, aparece ese borde transparente, he aqui mi codigo html y css
HTML

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nemuword - Inicio</title>
<meta name="Description" content="Blog personal dedicado a la tecnologia, actualidad, programas, videojuegos y muchas cosas mas..." />
<meta name="Keywords" content="blog,programas,software,hardware,videojuegos,tecnologia,actualidad,programacion,dise&ntilde;o,maquetacion" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Lord Nemutagk [email protected]" />
<meta http-equiv="Content-Language" content="es" />
<?php require_once("meta_links.php"); ?>
<link href="css/general.css" rel="stylesheet" type="text/css" />
<script src="js/general.js" type="text/javascript"></script>
</head>

<body>
<div id="div_base">

  <div id="div_cabecera"><img src="img/cabecera.jpg" alt="Cabecera Nemu Word" width="750" height="145" /></div>
  <div id="div_fondo_contenedor">
    <div id="div_contenedor">
      <div id="div_cuerpo">
        <noscript>
        <div id="div_noscript"><img src="img/noscript.gif" alt="NoScript" width="23" height="25" />Tu navegador no soporta o no tiene activado Javascript, puede que no funcione correctamente el sitio, por favor, para tener una experiencia completa, activalo!!! </div>
        </noscript>
        <h1>Inicio</h1>
        <p>&nbsp;</p>
      </div>
      <div id="div_menu">
        <ul>
          <li class="menu_cabecera">Categor&iacute;as</li>
          <li><a href="index.php" title="Regresar al inicio" accesskey="i">Inicio</a></li>
          <li><a href="index.php?cat=actualidad" title="Temas referentes a Actualidad">Actualidad</a></li>
          <li><a href="index.php?cat=tecnologia" title="Temas referentes a Tecnolog&iacute;a">Tecnolog&iacute;a</a></li>
          <li><a href="index.php?cat=programacion" title="Temas referentes a Programaci&oacute;n">Programaci&oacute;n</a></li>
          <li><a href="index.php?cat=dieno" title="Temas referentes a Dise&ntilde;o y Maquetaci&oacute;n">Dise&ntilde;o y Maquetaci&oacute;n</a></li>
          <li><a href="index.php?cat=ocio" title="Temas referentes a Ocio">Ocio</a></li>
          <li><a href="index.php?cat=videojuegos" title="Temas referentes a Videojuegos">Videojuegos</a></li>
          <li><a href="index.php?cat=software" title="Temas referentes a Software">Software</a></li>
          <li><a href="index.php?cat=hardware" title="Temas referentes a Hardware">Hardware</a></li>
          <li><a href="index.php?cat=recursos" title="Temas referentes a Recursos">Recursos</a></li>
          <li><a href="index.php?cat=proyectos" title="Temas referentes a Proyectos">Proyectos</a></li>
          <li><a href="index.php?cat=dibujo" title="Temas referentes a Dibujo">Dibujo</a></li>
            </ul>
            <ul>
              <li class="menu_cabecera">Suscripci&oacute;n</li>
              <li><span lang="en">Feed</span> Nemu Word </li>
            </ul>
            <form id="cuenta" method="post" action="" onsubmit="return validar_login()">
              <ul>
                <li class="menu_cabecera">Mi Cuenta</li>
                <li>
                  <label for="txt_user">
                  <input name="txt_user" type="text" id="txt_user" value="Usuario" onfocus="cam_login(1)" onblur="cam_login(1)" />
                  </label>
                </li>
                <li>
                  <label for="txt_pass">
                  <input name="txt_pass" type="password" id="txt_pass" value="Contrase&ntilde;a" onfocus="cam_login(2)" onblur="cam_login(2)" />
                  </label>
                </li>
                <li>
                  <label for="Submit2">
                  <input type="submit" name="Submit2" id="Submit2" value="Iniciar Sesi&oacute;n" />
                  </label>
                </li>
                <li>Recuperar contrase&ntilde;a    </li>
              </ul>
            </form>
      </div>
      <div class="div_oculto">Colocar aquí el contenido para  class &quot;div_oculto&quot;</div>
    </div>
  </div>
  <div id="div_piepag"><p lang="en"><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.5/mx/" title="Licensed Creative Commons"><img src="img/80x15.png" alt="Creative Commons License" width="80" height="15" style="border-width:0" /></a><br />
      This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.5/mx/" title="Licencia Creative Commons">Creative Commons Attribution-Noncommercial-Share Alike 2.5 M&eacute;xico License</a></p>
    <p>Dise&ntilde;o y Programacion por Lord Nemutagk. Si necesita m&aacute;s informaci&oacute;n sobre este Sitio, por favor visite <span lang="en">Info Site</span>.</p>
    <p>2007 - <?php echo date("Y"); ?>      </p>
    <ul>
      <li><a href="http://validator.w3.org/check?uri=http://tokio3.no-ip.org/nemu" title="Validar el co&oacute;digo XMHTL" class="texto_centrado"><img src="img/validar_xhtml.gif" alt="Validar XHTML" width="56" height="26" /></a></li>
      <li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://tokio3.no-ip.org/nemu" title="Validar el co&oacute;digo CSS"><img src="img/validar_css.gif" alt="Validar CSS" width="50" height="24" /></a></li>
    </ul>
  </div>
</div></body>
</html>

CSS

Código:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    margin: 0px;
    padding: 0px;
    background-attachment: fixed;
    background-image: url(../img/fondo_body.jpg);
    background-repeat: repeat-x;
    background-position: bottom;
}
a:link, a:active, a:visited {
    color: #0000FF;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
img {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    margin: 0px;
    padding: 0px;
}
form {
    margin: 0px;
    padding: 0px;
}
input {
    margin: 0px;
}
#div_base {
    margin: auto;
    width: 750px;
    background-image: url(../img/fondo_div_02.jpg);
    background-repeat: repeat-y;
    background-position: right;
}
#div_cabecera {
    margin: 0px;
    padding: 0px;
}
#div_fondo_contenedor {
    background-image: url(../img/fondo_contenido.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-color: #FFFFFF;
}

#div_contenedor {
    background-image: url(../img/fondo_div.jpg);
    background-repeat: no-repeat;
    background-position: top;
    margin: 0px;
    padding: 0px;
    overflow: auto;
}
#div_cuerpo {
    float: left;
    width: 560px;
    padding: 5px;
}
#div_noscript {
    padding: 5px;
    color: #F34947;
    background-color: #FFFFC6;
    border: 1px dashed #FF0000;
}
#div_noscript img {
    vertical-align: top;
}
#div_menu {
    text-align: right;
    float: right;
    width: 180px;
    background-image: url(../img/fondo_menu_03.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    margin-top: 15px;
    padding-top: 15px;
}
#div_menu ul {
    list-style-type: none;
    margin-right: 5px;
    margin-left: 6px;
    padding-right: 5px;
    padding-left: 6px;
}
#div_menu li {
    padding-top: 3px;
    padding-bottom: 1px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ACAAF2;
}
#div_piepag {
    background-image: url(../img/fondo_piepag.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    padding-top: 29px;
    font-size: 0.7em;
    text-align: center;
    padding-bottom: 10px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #B7B5F9;
    clear: both;
}
#div_piepag ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#div_piepag li {
    display: inline;
    margin: 0px;
    padding: 0px;
}

#div_piepag p {
    padding: 0px;
    vertical-align: bottom;
    margin: 0px;
}
.input_size {
    width: 65px;
}

.div_oculto {
    display: none;
    clear: both;
}

aqui les pongo un link si gustan verlo directamente http://tokio3.no-ip.org/nemu
les agradesco cualquier comentario o ayuda que puedan ofrecer y de antemano gracias

Nemutagk · #2 (**permalink**) 28/05/2007, 14:42

Bueno, al final, me autorespondo, el problema era por un espacio que se generaba entre la imagen de la cabeera y el borde de la div, por extraño que estos sea ya que ambas (img y div) se le habia asignado margin: 0px y padding: 0px; asi mismo a la img se le quito todo tipo de borde, pero bueno, la "solucion" que encontre fue asignarle el tamaño de la imagen al div...

de antemano gracias a todos los que se interesaron

AlZuwaga · #3 (**permalink**) 28/05/2007, 15:38

Hola, creo que ese espacio que deja la imagen se debe a que la alineación vertical predeterminada de las imágenes es baseline. Esto es, que se alinea a la línea de base de las letras. La línea de base es.. como explicarlo... la parte más abajo de, por ejemplo, la letra a. La letra j (o la g, p, q y la y) se van por debajo de esta línea de base. Entonces, la imagen deja ese espacio reservado por si llegase a existir un caracter de estos ¿Me explico?

Para eliminar ese espacio (o especie de padding... o margin), podés darle a la imagen un vertical-align: text-bottom;. El text-bottom es, siguiendo el mismo ejemplo, la parte de más abajo de la letra p.

Saludos

Nemutagk · #4 (**permalink**) 28/05/2007, 15:45

yea!!!!, como siempre, ustedes me sacan de cada apuro, efectibamente, era lo que esta ocacionando dicho espacio, ahora todo anda perfecto, de antemano gracias!!!!