Removing Scrollbar in CSS

[sonicx2218]

Hey guys. I know the css line to remove scrolls is overflow:hidden, but I don't know where to place it in this largish css code I'm using. Can I just drop it anywhere, or is there a specific class I need to put it under? I know there is already one present in the code, however that does not affect the content.
Here's the code for convenience's sake:

/*  mediaboxAdvanced Black theme    */
        /*  version 2.1 - August 2010       */
        /*  for mediaboxAdvanced v.1.3.1    */

        /*  Overlay background styling  */

#mbOverlay {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    cursor: pointer;
}

        /*  Legacy fix for older browsers   */

#mbOverlay.mbOverlayFF {
    background: transparent url(/images/80.png) repeat;
}

#mbOverlay.mbOverlayIE {
    position: absolute;
}

        /*  Overlay panel styling   */

#mbCenter {
    position: absolute;
    z-index: 9999;
    left: 50%;
    overflow: hidden;
    background-color: #000;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    -khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    -moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000');
}

#mbCenter.mbLoading {
    background: #000 url(/images/loading.gif) no-repeat center;
        /*  This style is applied only during animation.    */
        /*  For example, the next lines turn off shadows    */
        /*  improving browser performance on slow systems.  */
        /*  To leave shadows on, just remove the following: */
    -webkit-box-shadow: none;
    -khtml-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#mbImage {
    position: relative;
    left: 0;
    top: 0;

        /*  Inline content styling  */

    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: left;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 10px;
}

        /*  Title, Caption and Button styling   */

#mbBottom {
    min-height: 20px;
    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #999;
    text-align: left;
    padding: 0 10px 10px;
}

#mbTitle, #mbPrevLink, #mbNextLink, #mbCloseLink {
    display: inline;
    color: #fff;
    font-weight: bold;
    line-height: 20px;
    font-size: 12px;
}

#mbNumber {
    display: inline;
    color: #999;
    line-height: 14px;
    font-size: 10px;
    margin: auto 10px;
}

#mbCaption {
    display: block;
    color: #999;
    line-height: 14px;
    font-size: 10px;
}

#mbPrevLink, #mbNextLink, #mbCloseLink {
    float: right;
    outline: none;
    margin: 0 0 0 10px;
    font-weight: normal;
}

#mbPrevLink b, #mbNextLink b, #mbCloseLink b {
    color: #eee;
    font-weight: bold;
    text-decoration: underline;
}

#mbPrevLink big, #mbNextLink big, #mbCloseLink big {
    color: #eee;
    font-size: 16px;
    line-height: 14px;
    font-weight: bold;
}

#mbBottom a, #mbBottom a:link, #mbBottom a:visited {    /* Thanks to Danny Jung for feedback and corrections */
    text-decoration: none;
    color: #ddd;
}

#mbBottom a:hover, #mbBottom a:active {
    text-decoration: underline;
    color: #fff;
}


        /*  Error message styling   */

#mbError {
    position: relative;
    font-family: Myriad, Verdana, Arial, Helvetica, sans-serif;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 10px solid #700;
    padding: 10px 10px 10px;
    margin: 20px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#mbError a, #mbError a:link, #mbError a:visited, #mbError a:hover, #mbError a:active {
    color: #d00;
    font-weight: bold;
    text-decoration: underline;
}

I really appreciate the help in advance!

[Banderson]

If you want to remove the scroll bar from the entire page then you will need to insert into the body tag since the scroll bars are part of the body of your document.

eg:

body { overflow:hidden; }

If you only want to remove it from an element in your page then add overflow:hidden; to that elements space.

[sonicx2218]

not the whole page, but the body of the the video software. Basically I use it for iframe lightboxes. So if I insert the body tag in this css, you think it'll work?

[Banderson]

Well possibly, since it is an IFrame. Try and see. Whichever tag is for your iframe lightboxes and video software then you will need to use only the overflow:hidden; there. The complete body { overflow:hidden; } will remove the scrollbars from the entire page. I haven't worked with IFrames for a long time. Which tag is defining your IFrame above?

[sonicx2218]

That's the part I'm trying to figure out. I'm just starting out with the app and figured I either was too new with css to understand the code, or I didn't learn enough via documentation. I'll read the details on the player first. Thanks for the help so far.

[JorgeM]

Do you have this site online? If not, having the relevant HTML code would be helpful as well. Using jsfiddle.net to work with your code is an option if you dont have the site online.

[sonicx2218]

[http://iaian7.com/webcode/mediaboxAdvanced]
All files are from this site, untampered. It is an app made up of 3 others:
Mediabox Css, Js & Mootools js. I'm pretty sure only the css would have to be changed to alter what I'm aiming for

[Banderson]

Try adding the code above overflow:hidden; to all the declarations one by one and testing. If the probem still exists then also try the
body { overflow:hidden; } to the IFrame first and then the main document. This will troubleshoot and narrow down the culprit. As I mentioned before: If you add the overflow:hidden; to the css that is controllinig the look&feel of the IFrame then that code will remove the scrollbars frome the IFrame.

[sonicx2218]

Alrighty. I've narrowed it down to a couple. I'll update once I've finished. Thanks for the help!

[sonicx2218]

After a good while spent testing everything to no avail, I think the Javascript player itself may determine this, and the css only refers to the background styling of this module. Tried a few times but doesn't work right..I only want the content in the url, html types. Tried adding overflow: hidden attributes to both individually, and nothing.
http://iaian7.com/files/webcode/mediaboxAdv/mediaboxAdv-1.3.4b.js
Will try again later.

[Banderson]

Which page if your iframe on? I am getting a 404 on the previous one you posted. I will take a look to see if I can help.

Nmv I got it.

[Banderson]

Ok I found the problem on your images. It is in the base.css located at:
Click Here

The code in the css is :

blockquote p code {
    padding: 0 4px;
    display: block;
    text-align: left;
    overflow: auto;
}

It needs to be :

blockquote p code {
    padding: 0 4px;
    display: block;
    text-align: left;
    overflow: hidden
    ;
}

But be aware that this changes the whole game. By doing this your users can no longer select the text in the frame because it is hidden. You will need to find a work around.