Border bottom distinto en Firefox / IE

Dago · #1 (**permalink**) 16/02/2010, 10:43

Gente,
Tengo el siguiente codigo...

Código:

<!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>
<style>
.menu
{
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
}
img
{
border: 0px;
}
</style>
</head>
<body>

  <div class="menu">
    <img src="imagen.jpg" width="800" height="60" alt="Banner Menu" usemap="#Map" />
      <map name="Map" id="Map">
      <area shape="rect" coords="3,0,105,67" href="1.php" />
      <area shape="rect" coords="105,0,253,86" href="2.php" />
      <area shape="rect" coords="253,0,450,100" href="3.php" />
      <area shape="rect" coords="451,0,623,90" href="4" />
      <area shape="rect" coords="625,0,861,372" href="5" />
    </map>
    </div>
</body>
</html>

Lo que hace es poner un borde superior y otro inferior a una IMAGEN MAPPEADA.

Para variar...
- En firefox se ve bien.
- En IE me sale entre la parte inferior de la imagen y el borde inferior un espacio de alrededor de 3 o 5 px.

Esto no me sorprende, ya que siempre existen diferencias como por ejemplo:

- En firefox me funciona:

Código:

	height: 20px;
	display:table-cell; 
	vertical-align: middle; 
	width: 800px;

Esto para alinear verticalmente un texto dentro de un DIV.

- En IE NO me funciona...

En fin... Alguno podria orientarme?! Yo antes trabajaba con tablas y no tenia problemas como estos. Se supone que maquetar con CSS es adaptarse al standar... Pero... Qué pasa cuando el standar es interpretado de distintas maneras por los interpretes?!

En fin... Agradecere cualquier ayuda, ya que me estoy volviendo loco. Siempre es dos para el peso.

Gracias.