Re: newbie: css position of IFRAME

That didn't fix the problem, the width of the IFRAME is much larger than
(100% + 4 pixels). It takes up the rest of the browser window....

BTW, as you can see my <div id="gui"> is the outer DIV and I want it take
the full height of the browser window, height is set to 100% but it doesn't
cover the full height of the browser window, any tips about this is also
very very appreciated

Here is some more data:

index.php:
<body align=center>
<div id="gui">
<div id="header">
<div id="TopLogo">
</div>
<div id="language">
</div>
<div id="menu">
</div>
</div>
<div id="container">
<div id="calendar">
</div>
<div id="submenu">
</div>
<div id="content">
<iframe id="frameid">
</iframe>
</div>
</div>
<div id="footer">
</div>
</div>
</body>

index.css:
#gui {
height:100%;
margin-left:5%;
margin-right:5%;
background-color:#FFD000;
position:relative;
}

#TopLogo {
height:55px;
width:750px;
}

#language {
position:absolute;
height:55px;
right:0px;
width:30px;
top:10px;
background-color:#FF0000;
}

#menu {
background-color:#FFD000;
}

#container {
background-color:#FFFF00;
height:300px;
position:relative;
}

#calendar {
background-color:#DDF;
border:2px solid #00C;
position:absolute;
right:0px;
top:100px;
width:175px;
}

#submenu {
background-color:#DDF;
position:absolute;
left:0px;
top:0px;
width:175px;
text-align:left;
}

#content {
margin:0 190px 0;
background-color:#C0C0C0;
position:relative;
}

#frameid {
left:0px;
right:0px;
background-color:#C0C0C0;
}

#footer {
text-align:center;
background-color:#FDD;
border:1px solid #C00;
}

"Steve Pugh" <steve.grumpy@xxxxxxxxx> wrote in message
news:1132668895.662492.189430@xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
> Jeff wrote:
>
>> I'm testing this on IE, 6.0 (but I want my code to work on all modern
>> browsers: Opera, FireFox, IE, Netscape Navigator)
>>
>> I want the iframe (see code below) to fill the entire space the DIV it is
>> placed within
>> <div id="content">
>> <iframe id="frameid">
>> </iframe>
>> </div>
>>
>> This is the CSS data I use to configure the layout of the html code:
>> #frameid {
>> left:0px;
>> right:0px;
>
> With no position property set these are meaningless.
>
>> width:100%;
>> border:2px solid #00C;
>> background-color:#C0C0C0;
>> }
>>
>> #content {
>> margin:0 190px 0;
>> left:190px;
>
> Again, with no position property set this is meaningless.
>
>> border:2px solid #00C;
>> background-color:#C0C0C0;
>> }
>>
>> The problem is that the width of the IFRAME is larger than the DIV it's
>> placed within, I thought if I specified the IFRAME width to be 100% it's
>> then set to 100% of its parent container (here the DIV)??
>
> It is. But...
> 100% + 2px border on lefy + 2px border on right > 100%
> So the iframe itself is 100% of the width of the div, and then the
> iframe has a 2px border all round.
>
> Steve
>


.

Relevant Pages

  • Re: newbie: css position of IFRAME
    ... > I want the iframe to fill the entire space the DIV it is ... with no position property set this is meaningless. ...
    (alt.html)
  • Re: newbie: css position of IFRAME
    ... The width of the IFRAME is okay when testing on Opera, ... with no position property set this is meaningless. ... >>> The problem is that the width of the IFRAME is larger than the DIV it's ...
    (alt.html)
  • Re: Document loaded:how to detect?
    ... The whole idea is to load into the DIV different texts clicking on the corresponding button. ... Let alone script injection, actually the code, in a nutshell, is: ... -frdata = a reference to the frame 'container' of div and iframe ... The button that should start the process of loading the iframe and transferring the content to the div is: ...
    (comp.lang.javascript)
  • Re: dynamic menu
    ... The problem occurs because of the z-index behaviour of HTML elements. ... "So what that means is an IFrame can block out the select box, ... DIV at the same time. ...
    (microsoft.public.dotnet.framework.aspnet)
  • Editable IFRAME
    ... I have an editable Iframe control that I am using to allow users to ... two ways to accomplish this. ... when the button is clicked it moves the DIV based on how high the DIV ... location is set in the cells valign property. ...
    (comp.lang.javascript)