Unable to Hide Vertical Scroll Bar on Web Page

Question

I am displaying an HTML page within another HTML page depending on which link is selected using the following function:

function loadProject(sel) {
    var url = sel[sel.selectedIndex].value;

    if(url) {
        document.getElementById('projectContainer').innerHTML = '<' + 'object id="foo" name="foo" type="text/html" data="'+url+'"><\/object>';
    } else {
        document.getElementById('projectContainer').innerHTML = "Please select a project.";
    }
}

And, I have a div tag inside the HTML with the id of projectContainer. This works, except for the fact that a vertical scroll bar is always shown no matter what I do to remove it. (It shouldn't be - even if I put nothing into the object, the vertical bar is still shown.) I have tried to edit the CSS in the following:

object {
    width: 100%; 
    border: none;
    overflow: hidden;
}

but that is not accomplishing what I'm looking for. Any suggestions? Thanks.

Answer 1

overflow: hidden won't work for content inside an iframe/frame/object. You are going to need to edit the CSS of the pages being rendered in the object tag. Also, I recommend you DO NOT do this, as you don't know if I have my browser set by default to have forced huge text due to bad sight or something similar, which would make the scrollbar unusable/hidden to me, hindering usability. Just don't do what you are trying to do.

Answer 2

Using an <object> is new to me but very similar to an iframe, I suppose: It means that there is a document body that is separate from the surrounding document.

You need to declare overflow: hidden for the body inside the document you are embedding.