newbie: css position of IFRAME

Discussion in 'HTML' started by Jeff, Nov 22, 2005.

  1. Jeff

    Jeff Guest

    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
     
    Jeff, Nov 22, 2005
    #1
    1. Advertising

  2. Jeff

    Steve Pugh Guest

    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
     
    Steve Pugh, Nov 22, 2005
    #2
    1. Advertising

  3. Jeff

    Jeff Guest

    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" <> wrote in message
    news:...
    > 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, Nov 22, 2005
    #3
  4. Jeff

    Jeff Guest

    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" <> wrote in message
    news:...
    > 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" <> wrote in message
    > news:...
    >> 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, Nov 22, 2005
    #4
  5. 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
     
    Disco Octopus, Nov 22, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luqman
    Replies:
    1
    Views:
    659
    Luqman
    Feb 7, 2006
  2. James Wong
    Replies:
    4
    Views:
    508
    James Wong
    Jul 14, 2004
  3. Daedalous
    Replies:
    3
    Views:
    725
    Daedalous
    Jan 16, 2004
  4. Replies:
    3
    Views:
    186
  5. James Black
    Replies:
    0
    Views:
    404
    James Black
    May 28, 2006
Loading...

Share This Page