Hola, mi problema es el siguiente:
Tengo una serie de imagenes (iconos) que quiero poner en linea.
Al pasar por encima el raton quiero que se muestre el borde del div que los contiene y cambie el color de fondo del mismo.
El estilo que estoy usando es este:
Código HTML:
.img_boton
{ width:20px;
height:20px;
padding:1px;
vertical-align:bottom;
border:1px none #FFF;
float:left;
}
.img_boton:hover
{ border:1px solid #286FB2;
background:#AAD6FF;
}
.clear
{ clear:both;
}
El efecto que quiero lo consigo, pero todos los iconos se mueven ya que se suman 2 px al ancho del div sobre el que estamos, eso lo entiendo... pero como puedo evitarlo?
El codigo Html es este:
Código HTML:
<p>
<div class="img_boton"><a href="javascript:formatWord('mensaje','B');" title="negrita"><img src="img/text_bold.gif" /></a></div>
<div class="img_boton"><a href="javascript:formatWord('mensaje','I');" title="itálica"><img src="img/text_italic.gif" /></a></div>
<div class="img_boton"><a href="javascript:formatWord('mensaje','U');" title="subrayado"><img src="img/text_underline.gif" /></a></div>
<div class="img_boton"><a href="javascript:formatWord('mensaje','S');" title="tachado"><img src="img/text_strikethrough.gif" /></a></div>
<br class="clear"></p><textarea name="mensaje" id="mensaje" cols="60" rows="10"></textarea> Hasta incluso se mueve el textarea (esto supongo que poniendole un margin-top mas alto se evitaría).
Podria ser posible que tampoco se movieran las <img> dentro del div? que quedara en la misma posición? esque tambien bailan :S