Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Body padding problem (mainly IE)

    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!! ) 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:
    Code:
    * {
      	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:
    Code:
    <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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd recommend you to take a suitable layout from http://www.bonrouge.com/2c-hf-fixed.php rather than messing with absolute positions.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •