Printable View
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
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
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.
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:
This is based on your page's source.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>
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.
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?