Forum Moderators: not2easy
I'm having some trouble with this one. I'm after a two column 100% high, 100% wide layout with header and footer. I modified some code by DrDoc that I found in a 2 year old post, I though it worked perfectly until I tried IE7 :(
In IE7 the sidebar and content divs refuse to display at 100%...
I've tested it in IE6, IE8 & Firefox 2 and they work as expected.
Unfortunately trial I installed the IE8 Beta on my dev machine over IE7 thinking IE8 has an IE7 mode so it should be fine... its not, the IE8 developer toolbar is seriously crap and I can't install the IE6/7 developer toolbar so I'm stuck with trial and error.
Is anybody able to shed any light on the IE7 specific problem? My test code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>2 Column Sandwich</title>
<style type="text/css">
html, body { height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; }
body { font-family: Geneva, Arial, Helvetica, sans-serif; color:#000000;}
a {color: #FFAAFF;}
iframe { margin:0; padding:0; height:100%; display:block; width:100%; border:none; }
#header { background: #f00; height: 50px; position: absolute; top: 0; width: 100%; }
#main { background: #f0f; top: 50px; bottom: 20px; left: 0; right: 0; position: absolute; overflow: auto; }
#sidenav { background: #00f; height: 100%; float: left; width: 200px; overflow: auto; }
#content { background: #0ff; height: 100%; overflow: auto; }
#footer { background: #0f0; height: 20px; margin-top: -20px; position: absolute; top: 100%; width: 100%; }
</style>
<!--[if lt IE 7]>
<style type="text/css">
html { padding: 50px 0 20px; }
#main { bottom: auto; left: auto; right: auto; top: auto; height: 100%; position: static; }
</style>
<![endif]-->
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="sidenav"><a href="javascript:alert(document.compatMode)">Display Standards mode</a></div>
<div id="content">
<iframe src="http://server/" height="100%" width="100%">
<p><a href="http://server/">Server</a></p>
</iframe>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
I'm not sure if that would help you or not, but google the above and you just might get the site that I am talking about.
I'm sure that Maybe Suzy or someone else that has read about IE8 could be along to help you out with this one. Just be patient :)
4~css
You could always contact the owner of the site and ask if they have a resolution for you to get IE7 back if this is what you wish to do.
that's as far as I can remember anyway, I remember AP was always buggy right from the start of the IE7 betas.. but even although the final release did appear to have ironed out all the creases maybe it didn't.
anyway how's it looking in IE8?
and are you saying that the 'emulate IE7 feature' works (which is why you can see it) are you just unhappy that you've lost the toolbar for now. I've yet to download am waiting for the teething troubles to pass.
It works perfectly in IE8, I'm glad they're forcing standards now.
(Although it has hilighted some other lazy CSS that will need to be fixed)
I added the 100% height to #main and it worked. I must have tried everything but that :(
Thanks Suzy :)
