Results 1 to 7 of 7
  1. #1
    Star Lounger
    Join Date
    Sep 2004
    Location
    Wolverhampton, Staffordshire, England
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS width iframe problem

    Hi, i am having a problem with CSS, i currently have a 3 column layout i devised that is fluid but resizes according to margins as opposed to %, which works fine in FF and IE, however, i use an iframe in the center section that uses margins to resize, and i initially used width:100% which sohuld have taken all available space within the container, however, in IE, it stretches over the center section, but goes how it is supposed to when you resize the browser window, in FF it works fine, but it seems to inherit the background of the section, but that's ok.
    HTML
    <iframe src="home.html" frameborder="0" scrolling=auto name="phframe">
    Your browser does not support inline frames click here
    to get the content.
    </iframe>
    CSS
    #center
    {
    background-color:#33dd5f;
    color:#000;
    margin-left:205px;
    margin-right:205px;
    border:1px solid #000;
    padding-bottom:10px;
    }
    #center iframe
    {
    height:350px;
    margin-top:5px;
    width:100%;
    }

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: CSS width iframe problem

    I see the problem, but I'm not sure why it happens. To force IE to redraw the width of the <iframe>, one option is to wait until it loads and then re-assert the style setting. Test using this in the <head> section:

    <code><script type="text/javascript">
    window.onload = function() {
    if (document.all) {
    var firstiframe = document.getElementsByTagName("iframe")[0];
    firstiframe.style.width = "100%";
    }
    }
    </script></code>

    Unfortunately, I can't think of a way to do that any earlier.

  3. #3
    Star Lounger
    Join Date
    Sep 2004
    Location
    Wolverhampton, Staffordshire, England
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS width iframe problem

    Ok that works good for the inital load, however, the iframe is re-directed using some links on the left, and now each time i click one, the same thing happens...

  4. #4
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS width iframe problem

    Danny

    I am having difficulty recreating this as I need to see the whole box model...any chance you can zip it and sent it as an attachment please?
    Jerry

  5. #5
    Star Lounger
    Join Date
    Sep 2004
    Location
    Wolverhampton, Staffordshire, England
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS width iframe problem

    Ok here are the two files you need to see the problem. Open with IE after unzipping.
    Attached Files Attached Files

  6. #6
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: CSS width iframe problem

    Hi Danny
    Thanks for that...a lovely piece of work BTW

    I think the issue you have, and I have to admit I have had a very long day today, may be down to the dreaded inheritance Therefore I have created a new class called content and placed it thus:

    ...

    <div id="center">
    <h1>Welcome</h1>
    <div id="content">
    <iframe src="home.html" frameborder="0" scrolling=auto name="phframe">
    Your browser does not support inline frames click here
    to get the content.
    </iframe>
    </div>
    </div>

    ...

    The adapted css is attached

    I am still not quite sure what the issue is but this seemed to improve the layout a tad.
    Jerry

  7. #7
    Star Lounger
    Join Date
    Sep 2004
    Location
    Wolverhampton, Staffordshire, England
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: CSS width iframe problem

    Jez, again, you are a legend, i thought i had tried putting in a container, maybe i mis-spelled the ID when i called it, heh, many many thanks!
    Also, i think i relaise what is happening, i have not defined a wdith for the center section as it resizes according to margins, so when it tries to check the initial width, it isn't there, so when i resize my browser, the width is checked again and it reads OK, but the fix you give is perfect, thanks for the thumbs up on the work too, it's nice to recieve [img]/forums/images/smilies/smile.gif[/img]

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •