Mi CSS y Internet Explorer

[falke]

Estoy haciendo mi primer proyecto completo en PHP/JS/AJAX y probando unas cuantas cosas diseñe un parafo CSS de la siguiente forma:

p.rbutton {
display: inline;
background-color: #d1bf69;
padding-left: 3px;
padding-right: 3px;
padding-bottom: 1px;
margin-right: 5px;
border: 1px #A0A0A0 solid;
}

Con el siguiente contenido:

<img src="img/file.gif"><b>Ver ficha</b>

en Firefox me queda asi:

http://img140.imageshack.us/my.php?image=firefoxfr7.png

pero ahora va Internet Explorer y me lo pone asi:

http://img179.imageshack.us/my.php?image=50578923tj4.png

¿Como puedo evitar esto y hacer que IE me lo muestre igual que Firefox?

Gracias de antemano

[Calizman]

Saludos falke!!

Se me ocurre una idea... que te parece si usas la imagen que tienes como fondo? en vez de que uses esa imagen con un img src, la pones de fondo del div! asi IE reconocera el fondo del div y tendra que ponerlo igual...

Avisame si tienes mejoria con eso!

[Wind]

Entiendo que el párrafo es el cuadro café/beige y que la imagen tiene un alto mayor que él. Osea que quieres que la imagen vaya más allá de los límites del párrafo. ¿Es correcto?

Usar imágenes de fondo como dijo CaLiZzZ es una opción aunque suponiendo que tienes varios botones de diferentes longitudes tendrías que crear imágenes de fondo para cada botón.

Otra opción es usar overlapping que es posicionar un elemento sobre otro. Uno será el párrafo y el otro la imagen.

https://developer.mozilla.org/en/Understanding_CSS_z-index

Usa z-index, position:relative, un left negativo y un padding a la izquierda en tu párrafo, esto lo colocará debajo de la imagen la cual debe tener un z-index mayor (va encima del párrafo).

Esa es mi recomendación. Me gustaría saber si alguien tiene una propuesta más simple.

[Calizman]

Me gustaría saber si alguien tiene una propuesta más simple.

Si!! hacer la imagen completa y ponerla de fondo!

Me explico mejor:

La hoja que tienes del lado izquierdo, ponla junto con el pedazo verde que esta encima de la hoja.
Luego en el div, alineas el texto hacia la izquierda y pones la imagen completa de fondo! y listo!! tienes lo que quieres de una forma mas facil! xD

[falke]

Wind:
Muchas gracias! Funciona! Me sonaba mas complicado de lo que es en realidad :D

Calizzz:
He probado como dices. Si la pongo como fondo la corta mostrando solo la parte que cabe en el <p>, lo cual tiene lógica: Es el fondo del Parrafo por lo que no se saldrá de el.
De todos modos gracias por responder. ;D

[Calizman]

Ok... para eso haces el div de el tamaño que desas no?

No pense que tuviera que ponerlo, supuse que lo entenderias de esa forma, pero fue error mio no ponerlo.

Si tienes una imagen de 15px en un cuadro de 5px, oviamente no aparecera todo tu fondo... por lo que tendras que estirar tu div a los 15px no? para que se vea completo!

quedaria algo asi (suponiendo que tu imagen es de 20 de ancho por 10 de largo)

#ejemplo{
width: 20px
height: 10px
background: url(img.jpg);
}

Entonces tu div tendra el tamaño de tu imagen!
Algo sencillo no? solo es de tener un poco de logica..!

De todos modos gracias por responder. ;D

Estamos para servirte! no dudes en seguir preguntando en el foro!
Saludos!