Spartan4085,
Will the footer always be a fixed height, or might the height of the footer change over time or on different pages?
There are a few ways of setting up a “sticky footer”. We need to choose the one that is the most effective for you. As Ralph suggested, they can be tricky if certain content elements change height, so the best method requires looking into your crystal ball and predicting the future.
The height of the footer stays the same forever. It never changes.
Sorry, one more question… Does your site need to be compatible with IE7 or under, or is IE8+ compatibility satisfactory? I will guess that IE8+ is the answer because of the way your page is constructed, but it’s important to ask.
Also, it is not normal for an anchor to be outside of a parent container, so I still recommend putting a <div> around the anchor at the top of the page. That construct is important for the success of any sticky footer.
Before we tackle the sticky footer, though, it would be a very good idea to clean up the HTML a bit. Are you familiar with the HTML validator? http://validator.w3.org/
As ronpat said, do that validation. Anyhow, this is probably the best resorce for achieving the layout you want:
I have fixed the footer problem. I’ll start correcting any mistakes found by the validator (mostly unimportant ones) then I’ll stop for the night.
Every validation error has been fixed, save two. I’ll be back tomorrow.
I have returned a lot later than I thought. I’ve fixed a few validation errors. Only 6 remain - ones that cannot be fixed without sacrificing functionality.
But now I want to fix a problem I’ve had for a long time. The navigation items won’t center in IE. I’ve tried all I could think of. The text appears to center for a second, then changes its alignment left. It works perfectly in all other browsers.
Would you mind checking something, please:
The following relative path to the html5shiv.js appears on line 9 of your page.
<!--[if lt IE 9]>
<script src="Scripts/html5shiv.js"></script>
<![endif]-->
Most of the other paths on your page are absolute paths and begin with a forward slash. (Perhaps you call them “root relative” paths.)
Should the path to the shiv begin with a forward slash also?
I don’t know how to answer that. It should be fine, but I changed it just for uniformity.
The URL to your web site is broken, now. Undo whatever you just did.
It seems that the path to the shiv should begin with a forward slash as shown below. Make that shiv path look like this, if you can.
(line 9 of your HTML page)
<!--[if lt IE 9]>
<script src="[color=blue]/[/color]Scripts/html5shiv.js"></script>
<![endif]-->
I don’t know what I did, but I fixed the server error by restarting.
I already changed the path, but I don’t think that changes anything.
OK, the path looks like it is probably good. However, there is one more error and I believe it is in the IE conditional tag on line 10
Change this:
<!--[if lte IE]>
To this:
<!--[if IE]>
unless it is supposed to target a particular version of IE in which case you would need to supply the version number.
I’ve changed the code. Does this have anything to do with the navbar problem I mentioned, or are you just correcting other mistakes you see?
This is all about the nav bar problem in IE. Give me a few more minutes to isolate the problem.
Near the bottoms of SpryMenuBarHorizontal.css AND SpryMenuBarHorizontalIE.css you will find the following HACK:
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline-block;
f\\loat: left;
}
}
You need to comment it out or delete it from BOTH stylesheets. The {float:left} is sending the menu to the left edge of the page.
I’ve tried that, but it doesn’t seem to work.
EDIT: I got it to work. I changed the {f\loat:left} to {f\loat:center}. It works like it should, now. It’s strange how I’ve had this problem for months and I never thought of that.
Now that that’s fixed, do you notice any problems with the footer? I had to apply some resolution-specific styles to it to make it not overlap the content.
I’m looking at it in IE8 and the menu is centered on the page.
http://stephenreynolds.azurewebsites.net/www.stephenreynolds.com
What version of IE are you looking at?
I looking at IE10, but it works now, as I mentioned previously. You may have checked after I fixed it.
There is no such property as {float:center}. That’s the same as deleting it, except that it will fail the CSS validator. The best thing to do is delete it. The menu is centered using text-align:center and display:inline-block properties. If “accidently re-enabled”, it will break again.
Oh, I see. It’s strange how deleting it didn’t work before, but it does now.
The footer is all wrong. I think you wanted a sticky footer. What you have does not work, whatever it’s supposed to do. I will have to try to figure out what you have done. I doubt I’ll figure it out tonight.