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.
Recent Comments