De tabla a div, problema en IE

Spydis · #1 (**permalink**) 13/08/2007, 11:23

Hola, estoy traspasando mi web de tablas a css y como todo novato tengo problemas con IE que en Firefox no me salen xD
El index de la web es el siguiente:

Código PHP:

 
<html>

<?php include("head_html.php"); ?>

<body>

<div id="block"><?php include("header.php"); ?></div>

 
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center" background="images/fondo.gif">

  <tr>

    <td width="8" align="left">&nbsp;</td>

    <td width="200" align="left" valign="top"><?php include("contenido.php"); ?></td>

    <td width="5" align="left">&nbsp;</td>

    <td width="579" align="center" valign="top"><?php include ("secciones.php"); ?></td>

    <td width="8" align="right">&nbsp;</td>

  </tr>

</table>

 
<div id="block"><?php include("footer.php"); ?></div>

</body>

</html>

El tronco aun esta en tablas, y el footer ya lo he transformado, ahora me gustaría ir a por el header.
Aqui os pongo el include del header:

Código HTML:

<table width="800" height="252" border="0" align="center" cellpadding="0" cellspacing="0" valign="top">
  <tr valign="top" cellpadding="0" cellspacing="0">
    <td width="648" height="229" align="center" valign="top"><img src="images/cabecera1.jpg" align="top"></td>
    <td width="152" height="229" align="center" valign="top"><img src="images/cabecera2.jpg" border="0" align="top" usemap="#Map"></td>
  </tr>
    <tr valign="top" cellpadding="0" cellspacing="0">
    <td width="800" height="23" align="center" valign="top" colspan="2"><img src="images/cabecera3.jpg" border="0" align="top"></td>
  </tr>
</table>

Este header está dentro de un div, para poder alinearlo al centro para cuando lo vaya a pasar a css.
el div es este:
<div id="block"><?php include("header.php"); ?></div>
y en referencia a css:

Código:

#block {
     margin: 0px auto 0px auto;
     padding: 0px;
     width: 800px;
}

Yo lo que había intentado era esto:

Código HTML:

 <div class="cabecera"><img src="images/cabecera1.jpg"></div>
    <div class="cabecera"><img src="images/cabecera2.jpg" border="0" usemap="#Map"></div>
<img src="images/cabecera3.jpg" border="0">

CSS:

Código:

div.cabecera {
float: left;
}

Sale centrado, pero el unico problema es que en IE me sale un espacio en blanco entre el header y el tronco...
Alguna idea u otra forma de afrontar el problema?

coke_clown · #2 (**permalink**) 13/08/2007, 17:52

prueba haciendo ID en el css
#cabecera { PROPIEDADES }
y en el HTML lo haces asi

<div id="cabecera">CONTENIDO</div>

si e que era esa tu pregunta xD

pzin · #3 (**permalink**) 13/08/2007, 18:00

Si quiere aplciar un mismo estilo para dos elementos diferentes, no le veo la lógica a usar un ID en vez de una clase.

Spydis · #4 (**permalink**) 14/08/2007, 05:19

Para que cambiar ID por class? Total es lo mismo, además esa no era mi pregunta.
Lo que quiero es transformar las tablas del header a divs pero que quede exactamente igual...

Código HTML:

<table width="800" height="252" border="0" align="center" cellpadding="0" cellspacing="0" valign="top">
  <tr valign="top" cellpadding="0" cellspacing="0">
    <td width="648" height="229" align="center" valign="top"><img src="images/cabecera1.jpg" align="top"></td>
    <td width="152" height="229" align="center" valign="top"><img src="images/cabecera2.jpg" border="0" align="top" usemap="#Map"></td>
  </tr>
    <tr valign="top" cellpadding="0" cellspacing="0">
    <td width="800" height="23" align="center" valign="top" colspan="2"><img src="images/cabecera3.jpg" border="0" align="top"></td>
  </tr>
</table>

Entre la cabecera1.jpg y la cabecera2.jpg ocupan 800px de ancho que es el maximo de mi web y cabecera3.jpg ocupa 800px ella sola. El tema es hacer que esas 3 imagenes por separado se alinien bien horizontalmente para que se junten y me den la imagen de la cabecera total.
Creo que mi duda es bien sencilla, espero que me entiendan...
Salu2!

pzin · #5 (**permalink**) 14/08/2007, 12:12

Sé que no es lo que preguntabas, pero no viene mal recordarlo.

Usar clases o ID no es lo mismo. ID es un selector único, es decir, solo puede usarse una vez en el documento. La mayoría de los navegores no fuerzan a un único uso, pero así es la recomendación. Para usar un mismo estilo varias veces, se usan clases.

Spydis · #6 (**permalink**) 14/08/2007, 12:16

Ok, gracias por aclararlo

De todas formas, podría alguien resolverme la duda?

Spydis · #7 (**permalink**) 15/08/2007, 15:01

Parece ser que es más complicado de lo que creía ya que nadie responde...

Jolmar · #8 (**permalink**) 15/08/2007, 15:14

Hola, has probado meter la tabla del cuerpo dentro de otro <div></div>,
asi quedaria:
<div>La Cabecera</div> luego usas un <br /> y despues
<div>La tabla</div> creo que serviria...

Spydis · #9 (**permalink**) 16/08/2007, 07:33

Te refieres a usar la cabecera así?

Código HTML:

 <div class="cabecera"><img src="images/cabecera1.jpg"></div>
    <div class="cabecera"><img src="images/cabecera2.jpg" border="0" usemap="#Map"></div>
<img src="images/cabecera3.jpg" border="0">

Código HTML:

<br>

y luego meter el tronco dentro de otro div?