wteun
11-18-2008, 03:00 PM
Hey guys,
Im new to this forum. Hope you can help me out now and then ;)
This is a website i had to convert from frames(someone else did that to the design!! :eek: ) into div's.
Since it have to be exactly the same as the old version the content area has to be 100%(or filling up the rest of the screen) so its possible to center stuff in there. Header and footer have to be positioned absolute. Menu has to be 100% height. SO this is what i came up with and it looked and worked good! ...untill...i opened it in IE 6 and 7.
Would really apreciate some help on this one. Thank's in advance.
CSS:
* {
margin: 0px;
padding: 0px;
}
body {
background: #e5e5e5;
color: #000000;
font: 13px Myriad Pro, Arial, sans-serif;
padding: 141px 0px 30px 120px;
}
/*---------------LAYOUT---------------*/
div#container_header
{
position: absolute;
top: 0px;
left: 0px;
background: #ffffff;
height: 141px;
width: 100%;
}
div#container_footer
{
width: 100%;
background: #da0061;
position: absolute;
bottom: 0px !important;
left: 0px;
height: 30px;
}
div#footer
{
line-height: 32px;
color: #ffffff;
}
div#footer_links
{
position: absolute;
top: -66px;
width: 120px;
}
@media screen
{
body>div#container_header{
position: fixed;
}
body>div#container_footer{
position: fixed;
}
body>div#menu{
position: fixed;
}
}
* html body{
overflow: hidden;
}
* html div#container_content{
height: 100%;
overflow: auto;
}
div#container_headertop
{
height: 121px;
width: 100%;
}
div#header_left
{
float: left;
}
div#header_right
{
float: right;
}
div#bar
{
height: 20px;
width: 100%;
background: #da0061;
text-align: right;
line-height: 20px;
color: #ffffff;
}
div#container_content
{
height: 100%;
width: 100%;
}
div#menu
{
position: absolute;
top: 0px;
left: 0px;
width: 120px;
background: #f7ccdf;
height: 100%;
}
div#menu_inner
{
position: relative;
top: 141px;
}
div#content
{
float: left;
width: 100%;
}
and HTML:
<body>
<div id="menu">
<div id="menu_inner">
</div>
</div>
<div id="container_footer">
<div id="footer_links">
</div>
<div id="footer">
</div>
</div>
<div id="container_header">
<div id="container_headertop">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="bar">
</div>
</div>
<div id="container_content">
<div id="content">
</div>
</div>
</body>
Im new to this forum. Hope you can help me out now and then ;)
This is a website i had to convert from frames(someone else did that to the design!! :eek: ) into div's.
Since it have to be exactly the same as the old version the content area has to be 100%(or filling up the rest of the screen) so its possible to center stuff in there. Header and footer have to be positioned absolute. Menu has to be 100% height. SO this is what i came up with and it looked and worked good! ...untill...i opened it in IE 6 and 7.
Would really apreciate some help on this one. Thank's in advance.
CSS:
* {
margin: 0px;
padding: 0px;
}
body {
background: #e5e5e5;
color: #000000;
font: 13px Myriad Pro, Arial, sans-serif;
padding: 141px 0px 30px 120px;
}
/*---------------LAYOUT---------------*/
div#container_header
{
position: absolute;
top: 0px;
left: 0px;
background: #ffffff;
height: 141px;
width: 100%;
}
div#container_footer
{
width: 100%;
background: #da0061;
position: absolute;
bottom: 0px !important;
left: 0px;
height: 30px;
}
div#footer
{
line-height: 32px;
color: #ffffff;
}
div#footer_links
{
position: absolute;
top: -66px;
width: 120px;
}
@media screen
{
body>div#container_header{
position: fixed;
}
body>div#container_footer{
position: fixed;
}
body>div#menu{
position: fixed;
}
}
* html body{
overflow: hidden;
}
* html div#container_content{
height: 100%;
overflow: auto;
}
div#container_headertop
{
height: 121px;
width: 100%;
}
div#header_left
{
float: left;
}
div#header_right
{
float: right;
}
div#bar
{
height: 20px;
width: 100%;
background: #da0061;
text-align: right;
line-height: 20px;
color: #ffffff;
}
div#container_content
{
height: 100%;
width: 100%;
}
div#menu
{
position: absolute;
top: 0px;
left: 0px;
width: 120px;
background: #f7ccdf;
height: 100%;
}
div#menu_inner
{
position: relative;
top: 141px;
}
div#content
{
float: left;
width: 100%;
}
and HTML:
<body>
<div id="menu">
<div id="menu_inner">
</div>
</div>
<div id="container_footer">
<div id="footer_links">
</div>
<div id="footer">
</div>
</div>
<div id="container_header">
<div id="container_headertop">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="bar">
</div>
</div>
<div id="container_content">
<div id="content">
</div>
</div>
</body>