Forum Moderators: not2easy
I've got a few pages that make use of iframes, and I can't seem to get them to align properly in IE. There are two frames in use, menu and main. The menu is a fixed width, and the main one should fill the rest of the space. This works as expected in Firefox (1.0.6) but IE (6) is giving me grief. It's not working at all. Using a width %age does work, but this isn't suitable really. 100% stretches the iframe right off the screen. The code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#manualDiv {
position: relative; /* So the iFrames can be positioned absolutely */
border: 1px solid black;
height: 750px;
}
iframe {
height: 100%;
position: absolute;
}
#menuFrame {
left: 0;
width: 230px;
}
#mainFrame {
left: 230px;
right: 0;
}
</style>
</head>
<body>
<div id='manualDiv'>
<iframe src="http://www.google.com/" id='menuFrame' name="menuFrame"></iframe>
<iframe src="http://www.yahoo.com/" id='mainFrame' name="mainFrame"></iframe>
</div>
</body>
</html>
I'm hoping the solution to this problem will also work for when the menu frame isn't present (i.e. the main frame will fill the complete space). In short, the problem is that I.E. isn't obeying the right: 0; command.
Thanks in advance :)
Careful with frames and css...they don't mix well in general. You may find yourself having to work via the HTML to get what you want (in regards to iframes specifically).
However your setup has a %99.999999- chance posibility that you could do what you're doing without having to use frames.
[edited by: SuzyUK at 4:46 am (utc) on Aug. 29, 2005]
[edit reason] Mind those P&Q's please. See TOS #14 [WebmasterWorld.com] [/edit]
With regards to setting the position, I've tried using right: 0; but that didn't work at all. It was completely ignored by IE. Using a pre-defined width is no good too, because the width of the screen can change with resolution and size, and using it gives unexpected results.
You probally just have to set the position attribute to get that to work
He actually has set the position property, in the rule declaration with the type selector "iframe." He then specifies the left properties for each individual iframe via their ids. A very efficient way to code.
It's not working at all.
I'm afraid this doesn't give us much of a useful description of the problem. I ran your test code and the only difference I saw was in the height of the page...in IE it goes off screen and causes a vertical scrollbar, in FF it doesn't. Is that the problem, or is there something else?
cEM
Some of the modules are third-party apps, etc, such as phpMyAdmin (which requires a single frame), or some manual pages (which require two, a menu and a main). Because of the complexity of some of these apps, it's far far easier and more efficient to just use iframes, than trying to work around it.
Now, talking about the posted example of code, where there are two frames, what should happen is both frames align together vertically. The menu frame should be 230px wide, and the main frame should start 230px from the left (to account for the space for the menu frame) and fill the rest of the width.
In Firefox this works perfectly, as expected. In I.E. the mainFrame stays at a fixed width of about 230px again (no, I don't have an error in my code in so far as naming elements or applying styles). If I apply width: 100%; then in IE the frame will expand beyond the boundary of the page instead of staying within its container.
I'm hoping the solution to this will lead to the solution for the single frame. In this instance, I used width: 100%; Again, this works fine in Firefox, but in IE the page still expands off the page, although within the container this time (i.e. the bit going off the page is now hidden).
So in short, the problem is getting IE to set the width of the iframes properly, expanding them to fill the remaining space within its container.
Cheers.
