Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Oct 2006
    Location
    Liverpool, UK
    Posts
    4
    Member #
    14043
    Hi everyone,

    I've been putting together a simple site for some school work.

    I have an iframe in the main section of the page and everything works fine initially. However, despite looking fine in IE on loading and refreshing, when I click a link to change the src of the iframe, the iframe stretches beyond the right of the browser window with no scrollbar at the bottom to scroll across to the edge. If I then refresh the browser the iframe goes back to it's rightful width.

    This only happens when I click a link that changes the src property of the iframe and it only occurs in IE (I'm using IE6). Can somebody tell me why this is happening?

    HTML for iframe
    HTML Code:
    <div id="wrapper">
        <div id="sidebar">
        <a href="#" onclick="nav('about.html')">link</a></li>
        </div>
        <div id="content">
            <iframe id="main" src="home.html" />
        </div>
        <div id="footer"></div>
    </div>
    javascript function
    Code:
    function nav(url)
    {
        document.getElementById("main").src = url;
    }
    CSS
    Code:
    #wrapper{ width:100%; }
    #sidebar{ width:200px; background: #9c9; float:left; font-size: 1.5em;}
    #content{ background: #aad; margin-left: 200px;}
    #content iframe { margin: 1%; width: 97%; height: 400px; border:none;}
    Thanks,
    igkuk7

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Try this ...

    specify the frame width in your HTML.
    take the ID out of your CSS file.

    <iframe name="main" src="home.html" width="400" />

    Then, get element by Name instead of ID.

    document.getElementByName("main").src = url;

    ===========

    I didn't test out my theory, but I think there's some
    conflicts with the fact that you have id="main" and
    you don't have anything in the CSS file with #main
    (which is a CSS id). That's why I think it might be
    better to use name="main".


  4. #3
    Junior Member
    Join Date
    Oct 2006
    Location
    Liverpool, UK
    Posts
    4
    Member #
    14043
    Sorry it took me so long to get back to you mlseim, been a bit busy.

    I did what you suggested and removed the CSS, putting it directly into the HTML. Then change id to name and used

    document.getElementsByName("main")[0].src = url;

    But the problem still persists. This is a very weird problem and I'm more curious as to why it's happeneing than on a quick fix for it.

    Thank you for your advice though.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Give us an actual link to the page.


  6. #5
    Junior Member
    Join Date
    Oct 2006
    Location
    Liverpool, UK
    Posts
    4
    Member #
    14043
    <removed site link>

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I think I found your problem ... (there are a few)

    Can't explain them all, so I used your HTML and CSS to create
    an actual example on my website:

    See the example:
    http://www.catpin.com/test.htm

    Here's the CSS file:
    http://www.catpin.com/test2.css

    I think the float:left; on #content was the main thing.
    Also, some changes in <iframe> including adding </iframe> to complete the property.

    If the URL being displayed in the <iframe> is larger than the frame can be,
    it adds the horizontal scroll bar under the <iframe>.

    Have Fun. (I won't comment on your color choices, I guess it's your preference).


  8. #7
    Junior Member
    Join Date
    Oct 2006
    Location
    Liverpool, UK
    Posts
    4
    Member #
    14043
    Thanks! Works fine now.

    Color shmolor I say, I needed a site that wasn't white, so I used a random color generator to get them. Only one of my lecturers will really see it.

    Thanks again.


Remove Ads

Posting Permissions

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

Search tags for this page

create an iframe that is wider than the page

,

frame wider than window banner css

,

ie11 iframe html larger than frame

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:36 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com