Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/11/2005, 04:11
Avatar de caricatos
caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
maquetando fieldset/legend en Mozilla

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo