...

View Full Version : Resolved Footer elements ignore margin and padding



CaptainB
04-03-2011, 11:17 AM
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.



<!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>

SB65
04-03-2011, 11:39 AM
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:


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

CaptainB
04-03-2011, 12:55 PM
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:



#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.

Excavator
04-03-2011, 01:21 PM
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 (http://www.quirksmode.org/css/clearing.html).

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 (http://nopeople.com/CSS%20tips/uncollapsing-margin/index.html).

CaptainB
04-03-2011, 02:31 PM
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).



#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;
}

CaptainB
04-03-2011, 02:45 PM
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;).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum