Advanced Search

Results 1 to 6 of 6

Thread: iFrame not lining up properly

  1. #1
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default iFrame not lining up properly

    I have started to overhaul an existing code, and I am inserting an iFrame into the code. Everything is working, except there is a slight disjoint with the frame, and it is triggering a horizontal scroll. I have tried everything that I can think of. Please advise!

    Site

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,881
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    You have a few options;

    1. Make the table container of the main page wider

    2. Make the table container of the inner/iframed page narrower

    (the table width on both pages is 870px so you cant put one inside the other without them both competing for extra width and creating a scrollbar)

    3. Disable horizontal scrollbars in the inner/iframed page with overflow-x:hidden; on the body tag

    4. Scrap iframes and tables altogether and use either a PHP or SSI include, along with a div-based layout
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    Kimintiri (02-14-2013)

  4. #3
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    I went ahead and adjusted the table to be larger, but it still caused the frame to be disjointed (just caused it to shift to the left). I also added the overflow tag to the body, but that does not appear to have changed anything.

    I also went ahead and just eliminated the width attribute for the table, since it is not necessary.
    Last edited by Kimintiri; 02-14-2013 at 01:45 PM. Reason: Additional Information

  5. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    The problem is caused by an iframed page having tables within a main page having tables too.
    Get rid of the table containing your iframe and replace it (=table+iframe) with something like this:
    Code:
    <div style="position: relative; top:-5px; width: 870px; overflow: auto; overflow-x: hidden; margin: auto; ">
    <iframe style="position: relative; left:-2px; width: 889px; height: 550px; overflow-x:hidden; overflow-y: auto" frameborder="0" src="http://www.scorchedsand.net/Hawthorn/welcome.html"></iframe>
    </div>
    This is based on your page's source.

  6. The Following User Says Thank You to molendijk For This Useful Post:

    Kimintiri (02-15-2013)

  7. #5
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    That completely resolved the misalignment. The only other question that I have is how would I remove the top and bottom misalignment. There is a gap between the images above and below the frame.

  8. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,297
    Thanks
    28
    Thanked 135 Times in 130 Posts
    Blog Entries
    28

    Default

    I don't know exactly what gaps you mean. If you add margin-top:-2px to the iframe's styles, the upper gap disappears. Is that what you mean?

Similar Threads

  1. image magnify does not work properly in iframe
    By tseroo in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-15-2012, 09:34 PM
  2. Lining up properly on page..
    By pencil2print in forum HTML
    Replies: 2
    Last Post: 02-10-2010, 03:33 PM
  3. Resolved submenu not lining up
    By mcolton in forum CSS
    Replies: 6
    Last Post: 08-04-2009, 12:09 AM
  4. Replies: 3
    Last Post: 08-13-2008, 11:20 AM
  5. Iframe not resizing properly
    By julmado in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-19-2007, 04:12 PM

Bookmarks

Posting Permissions

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