Le estoy haciendo la pagina a un amigo de una pizzería y tengo una parte de codigo que tiene un comportamiento muy distinto dependiendo del navegador y no consigo arreglarlo.
El código en cuestion es:
<style type="text/css">
#slideshow {
color:#fff;
list-style-type: none;
}
#slideshow li {
display:inline
}
.menuanimado {
overflow: hidden;
height: 80px;
width: 502px;
position: absolute;
}
</style>
.
.
.
.
<table>
<tr>
<td style="position:relative;">
<img src="imagenes/izquierda.png" onclick="clearTimeout(tiempo); desplazamiento=180; despl_der(-35)"/>
</td>
<td class="menuanimado" style="position:relative">
<div class="menuanimado" style="">
<ul id="slideshow">
<li id="imagen1" class="imagen" title="Entrantes" onclick="cambiacarta('entrantes')" style="left:-35px; height:80px; width:80px; position:relative">
<img style="position:absolute; height:80px; width:80px" src="imagenes/ensaladas.jpg"/>
<img style="position:absolute; z-index:150; width:80px; height:80px" src="imagenes/Entrantes2.png">
</li>
<li id="imagen2" class="imagen" title="Platos Combinados" onclick="cambiacarta('platos')" style="left:55px; height:80px; width:80px; position:relative">
<img style="position:absolute; height:80px; width:80px" src="imagenes/platocombinado.jpg"/>
<img style="position:absolute; z-index:150; height:80px; width:80px" src="imagenes/Platos.png">
</li>
<li id="imagen3" class="imagen" title="Sandwiches" onclick="cambiacarta('sandwiches')" style="left:145px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/sandwiches.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Sandwiches2.png">
</li>
<li id="imagen4" class="imagen" title="Croissants" onclick="cambiacarta('croisants')" style="left:235px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/croissant.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Croisants.png">
</li>
<li id="imagen5" class="imagen" title="Hamburguesas y Perritos" onclick="cambiacarta('hamburguesas')" style="left:325px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/hamburguesa.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Hamburguesas.png">
</li>
<li id="imagen6" class="imagen" title="Bocatas" onclick="cambiacarta('bocatas')" style="left:415px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/bocadillo.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Bocatas.png">
</li>
<li id="imagen7" class="imagen" title="Pizzas" onclick="cambiacarta('pizza')" style="left:505px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/Pizza.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Pizza.png">
</li>
<li id="imagen8" class="imagen" title="Carnes" onclick="cambiacarta('carnes')" style="left:595px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/carne.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Carnes.png">
</li>
<li id="imagen9" class="imagen" title="Pescados" onclick="cambiacarta('pescados')" style="left:685px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/pescado.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Pescados.png">
</li>
<li id="imagen10" class="imagen" title="Linea Integral" onclick="cambiacarta('integral')" style="left:775px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/pan-integral.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Integral.png">
</li>
<li id="imagen11" class="imagen" title="Combinados de frutas naturales" onclick="cambiacarta('combinados')" style="left:865px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/frutas.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Frutas.png">
</li>
<li id="imagen12" class="imagen" title="Love Smoothies" onclick="cambiacarta('love')" style="left:955px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/LoveSmoothie.png"/>
<img style="position:absolute; z-index:150" src="imagenes/Love.png">
</li>
<li id="imagen13" class="imagen" title="El Rincon del Gourmet" onclick="cambiacarta('rincon')" style="left:1045px; height:80px; width:80px; position:relative">
<img style="position:absolute; width:80px; height:80px" src="imagenes/gourmet.jpg"/>
<img style="position:absolute; z-index:150" src="imagenes/Rincon.png">
</li>
</ul>
</div>
</td>
<td>
<img src="imagenes/derecha.png" onclick="clearTimeout(tiempo); desplazamiento=180; despl_izq(382)"/>
</td>
</tr>
</table>
Muestro las imagenes de los siguientes navegadores
Internet Explorer 7
así es como quiero que salga en todos los navegadores, pero si uso el Firefox 3.6.8
y con Opera
Alguien me puede decir como hacer para que el firefox y el opera me muestren como en IE
Muchas gracias a todos.
