Iframe + div + resizing = aww crud

liunx

Guest
Look at this, <!-- m --><a class="postlink" href="http://knights.europe.webmatrixhosting.net/temp.html">http://knights.europe.webmatrixhosting.net/temp.html</a><!-- m --> 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.<IFRAME SRC=http://www.webdeveloper.com/forum/archive/index.php/"./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.Wait wait wait, what is the anchor doing? Thanks for the doc type trick I did not know that.here is a screen shot of what is happeningBefore you do anything else read, mark, learn and inwardly digest the HTML 4.01 Specification (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/">http://www.w3.org/TR/html4/</a><!-- m -->).

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.True but that doesn't fix the positioning problemLook 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.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.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.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.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.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.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.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.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.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....<!-- m --><a class="postlink" href="http://knights.europe.webmatrixhosting.net/temp.html">http://knights.europe.webmatrixhosting.net/temp.html</a><!-- m --> 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?
 
Back
Top