¿DIV con un borde inferior especial?

[JSGarcia91]

Hola a todos, me gustaría saber cómo hacer lo siguiente para todos los navegadores, lo del borde inferior:



Está hecho con una imagen a la que he modificado los márgenes, pero al ejecutarlo con IE pasa esto:



El que se ve bien está ejecutado con Google Chrome. ¿Hay alguna propiedad de CSS que me permita hacer lo que yo quiero o debe hacerse con una imagen como lo estoy haciendo ahora?.

Un saludo y gracias a todos.

[fishdesign]

Si es posible hacer esos "picos" con CSS. El problema aquí es que el bloque es una imagen (al menos eso creo).
Recrear todo con CSS es posible, pero dudo que funcione bien en todos los navegadores (sobre todo IE).

Si pones esa hilera justo después del bloque, si este no tiene float, debería aparecer justo debajo.
Puedes posicionarlo usando position:relative (no deberías usar márgenes)

[JSGarcia91]

Iniciado por fishdesign

Si es posible hacer esos "picos" con CSS. El problema aquí es que el bloque es una imagen (al menos eso creo).
Recrear todo con CSS es posible, pero dudo que funcione bien en todos los navegadores (sobre todo IE).

Si pones esa hilera justo después del bloque, si este no tiene float, debería aparecer justo debajo.
Puedes posicionarlo usando position:relative (no deberías usar márgenes)

Vale, he puesto la imagen justo debajo de cuando acaba el div (todo lo de arriba es un div y la hilera con los picos una imagen de 10px). Se me quedaba un poco separado y le he dicho que se muestre como un bloque (display: block;) y se ha juntado. Ahora también se ve bien en IE.

De todas formas ¿hay alguna propiedad de css que haga eso mismo sin el lío de la imagen? Ya que si ahora quiero cambiar el pattern de fondo de ese div, me tocaría volver a hacer la imagen de nuevo con el nuevo pattern.

Un saludo y gracias por contestar tan rápido.

[C2am]

Creo que para compatibilidad en todos los navegadores la imagen es la mejor opción.
Ahora, si no te importa que en IE se pierda ese borde podrías intentar con http://www.w3schools.com/cssref/css3...rder-image.asp

Ahora, en cuanto a la imagen, si lo que te molesta es tener que hacer esos picos con el nuevo diseño, yo lo haría al revés, es decir dibujar la parte gris, y dejar transparente la parte de arriba. Luego posicionar la imagen sobre el fondo de colores.

Saludos

[JSGarcia91]

Iniciado por C2am

Creo que para compatibilidad en todos los navegadores la imagen es la mejor opción.
Ahora, si no te importa que en IE se pierda ese borde podrías intentar con [url]http://www.w3schools.com/cssref/css3_pr_border-image.asp[/url]

Ahora, en cuanto a la imagen, si lo que te molesta es tener que hacer esos picos con el nuevo diseño, yo lo haría al revés, es decir dibujar la parte gris, y dejar transparente la parte de arriba. Luego posicionar la imagen sobre el fondo de colores.

Saludos

Muchísimas gracias por la información.

¿Si lo hago al revés no tendría el mismo problema pero con el fondo de la página? Es decir si le pongo la parte sólida (no transparente? a la otra parte que no son los picos, si quisiera camiar le fondo no me tocaría volver a hacer otra imagen?

Un saludo y gracias de nuevo.

[C2am]

¿Si lo hago al revés no tendría el mismo problema pero con el fondo de la página? Es decir si le pongo la parte sólida (no transparente? a la otra parte que no son los picos, si quisiera camiar le fondo no me tocaría volver a hacer otra imagen?

Sí, por eso tenes que analizar cada cuanto vas a cambiar el fondo de colores, y cada cuanto el fondo de la página.
Tome como referencia, que cambiarias esos fondos de colores al pasar de una página a otra(para diferenciar secciones), pero manteniendo el fondo siempre del mismo color.

Además, y no se que programas para editar imagenes usas, pero siempre es más fácil cambiar el ese color sólido, al entramado de colores, bah, al menos en fireworks.

En resumen la cuestión es ¿cada cuanto tiempo lo voy a cambiar? ¿al cambiar esa parte del diseño, no cambiaré tambien esos picos?.
Es decir, vale la pena preocuparme por el asunto?
Saludos