tags:

views:

93

answers:

2

Hi,

I'm using Colorbox to show some messages on my website. When I launch the colorbox, using the code below, the body of my parent page is moving a little bit to the richt and bottom (see picture).

Code to launch Colorbox: $(".weather a").colorbox({href: "page.html"});

Picture: http://www.imgdumper.nl/uploads2/4b4b3ffd2abcf/4b4b3ffd26d54-screenshot.jpg

The picture above is a peace of the whole page (taken at the upper left corner of the page). When you looked carefully, you see a big white border arround the blue background. When I close the colorbox the body resets himself right (most of the time).

Does anyone know how to solve this annoying problem?

A: 

Here a part of the code (the whole code is too large):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;

<title>sad</title>

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />    
<link type="text/css" href="css/colorbox.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/color.js"></script>
<script type="text/javascript" src="js/timers.js"></script>
<script type="text/javascript" src="js/colorbox.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    jQuery.fn.getWeather = function(cityW,countryW) {
        $("#weather").hide();
        $("#loadWeather").show();

        $.ajax({
            type: "POST",
            url: "inc/weather.php",
            data: ({city : cityW, country : countryW}),
            success: function(msg){
                $("#weather").html(msg);
                $("#weather").show();   
                $("#loadWeather").hide();
                $("#weather a").colorbox({
                    href:"countries.php"
                });
            }
        }); 
    }
});
</script>

And some css:

* { padding: 0; margin: 0; border: 0; }

a { outline: none; cursor: pointer; cursor: hand; }

ul { list-style: none; }

html,body { height: 100%; margin: 0; padding: 0; }

body { text-align: center; margin: 0; padding: 0; height: 100%; background-color: #ffffff; font-family: Trebuchet MS, Verdana, Tahoma; font-size: 12px; text-align: center; }

Sorry for the format of the code (I don't know exactly how it works here).

Arjen
A: 

You might have this problem if you're trying to embed a whole html page (including <html>, <head> and other tags) within the modal.

Set iframe: true and make sure you're using an include in order to avoid this problem.

Moe