Iframe and drop down

Question

So I have an iframe on my site, on that iframe I have a menu, some links have a drop down list, now here is the problem, I can't see the drop-down because of the iframe height, is there a hack or something for this.

I want the height of the iframe to stay the same, but the drop-down to display normally, over the content, I have position: absolute and everything, it works, but not in an iframe...so is there a hack? or a fix for this?

The reason, I use an iframe is because I also need to use a different css file and javascript...

Answer 1

Why don't you make the iframe big enough to display your dropped down menus? Content from inside the iframe simply will not be shown outside of it. It clips the viewport of the document inside it.

Answer 2

An iframe is like an embedded window, everything in it is displayed inside it; there is no way around this.

Using iframes for formatting like this is usually a pretty bad idea, and easy to do with a div as well. For example, if you have a certain color for links, and you want a different one inside the iframe, you can instead put all the stuff in a div with id="content", and in your stylesheet have something like this:

a:link{
    color:#000; //links on the page will be black
}
div#content a:link{
    color:#f00; //links inside the div will be red
}

I don't think there is any formatting you can do with an iframe that you can't do in a div. If there is something specific that you can't figure out, please post it.