Hola:
Al querer poner un fieldset/legend dentro de una capa dando width y height al 100%, el recuadro en mozilla (firefox) se sale de la capa...
Tengo esto:
Código:
<html>
<head>
<style type="text/css">
fieldset {
/*width: 100%;*/
height: 100%;
border: 2px gray solid;
margin: 3px;
}
#general {
background-color: transparent;
border: 0px;
width: 700px;
padding: 0px;
position: relative;
}
#menu {
background-color: transparent;
margin: 5px 0px 0px;
padding: 5px 0px 0px;
z-index: 1;
height: 30px;
position: absolute;
left: 0px;
top: 0px;
}
#contenido {
position: relative;
/*left: -5px;*/
top: 32px;
border: 2px inset gray;
height: 300px;
padding: 0px;
/*margin: auto auto 0 auto;*/
}
#izq {
/*background-color: cyan;*/
/*display: inline;*/
width: 170px;
height: 100%;
/*float: left;*/
}
#der {position: absolute; top:0px;
/*background-color: pink;*/
left: 170px;
width: 526px;
height: 100%;
/*float: right;*/
}
.op1 {
background-color: #aaeeee;
}
.op2 {
background-color: #eebbee;
}
.op3 {
background-color: #aaaaee;
}
.op4 {
background-color: #eeeedd;
}
.op5 {
background-color: #eecccc;
}
.pestaña {
border: 2px inset gray;
border-bottom: 0px transparent solid;
padding: 2px 10px 5px;
margin: 2px 0 3px; 0;
cursor: pointer;
z-index: 200;
}
</style>
<script>
function sel(clase) {
document.getElementById("contenido").className = clase;
}
</script>
</head>
<body>
<div id="general" >
<div id="menu" >
<span id="op1" class="pestaña op1" onclick="sel(this.id)" >opcion 1
</span><span id="op2" class="pestaña op2" onclick="sel(this.id)" >opcion 2
</span><span id="op3" class="pestaña op3" onclick="sel(this.id)" >opcion 3
</span><span id="op4" class="pestaña op4" onclick="sel(this.id)" >opcion 4
</span><span id="op5" class="pestaña op5" onclick="sel(this.id)" >opcion 5
</span>
</div>
<div id="contenido" class="op1" >
<div id="izq">
<fieldset ><legend align=center > Izquierda </legend>
</fieldset>
</div>
<div id="der">
<fieldset><legend>Derecha</legend>
</fieldset>
</div>
</div>
</div>
<br/>
</body>
</html>
Como se puede ver hay algunos estilos hechos comentario que indican alguna de las pruebas que hice... intento que se vea igual en los 3 navegadores (IE, FF y opera)
Subí esta página:
http://www.pepemolina.com/mapas/esqueleto3.html donde se puede escribir en el textarea y ver los resultados en un iframe... también he probado con float...
Saludos
