Consulta sobre un tab que me altera mi funcion javascript

[Sumerio]

Hola a todos, tengo una consulta, tengo un tab donde manejo dos pestañas, y me funcionan bien, el punto es que tengo dentro de un tab tengo dos checkbox, donde tengo una funcion javascript que activa por medio de DIV el formulario oculto, el problema es que al mostrarme, me lo da alterado, o sea me da muyo mas espacio de lo normal, es muy molesto.
El problema creo yo es la ubicacion del tab, sucede que el tab lo tengo en la misma pagina y la funcion javascript en la misma pagina.

Código:

<script type="text/javascript">

	$(document).ready(function(){
	   $("#flagRio").click(function(evento){
	      if ($("#flagRio").attr("checked")){
	         $("#capaexp1").css("display", "block");
	      }else{
	         $("#capaexp1").css("display", "none");
	      }
	   });
	});
	
	
		 
</script>

<style type="text/css">
	#capainicio{
		position:relative;
	}
	#capaexpansion1{
		position:relative;
		display:none;
	}
	#capaexpansion2{
		position:relative;
		display:none;
	}
	#capaexpansion3{
		position:relative;
		display:none;
	}
	#capaexpansion4{
		position:relative;
		display:none;
	}
	#capaexpansion5{
		position:relative;
		display:none;
	}
	#capafinal{
		position:relative;
	}
</style>


<style type="text/css">
/* tamaño y forma del panel principal */
div#panel {
	position: relative;
	width: 1180px;
	height: 600px;
}

/* configuracion de las pestañas */
ul#tabs {
	position:absolute;
	left: 0px;
	top: 0px;
	margin:0;
	padding:0;
	width: 1000px;
	height: 24px;
	z-index: 20;
}
	ul#tabs li {
		float:left;
		height: 23px;
		padding-left: 8px;
		list-style: none;
		margin-right: 1px;
		background: url(${ctx}/images/tabs.png) left -48px;
	}
	ul#tabs li.actual {
		height: 24px;
		background: url(${ctx}/images/tabs.png) left -72px;
	}
		ul#tabs li a {
			display: block;
				/* hack para ie6 */
				.display: inline-block;
				/* fin del hack */
			height: 23px;
			line-height: 23px;
			padding-right: 8px;
			outline: 0px none;
			font-family: arial;
			font-size: 10px;
			text-decoration: none;
			color: #000;
			background: url(${ctx}/images/tabs.png) right 0px;
		}
		
		ul#tabs li.actual a {
			height: 24px;
			line-height: 24px;
			background: url(${ctx}/images/tabs.png) right -24px;
			cursor: default;	
		}

/* Configuración de los paneles */
div#panel #paneles {
	position:absolute;
	left: 0px;
	top: 23px;
	width: 1180px;
	height: 600px;
	border: 1px solid #91a7b4;
	background: #fff;
	overflow: hidden;
	z-index: 10px;
}
	div#panel #paneles div {
		margin:10px;
		width: 1180px;
		height: 600px;
		font-family: arial;
		font-size: 12px;
		text-decoration: none;
		color: #000;
		overflow: auto;
	}
</style>

<script type="text/javascript">
	function tab(pestana,panel)
	{
		pst 	= document.getElementById(pestana);
		pnl 	= document.getElementById(panel);
		psts	= document.getElementById('tabs').getElementsByTagName('li');
		pnls	= document.getElementById('paneles').getElementsByTagName('div');		
		// eliminamos las clases de las pestañas
		for(i=0; i< psts.length; i++)
		{
			psts[i].className = '';
		}		
		// Añadimos la clase "actual" a la pestaña activa
		pst.className = 'actual';		
		// eliminamos las clases de las pestañas
		for(i=0; i< pnls.length; i++)
		{
			pnls[i].style.display = 'none';
		}		
		// Añadimos la clase "actual" a la pestaña activa
		pnl.style.display = 'block';
	}
	
	function grabar(){
		var f = document.forms[0];
		f.action = "${ctx}/capitulo916/save.action?forward=init";
		f.submit();
	}
</script>