SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Margin shares the headers? ie

    Hi there,

    I am developing (oh yes here it comes) a simple three column website with a header and a footer on it. However my problem comes in IE where the footer block bizarely seems to share the margin settings from the header block even one is not wrapped in the other.

    I put together a cut down sample of the problem I am facing.

    http://agilehosting.co.uk/boxMargin/page.php

    In IE it displays evenly spaced boxes which oddly enough is wrong, I am expecting the footer to be flush up against the bottom of the three column body. Firefox renders this correctly.

    The 'only' way I have been able to affect this 'gap' between the #footer block and the #content block is to change the 15px bottom margin of the #header block. Obviously changing the header margin to affect the footer is wrong and doesnt actually solve the problem as Firefox will then render it incorrectly if I do.

    I would greatly apreciate it if anyone could point out what I am doing wrong here as I'm tearing my hair out and my searches haven't proved helpful.


    Thanks in advance



    (excuse the indenting I love my tab key ):
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    
    <head>
    	<link rel="stylesheet" type="text/css" href="style.css" />
    	<title>Test site 01</title>
    	
    <!--[if lt IE 7]>
    	<script defer type="text/javascript" src="js/pngfix.js"></script>
    <![endif]-->
    	
    </head>
    
    <body>
    	
    
    	<div id="wrapper">
    	
    		<div id="header" >Header</div>
    		
    		<div id="bodyContainer">
    			<div id="leftMenu">
    				<div id="loginBox" >
    					Not Logged In<br />
    						<form name="login" action="login.php" method="post">
    							<div><b>Username</b></div>
    							<div><input type="text" name="username" size="10" maxlength="30" /></div>
    							<div><b>Password</b></div>
    							<div><input type="password" name="password" size="10" maxlength="30" /></div>
    							<div><input type="submit" value="Login" /></div>
    						</form>
    						<hr />
    				</div>
    				<div id="menu">
    					<ul><li><a href="index.php">Home</a></li>
    						<li><a href="11111.php">option1</a></li>
    						<li><a href="22222.php">option2</a></li>
    						<li><a href="33333.php">option3</a></li>
    					</ul>
    				</div>
    		
    			</div>
    		
    			<div id="content">
    				<div id="newsBox" >
    	
    					<div class="newsArticle">A news article</div>
    				
    				</div>	
    			</div>
    			
    			<div id="rightMenu">
    				<div id="screenshot">Screenshot</div>	
    			</div>
    	
    	
    		</div> <!-- bodyContainer -->
    
    		<div id="footer">Footer</div>
    		
    	</div> <!-- wrapper -->
    
    	
    </body>
    
    </html>
    css
    Code:
    /*************************/
    /* Generic Page elements */
    body
    {
    	font-family:  Verdana, Arial, Helvetica, sans-serif ;
    	color : #eeeeee;
    
    	margin: 0;
    	padding: 0;
    	text-align: center;	
    
    	background-color: #000000;
    	scrollbar-face-color: #DEE3E7;
    	scrollbar-highlight-color: #FFFFFF;
    	scrollbar-shadow-color: #DEE3E7;
    	scrollbar-3dlight-color: #D1D7DC;
    	scrollbar-arrow-color:  #006699;
    	scrollbar-track-color: #EFEFEF;
    	scrollbar-darkshadow-color: #98AAB1; 
    }
    
    /**********************/
    /* Page Content Block */
    #wrapper {
    	text-align: left;
    	margin: 0px auto;
    	padding: 0px;
    	border:0;
    	width: 1020px;
    }
    
    #header {
    	margin: 0 0 15px 0;
    	background: black;
    	border:1px solid white;
    }
    
    #leftMenu{
    	float: left;
    	width: 150px;
    border:1px solid white;
    }
    
    #rightMenu{
    	float: right;
    	width: 150px;
    border:1px solid white;
    }
    
    #content { 
    	float: left;
    	width: 67%;
    border:1px solid white;
    	margin-left: 16px;
    }
    
    #footer {
    	clear: both;
    	background: black;
    	margin: 0 0 0 0;
    border:1px solid white;
    }
    /* End Of {Page Content Block} */
    
    /*************/
    /* Login box */
    #loginBox
    {
    	font-size: 0.6em;
    	padding: 0;
    }
    
    #loginBox form
    {
    	margin: 0;
    	padding: 0;
    }
    /* EndOf {Login box} */

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's very odd.

    Try putting top padding on #bodyContainer instead of a bottom margin on #header.

    Alternatively, try giving #bodyContainer hasLayout. To understand what hasLayout is, read some of these: (I discourage the use of the underscore hack, which the first one recommends though.)
    http://www.satzansatz.de/cssd/onhavinglayout.html
    On Having "Layout"
    "HasLayout" Overview
    A TripSwitch? - set hasLayout to true without a dimension
    IE/Win: inline-block and hasLayout
    Clarification of inline-block and hasLayout
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the prompt reply Kravvitz, alas it hasn't solved the issue.

    I tried applying padding to the container rather than the header margin it had no affect. I also read a couple of those docs and forced a 'hasLayout' on the footer element (checked this with the IE developer toolbar), which also had no affect.


  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Odd. Giving top padding to #bodyContainer with the IE dev toolbar worked here.

    I said to give hasLayout to #bodyContainer, not #footer.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Kravvitz my bad I misread your post. I gave #bodyContainer 'isLayout' and IE now displays it correctly and interprets a top margin on the #footer element. Unfortunately however Firefox now ignores the top margin on the footer element so they are out of sync again, but the other way around.

    But all4nerds your solution seems to work a treat...All the floats on the page now contain the margin settings and both browsers render correctly, bar a few box heights that I've got to sort out. I also removed the % width from the body container.

    Thank for all your help, it was much apreciated. I can sleep well at night now


Bookmarks

Posting Permissions

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