La img se sale del DIV

[chemajf]

Hola:
tengo un problema mu raro.

Tengo el siguiente codigo HTML:

Código HTML:

<div id="footer">

	<div class="left">
		<a href="" title="Código ético">Código ético</a>
		|
		<a href="" title="Privacidad de datos">Privacidad de datos</a>
		|
		<a href="" title="Condiciones de uso">Condiciones de uso</a>
	</div>
	
	<div class="validation">
		<a title='' href="e" target="_blank">
			<img alt='' title='' src="/img/aaa.gif">
		</a>
	</div>

</div> 

Con el siguiente CSS:

Código:

#footer {
	border-top: 1px solid #CCCCCC;
	float: left;
	margin: 40px 0 0;
	padding: 0 0 20px;
	width: 100%;
}

#footer .left {
	color: #666666;
	float: left;
	margin: 21px 0 0;
}

#footer .validation {
	float: right;
	margin: 21px 0 0;
}

Bien, el problema es que en IE6 y 7 la imagen del div class="validation", se pasa a la izquierda, es como si se saliera del div que la contiene y se pone debajo de los enlaces de la derecha.

En FF no tengo problemas, se ve bien, los enlaces a la izquierda y a la misma altura la imagen a la derecha.

La imagen en pequeña, de solo, 69x25.

Le he dado ya muchas vueltas y no encuentro la manera de ponerlo bien y no se porque demonios se pone así.

Haciendo pruebas para ver que podía estar pasando, le di un fondo rojo al div class="validation" y el div está en su sitio, a la derecha, sin embargo la imagen se sale del div y se coloca a la izquierda.

En fin, agradecería alguna ayuda.

Gracias a todos.

[hades87]

Mírate esto, a ver si puede llegar a solventar el problema. Y trata de hacer el menú con listas y css

[Mikmoro]

Tienes la imagen sin cerrar: te falta la barra final.

<img alt='' title='' src="/img/aaa.gif" />

¿Tienes un DOCTYPE correcto y demás?

[chemajf]

Gracias hades87, al final lo he resuelto colocando un div invisible debajo, quednado asi:

Código HTML:

<div id="footer">

	<div class="left">
		<a href="" title="Código ético">Código ético</a>
		|
		<a href="" title="Privacidad de datos">Privacidad de datos</a>
		|
		<a href="" title="Condiciones de uso">Condiciones de uso</a>
	</div>
	
	<div class="validation">
		<a title='' href="e" target="_blank">
			<img alt='' title='' src="/img/aaa.gif">
		</a>
	</div>

	<div style="width: 100%; height: 1%;"></div>

</div> 

Gracias a todos, muchas gracias.

[hades87]

Ese div no tiene sentido alguno, te aconsejo una de las soluciones del enlace