I've created a webpage using an iframe within a div tag and need help in making my page cross-browser compatible.

Here's the deal:

1. My site is http://www.globallablog.com
2. The index page consists of three main sections
A. Titile
B. Left-menu bar
C. IFRAME to right of menu bar
3. Using "View Source" you can see I have my IFRAME encased within a
DIV tag.
4. The CSS code for the DIV tag defines height as 70%
5. The CSS code for IFRAME tag defines height as 100%

The problem is in any browser (Mozilla, Opera, ...?), but not IE, I've tested my page with, shrinks the IFRAME vertically to about 1/4 the needed size. In IE it renders right. If I make DIV height 100%, then IE renders IFRAME to large and bottom scroll arrow goes off page. I need to keep IFRAME at height as now, but make it work in other browsers. I want to make it expandable for different screen resolutions, so I'm using percentages instead of px, em, etc.

Any help will be greatly appreciated.

-Witch Wyzwurd

Thanks to anyone who has viewed this post and has given effort into helping me. I've realized that the IFRAME tag is difficult to employ since it is only fully handled by IE, so I have eliminated it from my site. Back to the whole page scrolls down method.

I have also learnt that scrollbar coloring is only supported by IE, so back to the gray scrollbar.

Thanks again,

-Witch Wyzwurd