Get rid of border and scrollbar from <object>

HTML & CSS
1

I’m trying to embed some html into a page; after I tried a couple of different methods, I’m trying <object></object> like the following


<object
    type="text/html"
    data=http://www.mySite.com/someURL
    width="120"
    height="200">
<object>

However, I have not been able to get rid of border and scrollbar and this is just driving me crazy. How can I get rid of all these border and scrollbar?

2

You have to use Javascript to remove the border unfortunately. Try this combo:


window.onload = function ()
{
//loop through all objects and remove borders
var current;
var o = document.getElementsByTagName("object");
for (var i = 0; (current = o[i]); i++)
{
  current.body.style.border = '0';
  current.body.style.padding = '0';
}
}
3

Ok, this seems to have the right idea. I checked one of examples http://www.xml.com/2003/07/02/examples/object-demo-3.html and it basically uses the same method. However,


...
current.body.style.border = '0';
current.body.style.padding = '0';
...
(where current is the id of an object)

does not seem to work when the object embeds an external html page; i.e., type=“text/html” and data=“[html document]”. What am I doing wrong? What am I missing? Do I need to reference different attributes?

4

Ok,

I think I got it. Let’s say that I have something like the following:


<object
    id="myObject"
    type="text/html"
    data="http://www.mySite.com/someURL"
    width="120"
    height="200">
<object>

The following has the right idea:


myObject.body.style.border = 'none';
myObject.body.style.margin = '0';
myObject.body.style.padding = '0';
myObject.body.style.overflow = 'hidden';

However, whenever I try to reference myObject in JavaScript, I get an error(in IE); I don’t know why, but it just doesn’t work. So what I need to do instead is to add the following css


body
{
    border: 0px;
    padding: 0px;
    overflow: hidden;
    margin: 0px;
}

in http://www.mySite.com/someURL (in retrospect, this seems rather obvious given the information). This gets rid of border and scrollbar AND enables to embed an external html while the parent html stays in XHTML Strict compliant.

(I still need to set target to “_top”, but I’m almost there…)

5

I thought this was working perfectly until I added …


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For whatever reason, scrollbars show up again :frowning: . What the …? What can I do now? What am I doing wrong? Can I really get rid of these scrollbars?

6

I don’t mean to make multiple posts by myself, but I think I found a solution(this time, finally).

html
{
    border: 0px;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
}
body
{
    border: 0px;
    margin: 0px;
    overflow: hidden;
    padding: 0px;
}

html needs to set its overflow to hidden. This gets rid of scrollbars in IE and also Mozilla. Furthermore, doing this does not require JavaScript. I will test a little more, and if I don’t find any problem, I will update the server …

7

:tup:

Also, about not being able to address “myObject” directly: did you set something up like this before setting its style properties?:


var myObject = document.getElementById("myObject");

If not, the browser may now know exactly what “myObject” is.

8

No, I didn’t try that. I guess there was a way to access the object using JavaScript, but it seemed a little too complex. Also as I checked other discussions on the web, most of them looked like they tried to resolve problems like this one just by using CSS, so I tried to do the same. I can’t remember now, but there was this one discussion suggesting to set html tag’s attributes, so that’s what I did. Seems like this is working, and hopefully, I will be closing this thread. Thanks for the help.