...

View Full Version : Body padding problem (mainly IE)



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>

abduraooft
11-18-2008, 03:09 PM
I'd recommend you to take a suitable layout from http://www.bonrouge.com/2c-hf-fixed.php rather than messing with absolute positions.

wteun
11-18-2008, 06:07 PM
the problem is that it has to be exactly the same as the old version (which is made of frames :S)
In FF and Safari it works nice, but in IE it doesnt work well.

wteun
11-19-2008, 09:16 AM
Old/current version (made out of frames)
http://www.laborsa.nl

New version (made out of div's)
http://www.laborsa.nl/nieuw/

Mind that the content area has to be 100% width (or fill up up the rest of the screen) to be able to center content in some cases.

drhowarddrfine
11-19-2008, 12:20 PM
You will never get IE to attempt to perform like modern browsers with anything inserted before the doctype. IE is in quirks right now. Remove everything you have in front of the doctype.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum