No funciona en IE AYUDA!!

rakata · #1 (**permalink**) 19/08/2009, 02:57

Hola,

Bueno creo que ya deben estar habituados a que les pida ayuda

Bueno ahora presento un problema como los de siempre con IE

pues IE me descuadra todo haber les muestro con imagenes:

EN IE:

Código:

i26.tinypic.com/velnkm.png

EN FIREFOX:

Código:

i28.tinypic.com/uvdqe.png

EN CHROME:

Código:

i30.tinypic.com/9pltzr.png

pues creo que una imagen dice mas que mil palabras.

el codigo html es este:

Código HTML:

<html>
<head>
<title>Sin título-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcarousel.js"></script>
<style>
a img {
border: 0;
}
</style>
<script>
$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});
$(function() {
    $(".anyClass1").jCarouselLite({
        btnNext: ".next1",
        btnPrev: ".prev1"
    });
});
$(function() {
    $(".anyClass2").jCarouselLite({
        btnNext: ".next2",
        btnPrev: ".prev2"
    });
});
$(function() {
    $(".anyClass3").jCarouselLite({
        btnNext: ".next3",
        btnPrev: ".prev3"
    });
});
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table id="Tabla_01" width="850" height="425" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="5">
			<img src="img/Problema_01.gif" width="850" height="24" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="img/Problema_02.gif" height="140" width="45" height="401" alt=""></td>
		<td background="img/Problema-1_03.gif" height="140" widht="355">
			            <div class="anyClass">
            <ul><li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li></ul>
                        </div></td>
		<td rowspan="4">
			<img src="img/Problema_04.gif" width="60" height="401" alt=""></td>
		<td background="img/Problema-1_05.gif" widht="355" height="140">
			            <div class="anyClass1">
            <ul><li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li></ul>
                        </div></td>
		<td rowspan="4">
			<img src="img/Problema_06.gif" width="35" height="401" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="img/Problema_07.gif" width="355" height="68" alt=""></td>
		<td>
			<img src="img/Problema_08.gif" width="355" height="68" alt=""></td>
	</tr>
	<tr>
		<td background="img/Problema-1_09.gif" height="140" widht="355">
			            <div class="anyClass2">
            <ul><li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li></ul>
                        </div></td>
		<td background="img/Problema-1_10.gif" height="140" widht="355">
			            <div class="anyClass3">
            <ul><li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li>
            <li><a href='?imagen=imagen1' border='0'><img src='imagen1.jpg' alt='imagen1' width='71' height='70' ></a></li></ul>
                        </div></td>
	</tr>
	<tr>
		<td>
			<img src="img/Problema_11.gif" width="355" height="53" alt=""></td>
		<td>
			<img src="img/Problema_12.gif" width="355" height="53" alt=""></td>
	</tr>
</table>
</center>
</body>
</html>

rakata · #2 (**permalink**) 19/08/2009, 02:59

el Jcarousel:

Código HTML:

(function($) {                                          // Compliant with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
    o = $.extend({
        btnPrev: null,
        btnNext: null,
        btnGo: null,
        mouseWheel: false,
        auto: null,

        speed: 200,
        easing: null,

        vertical: false,
        circular: true,
        visible: 5,
        start: 0,
        scroll: 1,

        beforeStart: null,
        afterEnd: null
    }, o || {});

    return this.each(function() {                           // Returns the element collection. Chainable.

        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
        var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;

        if(o.circular) {
            ul.prepend(tLi.slice(tl-v-1+1).clone())
              .append(tLi.slice(0,v).clone());
            o.start += v;
        }

        var li = $("li", ul), itemLength = li.size(), curr = o.start;
        div.css("visibility", "visible");

        li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
        ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
        div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});

        var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
        var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
        var divSize = liSize * v;                           // size of entire div(total length for just the visible items)

        li.css({width: li.width(), height: li.height()});
        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

        div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images

        if(o.btnPrev)
            $(o.btnPrev).click(function() {
                return go(curr-o.scroll);
            });

        if(o.btnNext)
            $(o.btnNext).click(function() {
                return go(curr+o.scroll);
            });

        if(o.btnGo)
            $.each(o.btnGo, function(i, val) {
                $(val).click(function() {
                    return go(o.circular ? o.visible+i : i);
                });
            });

        if(o.mouseWheel && div.mousewheel)
            div.mousewheel(function(e, d) {
                return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
            });

        if(o.auto)
            setInterval(function() {
                go(curr+o.scroll);
            }, o.auto+o.speed);

        function vis() {
            return li.slice(curr).slice(0,v);
        };

        function go(to) {
            if(!running) {

                if(o.beforeStart)
                    o.beforeStart.call(this, vis());

                if(o.circular) {            // If circular we are in first or last, then goto the other end
                    if(to<=o.start-v-1) {           // If first, then goto last
                        ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
                        curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
                    } else if(to>=itemLength-v+1) { // If last, then goto first
                        ul.css(animCss, -( (v) * liSize ) + "px" );
                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
                        curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
                    } else curr = to;
                } else {                    // If non-circular and to points to first or last, we just return.
                    if(to<0 || to>itemLength-v) return;
                    else curr = to;
                }                           // If neither overrides it, the curr will still be "to" and we can proceed.

                running = true;

                ul.animate(
                    animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
                    function() {
                        if(o.afterEnd)
                            o.afterEnd.call(this, vis());
                        running = false;
                    }
                );
                // Disable buttons when the carousel reaches the last/first, and enable when not
                if(!o.circular) {
                    $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
                    $( (curr-o.scroll<0 && o.btnPrev)
                        ||
                       (curr+o.scroll > itemLength-v && o.btnNext)
                        ||
                       []
                     ).addClass("disabled");
                }

            }
            return false;
        };
    });
};

function css(el, prop) {
    return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};

})(jQuery);

y el JQUERY que es:

Código:

code.jquery.com/jquery-latest.pack.js

Bueno espero este bien explicado lo que quiero saber es si hay alguna forma de que IE no lo descuadre no se si colocando un style css o algo hay me dicen, ojala alguien me pueda ayudar gracias,

NOTA: Las imagenes me toco colocarlas asi porque no me deja ya que no tengo 30 mensajes.

Bye.

rakata · #3 (**permalink**) 19/08/2009, 09:49

nadie que me ayude? :(

deirdre · #4 (**permalink**) 19/08/2009, 17:43

Hola rakata

Primero: en que versión de ie se descuadra (ie6, ie7, ie8)

Segundo: para intentar buscar alguna solución sería mucho mejor que subieras un zip con todos los elementos y así se podría hacer pruebas (si lo tienes en red la url).

Bye

rakata · #5 (**permalink**) 19/08/2009, 19:08

En todas las versiones pues tengo IE8 y en otro pc lo vi en IE6 y pasa lo mismo.

deirdre · #6 (**permalink**) 19/08/2009, 20:21

Pon un paquete zip en alguna parte para poder hacer pruebas.

Algo que funciona con html, css, js y con imágenes es necesario disponer de todo para estudiarlo.

Bye

rakata · #7 (**permalink**) 19/08/2009, 21:33

Hola,

Bueno por si algo que lo olvides el tema aqui esta el zip que me pedistes:

Código:

megaupload.com/?d=P7Z90HWV

Disculpa por lo de MegaUpload, espero puedas ayudarme

Gracias.

deirdre · #8 (**permalink**) 20/08/2009, 10:45

Hola rakata

He solucionado tu problema de distribución. Mira tus mensajes privados.

Luego pondré aquí el código con la solución.

Bye

deirdre · #9 (**permalink**) 20/08/2009, 17:17

Hola rakata

He rediseñado tu esquema eliminado la tabla con la que estructurabas tu espacio: Utilizar tablas para diseñar es mal asunto (las tablas es mejor dejarlas para tabular datos), una prueba de estos problemas es precisamente tu petición de ayuda.

Rediseñado con html y css que permite lograr, de forma limpia y ordenada, la distribución que necesitas y que funciona en todos los navegadores.

Tienes dos propuestas, una (1) con la adaptación del código que tu adjuntaste y otra (2) igual pero añadiéndole los controles de avance-retroceso de la galería de fotos.

Aquí los códigos:

1/

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>
<title>Buscando una solucion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcarousel.js"></script>
<script type="text/javascript">
$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});
$(function() {
    $(".anyClass1").jCarouselLite({
        btnNext: ".next1",
        btnPrev: ".prev1"
    });
});
$(function() {
    $(".anyClass2").jCarouselLite({
        btnNext: ".next2",
        btnPrev: ".prev2"
    });
});
$(function() {
    $(".anyClass3").jCarouselLite({
        btnNext: ".next3",
        btnPrev: ".prev3"
    });
});
</script>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
a img {
	border: 0;
}
#envolvente {
	width: 770px;
	margin: 0 auto;
}
#caja-1 {
	width: 355px;
	height: 140px;
	background-image: url('img/Problema-1_03.gif');
	float: left;
}
#caja-2 {
	width: 355px;
	height: 140px;
	background-image: url('img/Problema-1_05.gif');
	float: right;
}
#caja-3 {
	width: 355px;
	height: 140px;
	background-image: url('img/Problema-1_09.gif');
	float: left;
}
#caja-4 {
	width: 355px;
	height: 140px;
	background-image: url('img/Problema-1_10.gif');
	float: right;
}
.separador {
	margin-top: 35px;
}
#separador-1 {
	clear: both;
	height: 25px;
}
#separador-2 {
	clear: both;
	height: 70px;
}
</style>

</head>

<body>
<div id="envolvente">
	<div id="separador-1"></div>
		<div id="caja-1">
		<div class="anyClass separador">
			<ul>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
			</ul>
		</div>
		</div>

		<div id="caja-2">
		<div class="anyClass1 separador">
			<ul>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
			</ul>
		</div> 
		</div>

	<div id="separador-2"></div>

		<div id="caja-3">
		<div class="anyClass2 separador">
			<ul>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
			</ul>
		</div>
		</div>

		<div id="caja-4">
		<div class="anyClass3 separador">
			<ul>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
				<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
			</ul>
		</div>
		</div>
</div> <!-- fin de envolvente -->

</body>
</html>

Sigue en el siguiente post...

deirdre · #10 (**permalink**) 20/08/2009, 17:17

...y 2/

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>
<title>Buscando una solucion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcarousel.js"></script>
<script type="text/javascript">
$(function() {
    $(".anyClass").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});
$(function() {
    $(".anyClass1").jCarouselLite({
        btnNext: ".next1",
        btnPrev: ".prev1"
    });
});
$(function() {
    $(".anyClass2").jCarouselLite({
        btnNext: ".next2",
        btnPrev: ".prev2"
    });
});
$(function() {
    $(".anyClass3").jCarouselLite({
        btnNext: ".next3",
        btnPrev: ".prev3"
    });
});
</script>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
a img {
	border: 0;
}
#envolvente {
	width: 770px;
	margin: 0 auto;
}
#caja-1 {
	width: 355px;
	height: 140px;
	background-image: url('img/Problema-1_03.gif');
	float: left;
}
#caja-2 {
	width: 355px;
	height: 140px;
	background-image: url('img/Problema-1_05.gif');
	float: right;
}
#caja-3 {
	width: 355px;
	height: 140px;
	background-image: url('img/Problema-1_09.gif');
	float: left;
}
#caja-4 {
	width: 355px;
	height: 140px;
	background-image: url('img/Problema-1_10.gif');
	float: right;
}
.separador {
	margin-top: 35px;
}
#separador-1 {
	clear: both;
	height: 25px;
}
#separador-2 {
	clear: both;
	height: 70px;
}
.prev, .prev1, .prev2, .prev3 {
	float: left;
}
.next, .next1, .next2, .next3 {
	float: right;
}
</style>

</head>
<body>
<div id="envolvente">
<div id="separador-1"></div>

<div id="caja-1">
<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass separador">
	<ul>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
	</ul>
</div>
</div>





<div id="caja-2">
<button class="prev1"><<</button>
<button class="next1">>></button>
<div class="anyClass1 separador">
	<ul>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
	</ul>
</div> 
</div>

<div id="separador-2"></div>

<div id="caja-3">
<button class="prev2"><<</button>
<button class="next2">>></button>
<div class="anyClass2 separador">
	<ul>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
	</ul>
</div>
</div>

<div id="caja-4">
<button class="prev3"><<</button>
<button class="next3">>></button>
<div class="anyClass3 separador">
	<ul>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
		<li><a href='#'><img src='imagen1.png' alt='imagen1' width='71' height='70' /></a></li>
	</ul>
</div>
</div>
</div>

</body>
</html>

Espero te sea útil.

Bye

rakata · #11 (**permalink**) 20/08/2009, 19:27

Bueno lo del avance y retroceso, ya lo tenia solo que no lo habia puesto aqui, disculpas.

Lo de tu solucion pues esta bien pero tengo una pregunta, a que sirve el separador.

y no hay una forma de hacerlo usando TD.

deirdre · #12 (**permalink**) 20/08/2009, 20:03

Hola

El .separador es necesario para que la tira de fotografías te quede centrada en altura respecto a la imagen del fondo (en el ejemplo es el fondo negro). Sin esta clase la tira de fotos quedaría situada arriba respecto al fondo negro. Haz pruebas modificando el valor margin-top: 35px y verás lo que sucede en este aspecto que te comento. Si la altura de las fotos que metas en tu galería cambia, debes ajustar este valor hasta que la tira de fotos quede centrada.

El #separador-1 es para que todo el conjunto baje 25px del borde superior del navegador (igual que tu tabla).

Y el #separador-2 permite cortar el flujo de los divs y situar la galería 3 y la 4 debajo de la galería 1 y la 2, con una separación de 70px (la misma separación que tienen en tu tabla).

Como ya te comenté en el zip que te envié y también en el post de arriba este diseño es html y css (como debe ser) y no tablas. Las tablas no son la mejor solución para distribuir espacios en una página web. las tablas son para lo que fueron creadas: para tabular (organizar en filas y columnas) datos.

Como verás, el diseño que he montado, siguiendo los parámetros visuales de tu tabla original, permite que se vea igual en cualquier navegador, y eso es lo importante.

Bye

rakata · #13 (**permalink**) 20/08/2009, 22:26

Ok, Muchas gracias por tu ayuda

rakata · #14 (**permalink**) 21/08/2009, 17:51

Hay te mande un PV.

deirdre · #15 (**permalink**) 23/08/2009, 19:11

Hola rakata

Después de nuestros numerosos mensajes privados para intentar conseguir que la cosa funcione, y alegrándome de que los últimos retoques hayan funcionado me permito darte un último "consejo" (no es un consejo, es mi opinión sobre todo este tema):

Un comentario que deberías tener en cuenta:

En realidad todo esto de buscar parches para que iexplorer (en este caso en sus tres versiones últimas) se comporte de forma adecuada siempre es algo un poco chapucero y de resultados algo inciertos en páginas complejas como es la tuya.

Tu diseño, según me dijiste, partía de un trabajo en photoshop (creo ?) y luego lo exportabas a html. Como esta exportación es errónea en cuanto a su visionado en iexplorer que (nos guste o no nos guste) es el navegador más importante por su número de usuarios, si yo fuera tú partiría de cero (partiendo de las imágenes que componen tu diseño, pero sin trocear) y montaría la página en divs (html y css) y quitaría las tablas que son el auténtico problema.

Tomar esta decisión seguramente te supondrá un cierto retraso en tus planes, pero conseguirás un trabajo bien construido y que no te causará problemas en el futuro.

Si tomas esta decisión, seguro que en este foro encuentras gente que te ayude si tú empiezas a trabajar (yo no esperaría a que otros me hicieran el trabajo, pero sí que otros compañeros me ayudasen a terminarlo, ajustarlo y pulirlo).

Siempre puedes abrir con el diseño que ahora tienes y ponerte a trabajar en la nueva estructura, con calma y al finalizarlo haces la sustitución.

Comenta algo.

Bye