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"> </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>