Problema con <div> en IE

[Finseneu]

Resulta que tengo un menu vertical conformado por varias tablas, para separarlas uso un imagen transparente y mediante el parametro vspace ajusto el espacio entre una y otra.
En Firefox se ve perfecto pero al verlo en Explorer el espacio que debia ser de un par de pixels se hacia mucho mas grande.
Cuando reviso el codigo veo que esto se debe a que la imagen esta encerrada en una etiqueta div:

Código HTML:

<div align="center"><img src="img/pixel_transparent.gif" width="1" height="1" vspace="1"></div> 

Esta etiqueta la agrega IE por su cuenta, yo no la pongo en ningun momento.
Agradeceria que me dijeran a que se debe esto y como evitarlo.
Muchas gracias.

[tunait]

Hombre, no creo que IE se dedique a agregar código a las páginas web ... eso te lo debe de haber metido el editor web con el que estés trabajando (suponiendo que estés usando alguno).

El dreamweaver tiene esa costumbre de poner un div para alinear dentro de una celda

Quítale a mano el div y dale a la celda la propiedad align="center", aunque mejor si lo haces con css y le aplicas a la celda un style="text-align: center"

[Finseneu]

Hola Tunait,
Ahora se normal, debe haber estado viendo algo cacheado pero lo extraño es
que en el IDE nunca aparecieron, lo revise varias veces.

De todos modos el problema persiste, se entiende cual es?
Imaginate 2 tablas una debajo de la otra y en el medio tengo una imagen transparente para separarla, uso esto ya que el <br> me deja un espacio muy grande.
En Firefox se ve perfecto, con un espacio de un par de pixeles tal cual debe ser pero en Explorer me aparece un espacio como de 20px o mas.

Código HTML:

<table width="100%" height="20"  border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
                          <td><div align="left">&nbsp;<a href="?s=1" class="nav">• opcion1</a></div></td>
                        </tr>
                      </table>
                    <img src="img/pixel_transparent.gif" width="1" height="1" vspace="1">
                    <table width="100%" height="20"  border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
                        <tr>
                          <td> <div align="left">&nbsp;<a href="aaa" class="nav">• opcion2</a></div></td>
                        </tr>
                    </table> 

Imagino que debe haber un forma mas prolija de hacerlo asi que no tengo problemas en hacerlo de otra forma mientras consiga lo que busco.
Muchas gracias.

[tunait]

Pues lo más práctico (y correcto) es que uses css para aplicar ese espacio entre ambas tablas.

A la primera tabla aplícale este atributo (al tag de table)

style="margin-bottom: 2px"

Con eso podrás prescindir de la imagen

[Finseneu]

Muchas gracias Tunait, un saludo.