Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   HTML (http://www.velocityreviews.com/forums/f31-html.html)
-   -   newbie: css position of IFRAME (http://www.velocityreviews.com/forums/t163516-newbie-css-position-of-iframe.html)

Jeff 11-22-2005 01:29 PM

newbie: css position of IFRAME
 
Hey

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;
width:100%;
border:2px solid #00C;
background-color:#C0C0C0;
}

#content {
margin:0 190px 0;
left:190px;
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)??

Do you have any tips about what CSS/HTML setting I must use so that size of
the IFRAME is the SIZE of the DIV, then please send them to me...

Best Regards!

Jeff



Steve Pugh 11-22-2005 03:03 PM

Re: newbie: css position of IFRAME
 
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


Jeff 11-22-2005 04:11 PM

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@gmail.com> wrote in message
news:1132668895.662492.189430@o13g2000cwo.googlegr oups.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
>




Jeff 11-22-2005 05:27 PM

Re: newbie: css position of IFRAME
 
The width of the IFRAME is okay when testing on Opera, but on IE it's too
large

Please, help me so this also is working on IE

Jeff


"Jeff" <it_consultant1@hotmail.com.NOSPAM> wrote in message
news:j4ednXvbh7653h7e4p2dnA@telenor.com...
> 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.googlegr oups.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
>>

>
>




Disco Octopus 11-22-2005 09:51 PM

Re: newbie: css position of IFRAME
 
Jeff wrote:

> Hey
>
> 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;
> width:100%;
> border:2px solid #00C;
> background-color:#C0C0C0;
> }
>
> #content {
> margin:0 190px 0;
> left:190px;
> 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)??
>
> Do you have any tips about what CSS/HTML setting I must use so that size of
> the IFRAME is the SIZE of the DIV, then please send them to me...
>
> Best Regards!
>
> Jeff


Maybe, if you cant find a solution for what you are doing, you may try a
different approach.

What do you want to achieve from this? You want to contents of a page
within your parent page? You want to be able to reuse that content? Maybe
you can get this content into your pages by including it with some server
side language tools (PHP, ASP, Server side inlcudes, etc).

Maybe?


--
movies in WA : http://www.grandcinemas.com.au
beef jerky - good to chew : http://www.choicebeefjerky.com.au
eat beef jerky


All times are GMT. The time now is 06:39 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.