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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Footer elements ignore margin and padding

    Hi there,

    All elements in my footer simply ignores padding and margin set on it's containing divs and elements (except for one ul). I can't seem to fint what's causing the bug, so if anybody could kick in and maybe give a hint I'd be really greatful!

    Relevant code below (just copy n' paste to a .html file):

    See attached image for more info on divs.
    The UL mentioned that doesn't ignore margin/padding is #contactform ul (though its margin is set to 0 below).

    The #contactform fieldset has a top-margin set to 40px. This is totally ignored. Same if margin is set on other elements within the footerbg div.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="css/fonts.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    	});
    </script>
    <style type="text/css">
    
    #bg {
            /* Set rules to fill background */
            min-height: 100%;	/*keeps filling the browser window vertically*/
            min-width: 1280px;	/*width of the image so that the image never gets smaller than it actually is.*/
    
            /* Set up proportionate scaling */
            width: 100%;		/*keeps filling the browser window horizontally*/
            height: auto;
    
            /* Set up positioning */
            position: absolute;
            top: 0;
            left: 0;
    		z-index:-2;			/*Makes sure the image stays behind every element*/
    }
    
    /*media query to check if the browser window is smaller than the image, and using a combo percentage-left and negative left margin to keep it centered regardless.*/
    @media screen and (max-width: 1280px) { /* Specific to this particular image */
    #bg {
                    left: 50%;
                    margin-left: -640px;   /* 50% of image width */
            }
    }
    
    * {				margin:0;
    				padding:0;
    				}
    	
    body {			overflow-x:hidden; /*To prevent scroolbars caused by background*/
    				}
    		
    #headerbg {		background:url(images/headerbg.png) repeat-x;
    				width:100%;
    				height:183px;		
    				}
    				
    #header {		width:1000px;
    				height:183px;
    				margin:0 auto; 
    				}
    				
    #logo {			font-family:VegurRegular;
    				font-size:60px;
    				margin:10px 15px 0 0;
    				color:#fff;
    				text-transform:uppercase;
    				float:right;
    }
    
    #logobold {		font-family:VegurBold;
    				color:#48c9ff;	
    }
    				
    #smoky {		background:url(images/smoky.png) no-repeat;
    				margin:-220px 0 0 -280px;
    				width:642px;
    				height:677px;
    				z-index:-1;
    				position:absolute;
    				}
    				
    #featured {		background:url(images/playershadow.png) bottom left no-repeat;
    				/*width:778px;*/
    				height:370px;/*height:315px; - current height to place background shadow in right place*/
    				margin:20px 0 0 -30px;
    				float:left;
    				}
    						
    				
    #playershadow {	width:800px;
    				height: 86px;
    				margin:0px 0 0 0;
    				z-index:0;				
    }
    				
    #container {	width:1000px;
    				margin:0 auto;
    				}
    				
    #footerbg {		background:url(images/footerbg.png) repeat-x;
    				width:100%;
    				height:331px;
    				clear:both;
    				}
    				
    #footercontent {width:1000px;
    				height:244px;
    				margin:40px auto;
    				}
    				
    #footerinfo {	width:1000px;
    				height:53px;
    				margin:0 auto;
    				}
    
    #contactform {	width:288px;
    				border:none;
                                    margin:40px 0 0 0;
    				}
    				
    #contactform ul {margin:0 0 0 0;}
    
    #contactform li {list-style:none;
    				margin:4px 0 4px 0;
    				}
    
    #contactform label {
    				width:65px;
    				float:left;
    				}
    
    #contactform #e-mail {
    				background:url(images/emailbg.jpg) no-repeat;
    				width:116px;	/*Real width:116px;*/
    				height:27px;
    				border:none;
    				line-height:27px;
    				padding:0 0 0 3px;
    				color:#fff;
    				}
    		
    #contactform #besked {
    				background:url(images/beskedbg.jpg) no-repeat;	
    				width:217px;
    				height:96px;
    				border:none;
    				padding:3px;
    				color:#fff;
    				}
    
    #contactform #sendbtn {
    				background:url(images/sendbtnbg.png) no-repeat;	
    				width:98px;
    				margin:10px auto;
    				display:block;
    				border:none;
    				text-indent:-9999px;
    				}
    				
    #mainmenu {		float:right;}
    
    #mainmenu li {	background: url(images/navbg-right.png) bottom right no-repeat;
    				height:44px;
    				margin:0 11px 0 11px;
    				list-style:none;
    				float:left;
    				font-family:VegurBold;
    				font-size:20px;
    				text-transform:uppercase;
    				
    						}
    						
    #mainmenu li a {background:url(images/navbg-left.png) bottom left no-repeat;
    				height:36px;		/*Real height:44px*/
    				margin-left:-5px;	/*To make sure left background doesn't overlap main button bg*/
    				display:block;
    				text-decoration:none;
    				color:#fff;
    				padding:8px 8px 0 8px;
    				}
    				
    #mainmenu .regularnumb {
    				font-family:VegurRegular;
    				font-size:17px;
    				}
    				
    #mainmenu .regular {
    				font-family:VegurRegular;
    				font-size:10px;
    				text-align:right;
    				display:block;	/*Necessary to make the text-align property work*/
    				margin-top:-3px; /*To drag close to menu text*/
    				}
    				
    				
    h1 {			font-family:NewRegular;
    				text-transform:uppercase;
    				margin:40px 0 0 300px ;
    				font-size:38px;
    				color:#000;
    				
    				}
    				
    h1 #teaserthin {	font-family:VegurRegular;
    				font-size:38px;
    				}
    				
    h1 .teaserfix {	font-family:VegurBold;
    				}
    				
    h2 {			margin:0 0 10px 0;
    				font-family:Arial, Helvetica, sans-serif;
    				font-size:18px;
    				color:#000;
    				}
    				
    p {				font-family:VegurRegular;
    				}
    				
    .column {		width:340px;
    				float:left;
    				}
    				
    a {				text-decoration:none;}
    				
    
    		
    #mainmenu li:hover {background-position:top right;} 
    
    #mainmenu a:hover {background-position:top left;
    }
    
    
    /*------SLIDER BEGIN ------*/
    /*Slides CSS and images*/				
    #fragment-1 {
    	background:url(images/image1.jpg) no-repeat;
    	background-size:100%;
    }
    
    #fragment-2 {
    	background:url(images/image2.jpg) no-repeat;
    	background-size:100%;
    }
    
    #fragment-3 {
    	background:url(images/image3.jpg) no-repeat;
    	background-size:100%;
    }
    
    #fragment-4 {
    	background:url(images/image4.jpg) no-repeat;
    	background-size:100%;
    }
    
    #fragment-5 {
    	background:url(images/image5.jpg) no-repeat;
    	background-size:100%;
    }
    
    
    /*Slides Menu CSS*/
    #nav-fragment-1 {
    	width:297px;
    	background: url(images/pink.png) no-repeat;
    }
    
    #nav-fragment-2 {
    	width:201px;
    	background: url(images/blue.png) no-repeat;
    }
    
    #nav-fragment-3 {
    	width:162px;
    	background: url(images/red.png) no-repeat;
    }
    
    #nav-fragment-4 {
    	width:227px;
    	background: url(images/yellow.png) no-repeat;
    }
    
    #nav-fragment-5 {
    	width:145px;
    	background: url(images/green.png) no-repeat;
    }
    
    .ui-tabs-nav-item a:hover, .ui-tabs-nav li.ui-tabs-selected a {
    	
    	background: url(images/undermenubg.jpg) no-repeat;
    	border: solid 1px #dcdede; 
    	color:#000;
    }
    
    .ui-tabs-nav{ 
    	width:300px;
    	margin:15px 0 0 0;	
    	list-style:none; 
    	float:left;
    }
    
    .ui-tabs-nav li{ 
    	height:42px;
    	text-transform: uppercase;
    	font-family:VegurBold;
    	font-weight: bold;
    	font-size:16px;
    	line-height:20px;
    	color:#666;
    	margin:0 7px 0 0;   	
    }
    
    
    .ui-tabs-nav li span{
    	margin-left:20px;
    }
    
    .ui-tabs-nav li a{ 
    	height:30px;
    	margin-top:4px;
    	padding-top:12px; 
    	display:block; 
    	color:#fff; 
    	text-decoration:none;
    }
    
    .ui-tabs-panel{ 
    	width:670px; 
    	height:300px;
    	float:left;
    	border:5px solid #fff;
    	margin:0 0 0 50px;
    	}
    
    .ui-tabs-hide{ 
    	display:none; 
    }
    /*------SLIDER END ------*/
    </style>
    </head>
    
    <body>
    <div id="headerbg">
    <div id="header">
    <a href="#"><span id="logo"><span id="logobold">Logo</span>Morelogo</span></a>
    <ul id="mainmenu">
    <li id="produkter"><a href="#"><span class="regularnumb">01</span> lalala<br/> <span class="regular">lalala</span></a></li>
    <li id="referencer"><a href="#"><span class="regularnumb">02</span> lalalar<br/><span class="regular">lalala</span></a></li>
    <li id="omos"><a href="#"><span class="regularnumb">03</span> lalala<br/><span class="regular">lalala</span></a></li>
    <li id="kontakt"><a href="#"><span class="regularnumb">04</span> lalala<br/><span class="regular">lalala</span></a></li>
    </ul>
    
    </div>
    </div>
    <div id="container">
    <div id="smoky"></div>
    <h1><span id="teaserthin">lala</span> lala og [--] til lala,<br/> iv<span class="teaserfix">æ</span>rks<span class="teaserfix">æ</span>ttere og lalalalalala</h1>
    <div id="featured">
    	    <!-- First Content -->
    	    <div id="fragment-1" class="ui-tabs-panel"></div>
    
    	    <!-- Second Content -->
    	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide"></div>
    
    	    <!-- Third Content -->
    	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide"></div>
    
    	    <!-- Fourth Content -->
    	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide"></div>
    	   	<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide"></div>
    <ul class="ui-tabs-nav">
    <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span> Præsentationsvideo</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>WEBDESIGN</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>WEBSHOP</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Kampagnesite</span></a></li>
    <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><span>Backend</span></a></li>
    </ul>
    
    </div>
    <div class="column">
    <h2>Komplet hjemmeside med lalalalallalala</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis ligula, sed luctus mi. Praesent velit tellus, dapibus vel vulputate quis, cursus et turpis. Sed volutpat facilisis ligula dapibus luctus. Praesent elit lorem, pellentesque vestibulum posuere a, sollicitudin dapibus neque. Suspendisse et ultrices est. Nulla arcu magna, eleifend non aliquam vitae, bibendum in magna. Proin ultricies ante in mauris aliquam vitae elementum mi aliquet. Donec elementum, lacus eu placerat porta, nulla diam ornare sapien, vitae ornare tellus purus ac mi. Morbi hendrerit nunc nunc, in porttitor purus. Nam eleifend lorem a justo gravida ut ornare diam dignissim. Suspendisse vitae neque est, eu porta turpis. In fringilla, erat ut pretium ultrices, mi nisl ultricies quam, in adipiscing odio elit at sapien. Aenean consequat lobortis pretium.</p>
    </div>
    
    <div class="column">
    <h2>Komplet hjemmeside med lalalalallalala</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis ligula, sed luctus mi. Praesent velit tellus, dapibus vel vulputate quis, cursus et turpis. Sed volutpat facilisis ligula dapibus luctus. Praesent elit lorem, pellentesque vestibulum posuere a, sollicitudin dapibus neque. Suspendisse et ultrices est. Nulla arcu magna, eleifend non aliquam vitae, bibendum in magna. Proin ultricies ante in mauris aliquam vitae elementum mi aliquet. Donec elementum, lacus eu placerat porta, nulla diam ornare sapien, vitae ornare tellus purus ac mi. Morbi hendrerit nunc nunc, in porttitor purus. Nam eleifend lorem a justo gravida ut ornare diam dignissim. Suspendisse vitae neque est, eu porta turpis. In fringilla, erat ut pretium ultrices, mi nisl ultricies quam, in adipiscing odio elit at sapien. Aenean consequat lobortis pretium.</p>
    </div>
    
    
    </div>
    <div id="footerbg">
    <div id="footercontent">
    <fieldset id="contactform">
    <ul>
    <li>
    <label for="e-mail">e-mail:</label>
    <input type="text" id="e-mail" />
    </li>
    <li>
    <label for="besked">besked:</label>
    <textarea id="besked" ></textarea>
    </li>
    <li><input type="submit" id="sendbtn" /></li>
    </ul>
    </fieldset>
    aaa
    </div>
    <div id="footerinfo">
    info
    </div>
    </div>
    <img src="images/bodybg.jpg" alt="" id="bg" />
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails Footer elements ignore margin and padding-2011-04-03_121322.jpg  
    Last edited by CaptainB; 04-04-2011 at 10:04 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Quote Originally Posted by CaptainB View Post
    The #contactform fieldset has a top-margin set to 40px. This is totally ignored.
    That's because the two .column elements within #container are floated, and #container therefore doesn't extend to include them. Consequently the top margin on #contactform fieldset has no discernible effect.

    To fix, clear the floats in #container by adding overflow:auto:

    Code:
    #container {
        margin: 0 auto;
        overflow: auto;
        width: 1000px;
    }

  • Users who have thanked SB65 for this post:

    CaptainB (04-04-2011)

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    SB65,

    Thank you for your reply. Unfortunately it doesn't solve the problem - margins are still ignored when applied to elements in the footer. I thought I solved the floats problem by adding:

    Code:
    #footerbg {		           background:url(images/footerbg.png) repeat-x;
    				width:100%;
    				height:331px;
    				clear:both;
    				}
    However, I still have the problem. (I tried your solution with/without the above clear enabled and also with the #contactform fieldset set to display:block; - same problem.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,694
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Good morning CaptainB,
    You would only be able to clear your floats with clear: both; applied to #footerbg if the footer was inside #container. It's not though, so clearing that way won't work.

    When I clear the floats in #container as SB65 suggests, the margin works on the footer in FF.

    See this explanation of how overflow: auto; clears your floats.

    Maybe adding a background color to #container and #footercontent would show you better where they are. It could also be that your seeing collapsing margins on #footerbg. Adding overflow: auto; to that element can solve that bug. See how uncollapsing margins work here.
    Last edited by Excavator; 04-03-2011 at 02:31 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    CaptainB (04-04-2011)

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Guys, thank you.
    It's funny, somehow when clear:both; was applied to #footerbg my floatet .column divs worked without the footer jumping to the top.

    Now, I fould out that BOTH my footerbg and content needed to be cleared (somehow the #content did only expand to fit the first heading, but neverthless the margins in the footer started to work when I applied overflow:auto; to the footerbg - also without clearing the container). However, now another problem arises - when overflow:auto; is applied to footerbg it caused scroolbars on that div only - see screenshot.

    I don't understand how you guys make it work by only clearing #content - I'm on Opera, and I see no difference (only if I apply overflow:auto; to #footerbg).

    Code:
    #container {	width:1000px;
    				margin:0 auto;
    				overflow:auto;
    				background-color:#ff6600;
    				}
    				
    #footerbg {		background:url(images/footerbg.png) repeat-x;
    				width:100%;
    				height:331px;
    				overflow:auto;
    				}
    				
    #footercontent {width:1000px;
    				height:278px;
    				margin:0px auto;
    				}
    				
    #footerinfo {	width:1000px;
    				height:53px;
    				margin:0 auto;
    				}
    Attached Thumbnails Attached Thumbnails Footer elements ignore margin and padding-2011-04-03_153013.jpg  
    Last edited by CaptainB; 04-03-2011 at 04:21 PM.

  • #6
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Scrollbars shouldn't appear when I set margin on element within a div of the footer (#contactform), right? It seems odd as this wouldn't add to the height of the div? EDIT: It seems like the scrollbars are only displayed in Opera and IE? EDIT: Fixed with overflow:hidden;

    However - it's still a mystery how you guys could make it work with only overflow:auto; set on #container.

    Btw Excavator: Thank you for the links, great reading (wasn't aware of this method VS clear:both.
    Last edited by CaptainB; 04-03-2011 at 04:29 PM.


  •  

    Posting Permissions

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