Foros del Web » Creando para Internet » CSS »

Problema con border redondeados

Estas en el tema de Problema con border redondeados en el foro de CSS en Foros del Web. Buenas tardes amigos, soy novato en esto del html y css y la verdad que me he encontrado con un primer gran obstaculo, a ver ...
  #1 (permalink)  
Antiguo 12/11/2009, 09:10
 
Fecha de Ingreso: noviembre-2009
Mensajes: 2
Antigüedad: 8 años, 1 mes
Puntos: 0
Problema con border redondeados

Buenas tardes amigos,

soy novato en esto del html y css y la verdad que me he encontrado con un primer gran obstaculo, a ver si alguno me puede ayudar. Paso a comentarle:

Estoy diseñando una página web y necesito crear diferentes bloques con bordes redondeados, todo funciona correctamente en firefox y demas navegadores excepto en IE!!!! y es que las imagenes de la parte de abajo del bloques si su altura es menor 15px la imagen se me desplaza hacia arriba pero si supera esta altura todo fluye como el agua!!

alguien tiene alguna idea de porque ie no interpreta la altura que yo estoy marcandole a esos div???

Aquí les dejo mi código a ver si alguien puede comentarme algo porque no encuentro solución:

<html>
<head>
<style>
body{
background: #686868;
}

.box-rounded,
.box-rounded2{
background:#ffffff;
position:relative;
width:400px;
}

.box-rounded .box-content,
.box-rounded2 .box-content{
padding:12px;
}

.box-rounded .tl,
.box-rounded .tr,
.box-rounded .bl,
.box-rounded .br {
display:block;
height:20px;
position:absolute;
width:20px;
}

.box-rounded2 .tl,
.box-rounded2 .tr,
.box-rounded2 .bl,
.box-rounded2 .br {
display:block;
height:10px;
position:absolute;
width:10px;
}

.box-rounded .tl {
background:transparent url(img/layout/tl.png) no-repeat scroll;
left:0;
top:0;
}

.box-rounded .tr {
background:transparent url(img/layout/tr.png) no-repeat scroll;
right:0;
top:0;
}

.box-rounded .bl {
background:transparent url(img/layout/bl.png) no-repeat scroll;
bottom:0;
left:0;
}

.box-rounded .br {
background:transparent url(img/layout/br.png) no-repeat scroll;
bottom:0;
right:0;
}

.box-rounded2 .tl {
background:transparent url(img/layout/tl2.png) no-repeat scroll;
left:0;
top:0;
}

.box-rounded2 .tr {
background:transparent url(img/layout/tr2.png) no-repeat scroll;
right:0;
top:0;
}

.box-rounded2 .bl {
background:transparent url(img/layout/bl2.png) no-repeat scroll;
bottom:0;
left:0;
}

.box-rounded2 .br {
background:transparent url(img/layout/br2.png) no-repeat scroll;
bottom:0;
right:0;
}

.clear{
margin-bottom: 10px;
clear: both;
}

</style>
</head>

<body>
<div class="box-rounded2">
<span class="tl"></span>
<span class="tr"></span>
<span class="bl"></span>
<span class="br"></span>
<div class="box-content">
<h2>Smart, Round Corners?</h2>
<p>This is some div text content. To watch the rounded corners on this box move dynamically, use your browser’s functionality to enlarge this text.</p>
<p>It might not be an original solution, but it is simple, effective, and lightweight. Smart Corners are what I’d call smart.</p>
<p>Oh, yeah, I like it! So round, so smart, so simple and easy </p>
</div>
</div>

<div class="clear">&nbsp</div>

<div class="box-rounded">
<span class="tl"></span>
<span class="tr"></span>
<span class="bl"></span>
<span class="br"></span>
<div class="box-content">
<h2>Smart, Round Corners?</h2>
<p>This is some div text content. To watch the rounded corners on this box move dynamically, use your browser’s functionality to enlarge this text.</p>
<p>It might not be an original solution, but it is simple, effective, and lightweight. Smart Corners are what I’d call smart.</p>
<p>Oh, yeah, I like it! So round, so smart, so simple and easy </p>
</div>

<div class="clear"></div>
</div>
</body>
</html>
  #2 (permalink)  
Antiguo 12/11/2009, 09:28
 
Fecha de Ingreso: mayo-2008
Mensajes: 33
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Problema con border redondeados

Me interesa mucho este tema, porque justo yo iba a preguntar como se hacen bordes redondeados en tablas, etc ....

Si me podéis dar una ayudita, os lo agradecería.

Saludos.
  #3 (permalink)  
Antiguo 12/11/2009, 09:37
 
Fecha de Ingreso: noviembre-2009
Mensajes: 2
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Problema con border redondeados

Hola mjsaxo, esta es una de las tantas técnicas que existen en la que se utilizan 4 imagenes las cuales se pueden convertir en una y jugar cn el posicionamiento del background pero no llego tan lejos! jejeje
  #4 (permalink)  
Antiguo 12/11/2009, 11:22
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Problema con border redondeados

Hola:

pueden visitar araudi (en: elementos) o border-radius (prop. CSS3)

Saludos
  #5 (permalink)  
Antiguo 12/11/2009, 11:37
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.823
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Problema con border redondeados

una de las razones mas comunes por la que IE no interpreta correctamente nuestros codigos es olvidar colocar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

pareceria tonto pero suele pasar
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 15/11/2009, 11:31
 
Fecha de Ingreso: mayo-2009
Mensajes: 39
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Problema con border redondeados

Cita:
Iniciado por Ag666 Ver Mensaje
una de las razones mas comunes por la que IE no interpreta correctamente nuestros codigos es olvidar colocar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

pareceria tonto pero suele pasar
Podrias explicarme un poco mas en q consiste este codigo ya q a mis paginas les colocos este

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
  #7 (permalink)  
Antiguo 15/11/2009, 13:25
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Problema con border redondeados

Hola
fijate esto:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Y busca dentro del foro que este link lo saque por acá, pero no recuerdo donde exactamente
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:50.