-
Infinite scrolling?
I'm trying to build a simple website that opens pages using MultiBox on 4 central images.
For some reason when I use margin:auto; to centre my design the page responds by infinitely scrolling space underneath when the user re-sizes the browser window.
Is there a simple work around for this? Or something I'm doing that I shouldn't be? I've tried this on many different designs and get the same weird scrolling. I've pasted my code below.
I'm aware my Java stuff might not be in order, I haven't finished implementing that yet. This isn't the issue though I think, as no Java seems to have the same effect.
Find the website uploaded here
THIS IS A VERY ROUGH SKETCH UP! PLEASE DONT JUDGE ME ON THIS :P
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Razmika Dance</title>
<link href="../css/multibox.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]><link rel="stylesheet" href="../css/ie6.css" type="text/css" media="all" /><![endif]-->
<script type="text/javascript" src="../js/mootools.js"></script>
<script type="text/javascript" src="../js/overlay.js"></script>
<script type="text/javascript" src="../js/multibox.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
//preloader
var preLoadArray = new Array();
var preLoadNum = 0;
// Rollover script
$$('img.roll', 'input.roll').each(function(el){
// Preloader
preLoadArray[preLoadNum] = new Image();
preLoadArray[preLoadNum].src = el.src.replace(el.src.replace('_off.', '_on.'));
preLoadNum++;
el.addEvent('mouseover',function(){
this.setAttribute('src',this.src.replace('_off.', '_on.'));
});
el.addEvent('mouseout',function(){
this.setAttribute('src',this.src.replace('_on.','_off.'));
});
});
});
</script>
<style type="text/css">
body
{
background: #33F;
}
#header
{
margin: auto;
width: 451px;
height: 150px;
margin-top: 4%;
background-image:url(img/header.png);
background-repeat: no-repeat;
}
#bound
{
margin: auto;
width: 800px;
}
#content
{
background: #FC3;
width: 436px;
margin: auto;
padding-bottom: 12px;
padding-right: 10px;
border-style: solid;
border-color: #F30;
border-top: none;
}
#table
{
margin-left: 15px;
background: #F30;
border: solid;
border-color:#F30;
width: 400;
height: 400;
}
#about
{
height: 200px;
width: 200px;
}
#gallery
{
height: 200px;
width: 200px;
}
#workshops
{
height: 200px;
width: 200px;
}
#contact
{
height: 200px;
width: 200px;
}
</style>
<body>
<div id="header">
</div>
<div id="bound">
<div id="content">
<table id="table">
<tr>
<td>
<div id="about">
<a href="../about.htm" rel="width:500 ,height:500" id="mb1" title="iFrame" title="About Razmika Dance"><img src="../img/about.jpg" alt="Gallery" border="0" class="roll"/></a>
</div>
</td>
<td>
<div id="gallery">
<a href="../gallery.htm" rel="width:400,height:300" id="mb2" title="iFrame" title="Gallery"><img src="../img/gallery.jpg" alt="Gallery" border="0" class="roll"/></a>
</div>
</td>
</tr>
<tr>
<td>
<div id="workshops">
<a href="../workshops.htm" rel="width:400,height:300" id="mb3" title="iFrame" title="Workshops"><img src="../img/workshops.jpg" alt="Workshops" border="0" class="roll"/></a>
</div>
</td>
<td>
<div id="contact">
<a href="../contact.htm" rel="width:400,height:300" id="mb4" title="iFrame" title="Contact Me!"><img src="../img/contact.jpg" alt="Contact information" border="0" class="roll"/></a>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>
</div>
</div>
</body>
</html>
