|
|
Posted by Jeff on 11/22/05 18:11
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@gmail.com> wrote in message
news:1132668895.662492.189430@o13g2000cwo.googlegroups.com...
> 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
>
Navigation:
[Reply to this message]
|