Iframe + div + resizing = aww crud

[PeOfEo]

Look at this, http://knights.europe.webmatrixhosting.net/temp.html Look at the iframe it is set to 100% width but it goes outside of its div but then you restore down the window and then maximize it it snaps back to where I want it to be. How can I just make that ifrme fill the darned div completly at all times without going out. I have been getting a real head ache over it.

[Charles]

<IFRAME SRC="./news.aspx" name="main" class="content"><a href="./news.aspx">Content</a></IFRAME>

And note, there is no IFRAME element in HTML 4.01 Strict. You need to be using the transitional DTD.

[PeOfEo]

Wait wait wait, what is the anchor doing? Thanks for the doc type trick I did not know that.

[PeOfEo]

here is a screen shot of what is happening

[Charles]

Before you do anything else read, mark, learn and inwardly digest the HTML 4.01 Specification (http://www.w3.org/TR/html4/).

The link is for those browsers that do not understand the IFRAME element. The goal, after all, is a page that works on all browsers.

[PeOfEo]

True but that doesn't fix the positioning problem

[Charles]

Look some more at what I posted. Perhaps because it is out of context you miss the point that I have eliminated the containing DIV element. Just do to the IFRAME what you would do to the DIV.

And I think that you should be using "id" attributes and not "class" attributes but that is a very minor point.

[PeOfEo]

I guess I will take another stab at doing that then... Ill post back on this subject after I have toyed with my code some more.

[PeOfEo]

I cannot get it to respond like the div though... The other dives tend to overlap it etc thats why I need the contiaining div. I just cant get this iframe to work, but I need to use an iframe. I tried just saying iframe { and I also tried to give it an id and using a class.

[Charles]

I took another quick glance under your hood and saw a few more things that look a little strange.

1) You are specifying relative positioning but you don't tell your content DIV where to go. Absolute positioning might be better here.

2) You've got a negative margin for the DIV, that's asking for some overlap.

3) You are playing around with the z-index. The purpose of the z-index is to let you obverlap things.

4) You want to be specifying a width and not a min-width.

I would suggest that you start by running the HTML through the validator. Then get rid of the z-index stuff and use absolute positioning.

And read, mark, learn and inwardly digest the CSS2 specification when you finish with the HTML 4.01.

[PeOfEo]

I can position the iframe fine, But I want it to resize... Thats what I am going for here to have my whole page resize for different resolutions. The zindex stuff I just have there because I read somewhere that if someone does not have css enabled it allows them to see the content before the menus so I tossed it in there, I am whell aware of what z-index does. But I just cant seem to get this iframe to resize without overlap when I run a smaller windo size or I just cant seem to get it to resize at all the way I want it to without a container div, but when i use a contrainer div it doesnt like to stay in it. It doesnt act at all like it would in some other element like say a table cell. Maybe If I did that css table thing that would be a solution? Also the negative margin is not cuasing overlap it is just there to fight with another div's margine a bit.

[Charles]

Originally posted by PeOfEo
The zindex stuff I just have there because I read somewhere that if someone does not have css enabled it allows them to see the content before the menus so I tossed it in there, I am whell aware of what z-index does. And just how does a CSS property like z-index do anything at all on non-CSS browsers?

I've played around a little bit more and I think that your problem is a MSIE bug. I can get it to work just fine in Opera.

Since you are generating the content of this IFRAME yourself I would suggest that you have your script crank out the whole page and play around with the overflow property.

[PeOfEo]

That would be a problem because I have many pages that I want to open in that iframe, It would mean I would be convirting all of my asp.net applications and I plan to use a login iframe too so I would also be fusing my login form with other applications, also the whole point of using an iframe is so I can keep my navigation and content separate to save time on updating. It would just be a huge ammout of work to do that. But it is a msie bug as you say, the crappy thing about that is its the most used browser. If you notice If I put the iframe in a % and take it out of the div it only overlaps the right nav bar because it is 20px from the right side and at lower resolution they converge, but I might just drop the right nav and only have a left menu. But that is sort of a pain because having both of them looks nicer... Ill figure something out, because I would like to move my homepage from tables to css.

[PeOfEo]

Is there another object I can use to contain the iframe besides a div? I need something to stick the iframe in because it wont respond like a div. maybe a span flag or something? The problem is if I take out that middle div all of the div's around the right side and bottum want to sort of move into the middle because it sees a big whole in my page.

[Charles]

The problem is with the IFRAME so there's no way around it.

Unless... Does your server support SSI? You can include output from scripts with SSI.

[PeOfEo]

Well no It doesnt have ssi :( It has the latest version of IIS but not SSI Same letters sorta just revers. I have seen ssi in the past but I dont really know how to use it, I have just seen it coupled with java script so I would not know what to do. It seems as though I will have to dream up a new layout in which the iframe will do what its told on ie. Lets add this to the list of ie css screw ups, I can really see whay you hate the browser now, but the viewers of my site dont blame the browser they blame the webmaster so I need a layout that will work... (a few hours later) ... Looks like I will just be keeping my table layout for a while because I cant get anything to work right :( I mean everything looks great on mozilla but ie screws it all up. If worst comes to worst I will just have to redo it all with overflow but I REALLY dont want to do that, I am considering traditional frames and makeing a sort of box but that will be a huge pain too... humm....

[PeOfEo]

http://knights.europe.webmatrixhosting.net/temp.html check it out, I tried another vessel... a table, its un orthodox but it seems to work somewhat better then a div, though not perfectly, I could not get the thing to size its self right and I had to make it rigid, so now I will have huge gaps at higher resolution and a tight squeese at lower resolution. Any thing else I should try?