Posts Tagged ‘multibox problem

11
May
09

Extra space at the bottom

When I was using multibox for a website I faced a problem of having an extra space at the bottom of the page.I went for some google search,but I could not find a solution.So I decided to jump into action.Then I altered some code.

In ‘overlay.js’

the line,
var h = window.getScrollHeight()+’px’;

is changed to
var h = window.getScrollHeight()-10000+’px’;

this reduced the extra bottom space completely.but the background is completely lost.

so I made some changes in the other coding,

Here is the perfect solution,

in ‘overlay.js’ dont change,
var h = window.getScrollHeight()+’px’;

in ‘multibox.css’,

replace the code in it by,

/**************************************************************

MultiBox
v1.3

**************************************************************/

.MultiBoxContainer {
position: absolute;
border: 20px solid #000;
background-color: #FFF;
display: none;
z-index: 2;
text-align: left;
overflow: hidden;

}

.multiBoxDesc{display : none;}

.MultiBoxLoading {
background: url(../_images/loader.gif) no-repeat center;
}

.MultiBoxContent {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.MultiBoxClose {
position: absolute;
top: 0px;
right: 0px;
background: url(../_images/close.png) no-repeat;
width: 24px;
height: 24px;
cursor: pointer;

}

.MultiBoxControlsContainer {
overflow: hidden;
height: 0px;
position: relative;
}

.MultiBoxControls {
width: 100%;
height: auto;
position: relative;
background-color: #000000;
}

.MultiBoxPrevious {
position: absolute;
background: url(../_images/left.png) no-repeat;
width: 24px;
height: 24px;
left: 0px;
margin-top: 5px;
cursor: pointer;
}

.MultiBoxNext {
position: absolute;
background: url(../_images/right.png) no-repeat;
width: 24px;
height: 24px;
right: 0px;
margin-top: 5px;
cursor: pointer;
}

.MultiBoxNextDisabled {
cursor: default;
background: url(../_images/rightDisabled.png) no-repeat;
}

.MultiBoxPreviousDisabled {
cursor: default;
background: url(../_images/leftDisabled.png) no-repeat;
}

.MultiBoxTitle {
position: relative;
margin: 10px 0 0 35px;
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
font-weight: bold;
text-align: left;
}

.MultiBoxNumber {
position: relative;
width: 50px;
margin: 10px 35px 0 0;
float: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
text-align: right;
}

.MultiBoxDescription {
clear: left;
position: relative;
margin: 0 35px 0 35px;
padding-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFF;
text-align: left;
}

.mb img{float : left;}

/*************************************************************/

/* IE6 FIX IN MULTIBOX */
.MultiBoxClose, .MultiBoxPrevious, .MultiBoxNext, .MultiBoxNextDisabled, .MultiBoxPreviousDisabled {
behavior: url(iepngfix.htc);
}

This will solve the problem.