Problema con capas en ie8

mandrake88 · #1 (**permalink**) 12/03/2011, 12:10

Hola:

Tengo un problema con unas capas en internet explorer 8. Les muestro el codigo y despues paso a explicarles cual es el problema

Código HTML:

Ver original<div id="paneles">
<div id="panel_01" style="margin:0 auto; margin-top: 10px;">
        <span style="float:left; width: 50%; padding-bottom: 6px;">
                 <table> // Contenido de la tabla </table>
        </span>
        <span style="float:right; width: 50%; padding-bottom: 6px;">
        </span>
                 <table> // Contenido de la tabla </table>
        <span style="float:left; width: 50%; padding-bottom: 6px;">
                  <table> // Contenido de la tabla </table>
        </span>
        <span style="float:right; width: 50%; padding-bottom: 6px;">
                <table> // Contenido de la tabla </table>
        </span>
</div>
</div>

Es un maquetado bastante simple, son 2 filas por 2 columnas. En Chrome, Mozilla, Opera me funciona perfecto. Pero en internet explorer sucede que las columnas no salen enfrentadas, es decir, el 1er span alineado a la izq, y el segundo que deberia estar a la misma altura pero alineado a la derecha, me sale abajo (alineado a la derecha si, pero abajo del otro span)
Baje los porcentajes del width 50%, y se soluciona, pero no me sirve asi, necesito que cada columna ocupe el 50% del espacio disponible

Alguna idea?

sanxuan · #2 (**permalink**) 12/03/2011, 12:26

Me suena a que no estés usando la etiqueta <!DOCTYPE> para definir el tipo de documento HTML.

mandrake88 · #3 (**permalink**) 12/03/2011, 13:12

Creo que esta bien el doctype

Código HTML:

Ver original<!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" dir="ltr" lang="es" xml:lang="es">
<head>
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="es" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />

mdk · #4 (**permalink**) 12/03/2011, 13:23

Prueba así:

Código HTML:

<div id="paneles">
	<div id="panel_01" style="margin:0 auto; margin-top: 10px;">
        <div style="float:left; width: 50%; padding-bottom: 6px;">
			<table> // Contenido de la tabla </table>
        </div>
        <div style="float:right; width: 50%; padding-bottom: 6px;">
			<table> // Contenido de la tabla </table>
        </div>
	</div>     
	<div id="panel_01" style="margin:0 auto;">
	     <div style="float:left; width: 50%; padding-bottom: 6px;">
                  <table> // Contenido de la tabla </table>
        </div>
        <div style="float:right; width: 50%; padding-bottom: 6px;">
                <table> // Contenido de la tabla </table>
        </div>
	</div>
</div>

Te muestra 2 filas por 2 columnas. Solo he sustituidos los spam por divs y he añadadio una nueva capa.

mandrake88 · #5 (**permalink**) 12/03/2011, 13:35

Lo que pasa es que esto es parte de un bloque que tiene pestañas y que se van ocultando/moostrando segun donde el user hace click.

Tienen que ser spans, por que lo que hace es tomar todos los divs contenidos en el div "paneles", ocultarlos, y mostrar solamente el que el user hace click. Y si pongo div en lugar de los spans, me oculta cosas de mas ^^^

Los spans tienen que estar contenidos ambos en un unico div, que tiene un id para identificar el panel, en este caso "panel_01"

mdk · #6 (**permalink**) 12/03/2011, 15:17

Y porque no ocultas los divs que quieres ocultar uno a uno, en vez de ocultar el contenedor y todo su contenido? con javascript lo harais en una linea.

sanxuan · #7 (**permalink**) 12/03/2011, 15:19

La segunda tabla, si te fijas, la has colocado fuera del span. Me pregunto si será la causa del problema.
Cuando cambio eso el resultado es el mismo en los dos navegadores. Sin embargo te advierto que ese código no es válido.
Puedes comprobar los errores en el código en el siguiente enlace:
http://validator.w3.org

mandrake88 · #8 (**permalink**) 12/03/2011, 15:48

Cita:

Iniciado por sanxuan

La segunda tabla, si te fijas, la has colocado fuera del span. Me pregunto si será la causa del problema.
Cuando cambio eso el resultado es el mismo en los dos navegadores. Sin embargo te advierto que ese código no es válido.
Puedes comprobar los errores en el código en el siguiente enlace:
http://validator.w3.org

Si la tabla quedo fuera del span, pero fue un error al pasar el codigo al foro. Despues con respecto a la validacion, no es algo que me preocupe, nunca va a validar por que estoy usando tablas dentro de divs o span.

Cita:

Iniciado por mdk

Y porque no ocultas los divs que quieres ocultar uno a uno, en vez de ocultar el contenedor y todo su contenido? con javascript lo harais en una linea.

De todas maneras eso no soluciona el problema. La solucion que vos diste mas arriba funcionaba por que habias agregado mas capas, no por el cambio de span por div.

mdk · #9 (**permalink**) 12/03/2011, 16:56

Claro, sustitui los span, por div (capas). Y porque no solucionaría el problema? es que no estoy seguro que con span se pueda hacer lo que pides.