Hi,

 

I have a floating footer set up on my site, but for some reason part of the contents of said footer wont come off the very bottom. The Dreamweaver preview shows the content sitting nicely in the middle of the footer with a few pixels gap at the top and the bottom.

 

But when viewing it in a browser, some of content sits right on the bottom and other content sits in the middle where it should be. Here is the HTML:

 

<div id="footer">
   <div id="footer_content">
 <div id="social_media"><a href="i've removed this info"><img style="padding:5px" width="38" height="27" padding="5px" border="0" src="images/linkedin-3.png" alt="i've removed this info"/></a><a href="i've removed this info"><img style="padding:5px" border="0" src="http://twitter-badges.s3.amazonaws.com/follow_us-a.png" alt="i've removed this info"/></a>  </div> 

 <div id="copyright">
 <p>© 2011 i've removed this info</p>
 </div>

 <div id="breadcrumbs_text">│<a href="i've removed this info">FREE TRIAL</a> > │<a href="i've removed this info">CUSTOMER LOGIN > </a>│<a href="i've removed this info">SEARCH > </a><a href="i've removed this info">│SITE MAP  >  |</a>
</div>
</div>
</div>

 

And this is the CSS:

#breadcrumbs_text {
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
}

#breadcrumbs_text a {
color:#FFF;
}

#copyright {
margin-left:10px;
margin-right:20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #ffffff;
float:left;
}

#footer { 
padding-top:2px;
background-color:#666;
height: 40px; 
width: 100%; 
position:fixed; left:0px; bottom:0px; 
padding-left:30px;
padding-right:60px;
}

#footer_content {
margin-left:auto;
margin-right:auto;
text-align:left;
}

#social_media {
float:left;
}

 

As you can see from this image:

 

 

The first div sits on the bottom, the second slightly higher and it's only the 3rd which is actually at the right level.

 

Can anyone fix this for me?

Is this live anywhere? Also, you cant trust the Dreamweaver preview window.

Try removing the height attribute from the footer and giving it an overflow value of auto. It "could" be a float/clear issue looking at your code but it is hard to do more than theory without a live example.

Try removing the height attribute from the footer and giving it an overflow value of auto. It "could" be a float/clear issue looking at your code but it is hard to do more than theory without a live example.

 

The live example is on a private site (it's a company website i'm creating) which i cannot grant access to unfortunately.

 

I'm not a web designer by trade. I'm seen as a sort of 'jack-of-all-trades' at the small company i work for.

Ah sorry now I understand.

 

To put it simply try doing the following:

 

Replace:

 

#footer { 
       padding-top:2px;
       background-color:#666;
       height: 40px; 
       width: 100%; 
       position:fixed; left:0px; bottom:0px; 
       padding-left:30px;
       padding-right:60px;
}

 

With

 

#footer { 
       padding:2px 0 5px 0;
       background-color:#666;
       overflow:auto;
       width: 100%; 
       position:fixed; left:0px; bottom:0px; 
       padding-left:30px;
       padding-right:60px;
}

 

In theory this should now contain all of the contents while providing space at the bottom however it might be too tall but this will atleast show whether it is a possible issue with the "floated" elements.

 

 

Edit, code tags.

Edited August 3, 201115 yr by PhunkRabbit

Yeah it's sorted it thanks.

 

Now i just need to get it to centre horizontally properly on the page. (i kind of gave up on this)

Edited August 3, 201115 yr by Truffle

If you are talking about centering the Footer then do the following:

 

#footer { 
       padding:2px 0 5px 0;
       background-color:#666;
       overflow:auto;

       width: 900px; /* THIS NEEDS TO BE THE DESIRED WIDTH & A FIXED VALUE NOT A % */
       margin: 0 auto; /* PUT text-align:center; ON THE BODY TAG (body:text-align:center;) */
       text-align:left; /* YOU MAY NEED TO APPLY THIS TO OTHER ELEMENTS OR A CONTAINING ELEMENT THAT CONTAINS EVERYTHING, TYPICALLY THIS COULD BE #wrapper OR #container */

       position:fixed; left:0px; bottom:0px; 
       padding-left:30px;
       padding-right:60px;
}

 

The caps are for catching your eye, im not shouting

Cheers. I've used your changes and made a few of my own.

 

Becuase i want the footer to go across the width of the screen no matter what, I have kept #footer width:100% and added #footer_content width instead (which i have given a px value).

 

Works a treat. Thanks!

 

I have more questions if you want to help out more

 

I'll post up another couple of images in a sec to show you my latest problem.

Edited August 3, 201115 yr by Truffle

In Chrome my menus look correct:

 

 

However in IE they go awry:

 

 

Any ideas why this might be?

 

The HTML is just a couple of lists but the CSS for the top menu is:

 

#basics {
width: 380px;
height: 31px;
margin: 0 auto;
padding: 0;
float:right;
margin-bottom: 30px;
border-color:#000;
border-style:solid;
border-width:thin;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 7px 7px 6px 0px #adaaad;
-moz-box-shadow: 7px 7px 6px 0px #adaaad;
box-shadow: 7px 7px 6px 0px #adaaad;
}

#basics ul {
margin: 0;
padding: 0px;
list-style: none;
line-height: normal;
}

#basics li {
float: right;
}


#basics a {
display: block;
height: 25px;
margin-right: 5px;
padding: 8px 5px 0px 5px;
background: url(images/img04.gif) no-repeat right top;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
border: none;
}

#basics a:hover, #basics .current_page_item a {
background: url(images/img05.gif) repeat-x left top;
text-decoration: none;
color: #f47321;
}

Edited August 3, 201115 yr by Truffle

I will be back in a couple of hours, hopfulyl someone will be able to help. If not then ill post later.

 

Have some work to finish before going home.

One of the links has been bumped down to the next line, this would suggest something is not right with your widths.

 

What version of IE is that? A few versions have a bug called 'double margins' where if you float and set a margin to the same direction, it gets doubled.

 

I can see you have a margin-right set to the links along with being floated to the right. Try either floating them to the left, or use padding to space them out rather than margin.

 

It's good to try and avoid this whenever you can

If the IE is IE6 then it is likely to be a double margin bug as suggested above.

 

If it is IE7 then it is likely to be a broken box model issue that will also affect IE6.

 

If it is IE8 then check Firefox as it should also be affected, if not then I have no idea without seeing the underlying code.

 

If it is IE9 then it could be a float or position issue with malformed HTML.

 

 

Make sure the containing element is wide enough for the content.

Make sure that the CSS is not defining additional margin or padding (with a CSS reset).

 

Edit:

Also try validating both the HTML and CSS, it might point out the issue.

Cheers guys. it was happening in Firefox too, simply increasing the width by a few pixels has sorted it. Must be something to do with the different rendering engines?

 

I have one more numbskull question.

 

I cannot for the life of me get some text to vertically align properly inside a div.

 

CSS:

 

#contact_buttons {
background-color: #eee;
margin-top:13px;
margin-bottom:13px;
height: 45px;
width: 220px;
border-color:#000;
border-style:solid;
border-width:thin;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 7px 7px 6px 0px #adaaad;
-moz-box-shadow: 7px 7px 6px 0px #adaaad;
box-shadow: 7px 7px 6px 0px #adaaad;
float:right;
}

#contact_buttons_text {
text-align:center;
margin:auto;
}

 

HTML:

<div id="contact_buttons">
   <div id="contact_buttons_text"><p>Contact Sales</p></div></div>

 

 

I've tried manipulating margin, using vertical-align and i still cant get the text to move up a bit!

Cheers guys. it was happening in Firefox too, simply increasing the width by a few pixels has sorted it. Must be something to do with the different rendering engines?

 

I have one more numbskull question.

 

I cannot for the l...

 

...and i still cant get the text to move up a bit!

 

 

Remove the height from :

#contact_buttons

and use padding or margin on:

#contact_buttons_text

to get the desired height.

Cheers again