Trouble with tables and alignment in IE

August 11th, 2006, 10:05 am

I having some trouble trying to figure out where the problem is in my code. What's happening is in firefox, everything is in the right place that i want it, but in IE, the iframe for my blog sinks down to the bottom of the page and knocks off the copywright statement. (this is refering to http://www.sevencities.net )

I've been looking over the html and the css for hours and i still have yet to find out what it is that's causing this to happen. can someone please help me out on this?
if you have the time, maybe look over the source code too if that'll help.
the html is http://www.sevencities.net/index.html (of course) and the css is http://www.sevencities.net/style1.css

August 11th, 2006, 11:57 am

One thing that would really help is to not use an iFrame. You can get the same results with DIVs and includes without the headaches.

August 11th, 2006, 12:25 pm

i'm at a loss as to how to go about that :\

August 11th, 2006, 12:32 pm

Make a div with the same width, float it on the left, and set the overflow to scroll.

August 11th, 2006, 12:52 pm

and then how would i have it show the page that i want to be in the scrollbox?

August 11th, 2006, 2:27 pm

PHP or server side include.

August 12th, 2006, 11:00 am

:\ i hate to be a nuisance but that's so vague.
i've been researching and trying to figure out what to do based on keywords, but i'm not sure eactly what you mean or how to go about using them to solve my problem.

August 12th, 2006, 6:41 pm

You have page IWANTTHIS.html of what you want displayed in the scrollbox.

Then in the main php page where you want it displayed you code

<DIV style="overflow:auto">
<?php include("IWANTTHIS.html"); php?>
</DIV>

August 13th, 2006, 7:43 am

so my main page has to be coded in php?
it's html right now. is it possible to do it w/ an html coded page?

August 13th, 2006, 12:07 pm

not really.... there is a way around it though....

<div style="position:absolute;top:-100px;left:-100px;visibility:hidden">
</div>
<frameset>
<Iframe name="blah" src="testpage.html">
</IFRAME>
</frameset>
</div>
<div style="overflow:auto;">
<Script type="text/javascript">
document.write(document.frames['blah'].document.innerHTML);
</script>
</div>

Something like that... not really sure if I used the right object tree to access it all, but I can remember from an extensive javascript copy of the game pokemon I once made that I used a method like this to load the world maps...

Michael

August 13th, 2006, 12:56 pm

If you have a PHP page extension all it really does is allow any PHP code you have in their to be parsed. Change the extension, add the include, and you're good.

August 14th, 2006, 8:35 am

Wolfsparty I have to admit the layout of your current example webpage, which uses a div instead of an iframe, seems fine: it looks the same to me in Firefox and IE. That said, this entire thread seems to have run off topic. iframes and divs should affect the layout of their containing page much the same; identically, I want to say. The advice never to use iframes is general and just fine if not followed slavishly, but inapplicable to your problem, I would think.

I encourage you to get your embedded webpage working using an iframe, as you originally intended. That's what iframes are for, and they're the easiest way of accomplishing it. If you wish, you can experiment later with alternate implementations using divs. Tell you what. Restore your webpage to its iframe form so I can see the problem. If I can't stop IE from hiding your copyright notice without forcing you to rearchitect your entire website, I'll owe you a beer.

August 14th, 2006, 12:00 pm

Hahah. alright. I restored it back to the original iframe set up for you.

By the way, thanks a lot guys!

August 14th, 2006, 8:38 pm

Your stated problem, where did your copyright text go, is very simple. You inserted it inside the iframe (non-)contents:

Code: [ Download ] [ Select ]

<iframe src="external_file.html">Copyright text</iframe>

To get the text to show up, you need to move it after the iframe's closing tag.

I suspect you've adjusted your page to work better since initially posing your question, and I suspect that the problem you originally referred to has something to do with the complex interplay between the overall fixed content height and the rather byzantine collection of divs and table parts with margins and heights both absolute and relative that causes the top row of the outermost table to compress the bottom row more in IE than in Firefox.

Frankly I don't know what layout rule you've run into. It's a quirks mode problem, because both browsers lay out your page in the same way if you remove the doctype. Tables are a quirks mode minefield, and I don't recognize the esoteric combination of rules from hell that's tripping you up.

So for the beer problem, move your copyright text below the iframe's closing tag. For genuine satisfaction, the easiest fix is to remove index.html's doctype. It happens that both browsers agree on the height of that outermost table's top row in quirks mode. A more rigorous fix would be to simplify the page's construction. It looks like you've piled on several layers of duelling size constraints in an effort to squeeze your layout into shape, and popped a seam. On your example page you could easily lose the tables, though it looks like it was based on some more complex page that no doubt isn't so easily fixed.

August 14th, 2006, 8:54 pm

Oh wow. So that's all it was. I removed the doctype and it looks good now. Thanks a lot man.