no consigo anular un estilo para colocar una imagen, ¿me ayudan?

[suntus]

Holass

Veran estoy dandole vueltas a una hoja de estilos donde tengo un menu y quiero dentro del div del menu meter una imagen y que esta imagen no cumpla con algunas de las condiciones de ese div

en concreto el div menu es este

Código:

.menu {font-size:14px;padding:0px; float:right; width:700px;}
.menu ul {padding:0;margin:0;list-style-type:none; height:28px; background:#2359aa;}
.menu ul ul {width: auto;}
.menu ul li {float:left;height:28px;line-height:28px;}
.menu ul ul li {display:block;width: auto;height:auto;position:relative;line-height:1em; border-bottom:1px #2384BF solid;}
.menu a, .menu a:visited {display:block;float:left;height:100%;font-size:14px;text-decoration:none;color:#fff;background:#2359aa;padding:0 26px 0 22px;font-weight:bold;}
.menu a.current{background:#3da1e0;}
.menu ul ul a, .menu ul ul a:visited {display:block;background:#2359aa; color:#fff;width:12em;height:100%;line-height:1em; padding:0.5em 1em;}
.menu ul table ul a, .menu ul table ul a:visited  {width:14em; w\idth:12em;}
.menu table {position:absolute; left:0; top:0; z-index:-1;}
.menu ul ul table {lef\t:-1px;}
.menu ul ul table ul.left {margin-lef\t:2px;}
.menu li:hover {position:relative;}
.menu ul ul ul a, .menu ul ul ul a:visited {background:#3da1e0;}
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#3da1e0;}
.menu ul :hover a.sub1 {background:#3da1e0;}
.menu ul ul :hover a.sub2 {background:#3da1e0;}
.menu a:hover {color:#fff;background:#3da1e0;}
.menu :hover > a {color:#fff;background:#3da1e0;}
.menu ul ul a:hover{color:#fff;background:#3da1e0;}
.menu ul ul :hover > a {color:#fff;background:#3da1e0;}
.menu ul ul ul a:hover {background:#3da1e0;}
.menu ul ul ul :hover > a {background:#3da1e0;}
.menu ul ul ul ul a:hover {background:#eee;}
.menu ul ul {visibility:hidden;position:absolute;height:0;top:28px;left:0;width:14em;}
.menu ul ul ul{left:14em;top:0;width:14em;}
.menu ul ul ul.left {left:-14em;}
.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible; height:auto; padding-bottom:3em; background:transparent url(images/trans.gif);}
.menu ul :hover ul ul{visibility:hidden;}
.menu ul :hover ul :hover ul ul{visibility:hidden;}
.menu ul :hover ul :hover ul{visibility:visible;}
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

y luego el html

Código:

<div class="menu">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="quienes-somos.html">Quienes somos</a></li>
<li><a href="contacto.html">Contacto</a></li>
<li><img src="images/es-on.png"  width="38" border="0" /><img src="images/fr-off.png" width="38" border="0" /></li>
</ul>
</div>

Asi como esta se ve perfecto, pero cuando a esas imagenes le pongo un enlace se jode el invento y eso es lo que quiero hacer, que las imagenes no cambien de estilo cuando les añada un <a href="#">

¿podriais iluminarmeee un poco?

Muchas gracias a todos

[rodomiro]

Crea una clase para los A?

[suntus]

Iniciado por rodomiro

Crea una clase para los A?

el caso es que es lo primero que probe

<li class="imagenes-menu"><a href="/"><img src="images/es-on.png" width="38" border="0" /></a></li>

¿es lo que sugieres?
el caso es que probe eso, pero los efectos en las imagenes al ser A seguian sucediendo, si es el camino sigo probando.. seguramente algo me comi

[javiandgo]

Puedes definir el estilo para las imagenes en concreto si se encuentran dentro de la clase .menu, puedes ponerla .menu img {el estilo a definir}, esto aplicara para todas las imagenes que se encuentren dentro del div clase menu, si quieres ser mas especifico y solo cambiar las imagenes que se encuentran dentro de la lista pones .menu ul img {...}

[DragonX]

lo que deberias hacer es resetear las propiedades del "a"
vos tenés esto:

Código CSS:

.menu a, .menu a:visited {display:block;float:left;height:100%;font-size:14px;text-decoration:none;color:#fff;background:#2359aa;padding:0 26px 0 22px;font-weight:bold;}
 

todos los enlaces que esten dentro del div menu. Lo que incluiría una imagen con enlace

deberías crear una especificación para la simagenes que están dentro de un enlace en el DIV .menu ¿cómo?

Código CSS:

.menu a img{}
 

Ahí le estás dando propiedades a la imagen que esta dentro del enlace que esta dentro de menu

Espero te sirva!

[suntus]

ok, gracias a todos

lo que estoy haciendo ahora, aunq es parecido a lo que ya estube probando pero con clases

en el CSS
.menu a img{ .... }

y en el html, lo dejo tal cual, ya que es una imagen.

ahora me falta saber que meto entre los {} para conseguir lo que quiero, porq meta lo que meta, me lo suma a lo que ya habia, vamos que si pongo un border-bottom me esta sacando lo mismo que antes pero con el borde :)

lo suyo seria poder decir de alguna manera lo que dice DrangonX
[lo que deberias hacer es resetear las propiedades del "a"], con algun comando dentro del .menu a img{ .... }, pero me temo que eso no es posible.

[DragonX]

Código CSS:

display:inline-block;float:left;height:auto;text-decoration:none;background:none;padding:0;
 

probá con eso

[suntus]

gracias DragonX

por los comentarios estoy casi seguro que no doy con la tecla y es una tonteria, porque me estais guiando por el camino que en principio habia pensado, y sigo con la misma suerte, no me va lo que comentas.

lo he preparado para poder mostrarlo mejor
http://178.32.60.14/default.html

he puesto el menu y 2 bloques de 2 imagenes.

El primer bloque son 2 banderas, y se visualizan tal como quiero, pero necesito ponerles enlaces y ese es el segundo bloque, las mismas imagenes pero con 'href'

luego el CSS
http://178.32.60.14/style.css
la primera linea es la sugerida por ti


Gracias por todo y a todos.

[suntus]

al final lo he medio dejado bien..

puse
.menu a img{margin:0px -26px 0px -16px;}

una chapuzilla, pero bueno..

no consigo juntarlo mas, pero puede pasar asi..

gracias a todos