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...