I've applied the CSS sticky footer tutorial that I got from here on my website, but for some reason I can't get it to work?
JSBin
Thanks in advance.
Remove the top margin from #body and replace it with padding:
#body {
width: 1200px;
margin: 0 auto;
overflow:auto;
padding-top: 80px;
padding-bottom: 170px;
}
add 100% height to html (not only body):
html, body {
background-color: #FFF;
margin: 0;
padding: 0;
height: 100%;
}
Full JSBin solution and preview
Did you apply the correct #footer id in your HTML code?
<div id="footer">
</div>
I can not immediatly see what is wrong with your code (it is a lot of css, and you use strange tags like center). I swear by this version of the sticky footer however: http://ryanfait.com/sticky-footer/
Works fine for me and is very much legacy/cross browser compatible. Perhaps this is an option for you...
Related
For some reason the footer on one page of my site is not full width. There's a huge white space on the left that I cannot seem to get rid of and its causing my entire footer to be shifted to the right.
This is the current CSS:
#main-footer {
width: 105%;
margin-bottom: -50px;
margin-left: 0;
margin-right: 0;
height: auto;
padding: 50px;
background-color: #2E2E2E;
}
#top-footer {
height: 30px;
background-color: #77CAE9;
margin-left: 0;
width: 105%;
}
I have a feeling it's related to the page width but I can't figure out where to adjust that either. I'll be so grateful if someone can help me out with this!
EDIT: The URL to the page is http://tstand.com/blog
Thanks :)
Angela
Start with moving your <footer> outside of the <div class="container">.
The class .container is used to centre it's content in middle of the screen. See more details here here:
http://getbootstrap.com/css/
A common cause for this can be a default padding or margin of <body> or even <html>. In that case CSS like this should fix it:
body {
margin:0;
}
If the problem persists please post a complete, but minimal example that demonstrates the issue.
I am working on GunsAmerica.com and some users with IE8 are noticing (with great distaste) that the images are not showing up on our listings. I am using Browserstack.com to test and can confirm the beheavior. You can see the problem on the homepage http://www.gunsamerica.com
Here is the CSS for the image:
.listing-thumb img, .listing-thumb > a > img {
height:auto;
width: 170px;
display:inline;
max-width: 100%;
}
Here is an example listing image html:
<div class="listing-thumb">
<img itemprop="image" alt="CSC ARMS " elite="" model"="" 2014="" 5.56="" .223="" 16""="" src="/UserImages/142343/945864089/wm_md_6737932.jpg"><br>
</div>
The class "sr_image" doesn't do anything so try to ignore that.
As far as I can tell it should work. Anyone that can help would be greatly appreciated.
Maybe this works
<!--[if lt IE 8]>
<style type="text/css">
a img { display: inline; }
</style>
<![endif]-->
The solution about making the website compatible with IE8 will be temporary, because Microsoft is going to get rid of it anyway.
Check the link below for information on how to resolve the problem:
http://www.codeproject.com/Articles/310368/Make-Site-Compatible-to-IE-IE-IE-and-IE
Alright guys it's working now. What seemed to be the issue was the width property of the div that was enclosing it with the class "listing_thumb". This apparently required a width to be set because the inner wasn't giving the container width information (required static px width).
From:
.listing-thumb {
margin: 0px 10px;
display: inline;
float: left;
max-height: 119px;
overflow: hidden;
}
To:
.listing-thumb {
margin: 0px 10px;
display: inline;
float: left;
max-height: 119px;
overflow: hidden;
width: 170px;
}
So there ya have it folks. If you've exhausted all other possibilities make sure all the enclosing containers have width properties that support the inner html.
http://www.michaelhoffmandesign.com
So I and pretty new to coding and have been coding this website from the ground up for professional use. The problem is, when users click the Resume section, the whole navbar moves over to the left. I have tried to correct this by adding a left:x px. But it doesn't seem to work. Any help?
The scrollbar causes the slight difference. You can enable scrollbar on all the pages with:
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This makes the scrollbar always visible and only active when needed.
Or another solution would be:
html {height: 101%;}
use margin: 0 auto for nav to align center
Try this:
nav {
position: relative;
width: 800px;
height: 17px;
margin: 0 auto;
text-decoration: none;
}
header nav ul {
width: 800px;
margin: 0 auto;
}
In the html for resume.html, check this line :
< nav style="right:10px;">
Remove that style attribute and give it a try.
My website I'm creating for a company looks great but I just don't know the right CSS to put in the to make the "WELCOME" title show underneath. I understand that I should put a height, but then if I do that it will show a height for all pages as it is wrapped in an if statement. If on the home page show this widget, if not don't show it. So if I have a set height even if the widget isn't visible on the about page the height will still be in the way. So I thought height:auto; would do it but it's not doing that.
#home-services {
width: 100%;
height: auto;
clear: both;
margin-bottom: 30px;
margin: 0px !important;
}
#home-services section {
float: left;
width: 240px;
height: auto;
margin-right: 10px;
background-color: #aaa685 !important;
}
This is what it looks like across all browsers.
What else do I have to put into my CSS to have the WELCOME title move down just on this page? Any help is appreciated!
Hey now add this css
Already add in your css style sheet this css
#home-services img{
margin: 0 0 -25px !important;
padding: 0 !important;
}
Now put this css Used this one
#home-services .textwidget img{
margin:0 !important;
}
Do this
#home-services .textwidget img{ margin-bottom:25px !important;}
Try inserting padding-top:30px in the h1 css.
It will clear the problem. If this gets you into trouble with the layout and you need to eliminate the padding, have a javascript function called on load that checks if that h1 is displayed or not and modify the padding accordingly. This is in no way elegant, but it will solve your problem.
you can also use jquery in if statement to change CSS like
$(".yourclass").css("CSSproperty", "value");
I've been searching through forums to find a solution for the problem I'm facing and couldn't find any. So here I am, again, asking for remedy.
I have this page which encase personal profile form. That form is enclosed in page container div and is quite long that it requires main scrollbar in order to see those hidden. And there's a footer section at the bottom of the page where copyright statements are displayed.
My problem is I can't find a way to make my page container div to stretch along with the body element. I've applied height: inherit to that div but still it refused to stretch so that it covers till the border of the footer section. Now, there is big gap between the footer and that div filled with body background color. Here's a screencap for better understanding.
screencap
/*Form container*/
#form_container{
width: 600px;
background-color:#FDAE80;
margin-top: 15px;
margin-left: 110px;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
}
body{
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
background-color: #683468;
}
/*Page Container*/
div.mcontainer{
width: 1032px;
height: inherit;
background-color: #ffffff;
}
/*Footer Section*/
div.footer{
width: 1032px;
height: 80px;
border-top: 1px solid #683468;
margin-top: 10px;
text-align: center;
font-family: Arial;
font-size: 12px;
color: red;
position: relative;
bottom: 0px;
background-color:black;
}
Any help would be appreciated.
EDIT Just to clarify, Footer section is inside page container div. Here my html - htm
Try adding a clearing element as the last item in your page container, after all the form elements. Could be <br clear="all" /> or a div with style clear:both.
A better idea - remove the height: inherit; from your mcontainer style. This fixed it for me.
try adding html to the height to:
html, body {
height: 100%;
}
as discussed on A List Apart: http://www.alistapart.com/articles/footers/
Try to use overflow: hidden; on div.mcontainer.
If you have floating elements in your container, try placing clear-both-div at the end of the container div:
<div id="mcontainer">
...code
<div style="clear:both;"></div>
</div>
I had the same problem, now I am using java script (jQuery) to solve it.
In my case it was the div for the menu bar and I calculated the height from the main container plus the height from the header.
$(document).ready(function(){
var h = $(".main").height() + $(".main").position().top
$(".lmenu").css({height:h+"px"})
$(".rmenu").css({height:h+"px"})
});
Right now it seems to make more sense to use the height of the body:
$("body").height()
If there is a version without javascript, it would be interesting to know. But meanwhile this could be a workaround.
Maybe you should try adding: clear: both to footer class