Mark E. Buckley

Object Scroll Bars

An Object tag is used to embed an outside element into a web page. This is often done for Flash files, but can also be used for external text or html files. The Object tag is the standard way to embed content. It is meant to replace applet and embed tags. It is also meant to eliminate Frame based web pages.

The downside of an Object tag is the scroll bars. Browsers often put scroll bars around the Object even if they are not needed. While this does not happen when you embed a Flash file, it does occur when you embed text and html files.

It would be nice to be able to add styles to the Object Scroll Bars so they could be hidden. Scroll bars can be stylized for several html tags including div. Unfortunately the same CSS manipulations do not work on Object Scroll Bars.

In reading through various blogs and discussions the conclusion was that nothing could be done. And yet something can be done with CSS.

If you think through the CSS box model you realize that every block level element can be defined with a width and height. You can also set the overflow property to hidden. So hiding the object scroll bars becomes a simple exercise.

Create a div with an id of outsidebox. Place your object inside the outside box. Position the outside box absolutely at top 100px , left 100px, width 80px, height 80px, overflow hidden. Now in the object tag, set the height and width to 100px. In your css block set object's margin top to -10px, and the margin left to -10px. Voila.

I recently used this on a client site. They wanted a little javascript effect. Instead of clogging up the target page with 50 lines of code, I just put the html and javascript for this one small box in a separate file. It seems to work well.