Forum Moderators: not2easy
been a while since posting on here but am stumped and about to give up.
I am trying to get a 100% height layout to work. It has a header and a footer, and all looks fine (OK not so great in IE6 but will get to that shortly). That is until I increase the text size in IE7, then it goes horribly wrong.
clearly IE and FF have changed the way they do resizing content (fairly recently?) to just 'zoom in' it seems, which is a pain in the proverbial.
I am using Suzy's layout as per : [webmasterworld.com...]
Is there any way around IE(7) killing my layout on text increase?
and if anyone knows how to do the same layout as mentioned, but with the header NOT having to be a fixed height, so that it would expand to the height the content in it required, whilst still retaining the scrollbar just on the centre content pane then I would definitely add them to my Xmas card list. Maybe this is only possible using JS... :(
Here is the markup/styles I have so far: <snip>
(using pastebin.. is that OK? I know its external, but hoping its acceptable)
Thanks muchly
Nat
[edited by: swa66 at 9:44 pm (utc) on Nov. 3, 2008]
[edit reason] Please post the code here so we can preserve it for the future [/edit]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1"><title>
Page
</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%;
background:#eee;
font-family:arial,verdana,sans-serif;
font-size:100%;
color:#333;
}
#container{
position:relative;
width:800px;
height:100%;
margin:0px auto;
}
div#content p {
text-align:justify;
padding:0 1em;
font-size:90%;
}
#header, #footer {
position: absolute;
left: 0;
right: 0;
background: #e03108;
}
#header_outer {
height: 100px;
top: 0;
background:#e03108;
border-bottom:2px solid #333;
color:#fff;
}
#header{
padding:5px;
}
#footer {
bottom: 0;
height: 50px;
color:#fff;
}
#content {
position: absolute;
top: 100px;
bottom: 50px;
left: 0;
right: 0;
background: #fff;
overflow: auto;
text-align:center;
}
#content p{
margin:10px 0px;
}
fieldset{
text-align:center;
border:0;
padding:0;
}
#powered{
position:absolute;
left:5px;
bottom:5px;
font-size:80%;
}
#content img{
border:1px solid #000;
}
#footer input{
}
fieldset{
text-align:center;
border:0;
}
#powered{
position:absolute;
left:.5em;
bottom:0;
font-size:70%;
}
#content img{
border:1px solid #000;
}
label{
font-size:90%;
}
#logo{
width:100px;
float:left;
}
#bubble{
background-color:#fff;
height:80px;
color:#333;
margin-left:110px;
margin-right:60px;
}
#bubble p{
margin:5px;
}
#pBar{
width:50px;
float:right;
}
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {text-align: center;}
#header, #footer, #content {width: 100%;}
#header{padding:0px;}
#bubble,#pBar,#logo{margin-top:10px;}
#bubble{text-align:left;}
#content {
text-align: left;
height: expression(document.body.offsetHeight - 150 + "px");
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<form name="aspnetForm" method="post" action="page.aspx" id="aspnetForm">
<div id="header_outer">
<div id="header">
<div id="logo">
<img src="images/logo.gif" width="80" height="80" alt="logo" />
</div>
<div id="pBar">
<img src="images/pbar.gif" width="50" height="80" alt="pbar" />
</div>
<div id="bubble">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas lorem orci, ultricies vitae, dignissim vel, hendrerit nec, augue.</p>
</div>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas lorem orci, ultricies vitae, dignissim vel, hendrerit nec, augue.
Donec eu pede eget pede suscipit auctor. Cras quis metus. Donec faucibus nulla.
Praesent rhoncus. Etiam iaculis feugiat diam. Suspendisse vel pede.
Suspendisse non augue id purus adipiscing molestie.
Vivamus hendrerit commodo nisl.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Fusce auctor, risus id sagittis fermentum, sapien tellus porta lorem, in porta tortor quam sed nunc.
Sed metus. Aenean pulvinar ipsum. Vestibulum porta, orci ut blandit vestibulum,
eros enim tempus elit, non tempor tellus velit sit amet augue. In varius sem sit amet leo. </p>
</div>
<div id="footer">
<div id="powered"><p>Powered by ©</p></div>
</div>
</form>
</div>
</body>
</html>
