el_loco90. No me extraña que algo que estando mal "funcione" en IE y que por obvias razones no lo haga en Firefox o Chrome.
Dejando de lado ese tema. Revisa este ejemplo que preparé:
index.html
Código Javascript
:
Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Primary ColorBox</title>
<link rel="stylesheet" type="text/css" href="../../JQueryPlugin/colorbox/example1/colorbox.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/jackmoore/colorbox/master/colorbox/jquery.colorbox.js"></script>
<script>
$(function(){
$('a.primary').colorbox({iframe:true, height:"200", width:"300", scrolling:false})
});
</script>
</head>
<body>
<div id="site">
<a href="colorbox-primary.html" class="primary">Primary ColorBox</a>
</div>
</body>
</html>
Código HTML:
Ver original<!doctype html>
#wrapper {background-color:yellow;height:200px;width:300px}
<a href="colorbox-secondary.html" class="secondary">Secondary ColorBox
</a>
Código Javascript
:
Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Secondary ColorBox</title>
<style>
#page {background-color:greenyellow;height:300px;width:400px}
</style>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/jackmoore/colorbox/master/colorbox/jquery.colorbox.js"></script>
<script>
$(function(){
parent.$.colorbox.resize({height:$('#page').height(),width:$('#page').width()});
});
</script>
</head>
<body>
<div id="page">
Content page
</div>
</body>
</html>
Preparé el ejemplo partiendo del problema que describiste en el primer mensaje.
Importante: en el
index.html cambia la ruta del la hoja de estilos del plugin
colorbox.css por una que tengas disponible y prueba el ejemplo tal cual.
Coméntanos tus dudas.
Saludos.