Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > newbie: css position of IFRAME

Reply
Thread Tools

newbie: css position of IFRAME

 
 
Jeff
Guest
Posts: n/a
 
      11-22-2005
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


 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      11-22-2005
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

 
Reply With Quote
 
 
 
 
Jeff
Guest
Posts: n/a
 
      11-22-2005
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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) 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
>



 
Reply With Quote
 
Jeff
Guest
Posts: n/a
 
      11-22-2005
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" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) 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
>>

>
>



 
Reply With Quote
 
Disco Octopus
Guest
Posts: n/a
 
      11-22-2005
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
detecting mouse click position in canvas tag has position off James Black Javascript 0 05-28-2006 03:27 AM
Where is Form Relative Position and Absolute Position in VS.Net 2005 ? Luqman ASP .Net 1 02-07-2006 10:27 AM
position image based on document position edouard.lauer@pt.lu Javascript 3 01-14-2006 06:04 PM
How to set position of a web control depending on other control's position at run-time? James Wong ASP .Net Web Controls 4 07-14-2004 10:24 AM
Get form values from iframe (1) to iframe (2) inside a layer in iframe (1) Daedalous Javascript 3 01-16-2004 11:08 AM



Advertisments