Sticky footer problem RRS feed

  • Question

  • Hi.

    I have a sticky footer on my website. By 'sticky footer' I mean a footer which is stuck to the bottom of the browser window, rather than one at the bottom of the webpage.

    Here is example code for the sticky footer, with all unnecessary code removed:

    <!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">
    <style type="text/css">
    html {
    	overflow-y: scroll; 
    	text-align: center;
    body {
    #container {
    	width: 1000px;
    	margin: auto;
    .box {
    	color: white;
    	background-color: green;
    	float: left;
    	width: 1000px;
    	margin: 10px 0px 30px 0px;
    #footer {
    	color: white;
    	background-color: black;
    	font-family: "Times New Roman";
    	width: 1000px;
    	bottom: 0;
    <div id="container">
    <div class="box"><p>Content goes here</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p><p>Blank</p></div>
    <div id="footer">Sticky footer goes here</div>
    </div><!-- end container div -->

    If you test the code you will see that the footer always remains stuck at the bottom of the browser window and, if you reduce the height of the browser window, there is a small gap between the content and the footer. This is exactly what I want. All well and good so far!

    The problem is I like to make minor edits in Design View and, although Design View does render pages quite well, it does not like my sticky footer! Instead of being stuck at the bottom of the screen the footer is stuck to the left of the screen with the text stuck to the right of the screen! This is highly frustrating as it overlaps my other content. Apparently I can't post a screenshot of the problem as my account isn't 'verified'.

    Given that SuperPreview doesn't go above IE8, I assume Expression Web 4 is using a rendering engine based on IE8 (or worse!). Does anyone know of a way to get my footer to stick to the bottom of the screen in Expression Web Design View? Perhaps an IE patch is required? Is my existing code good or bad?

    I really appreciate any help you can provide. Thanks in advance.

    Sunday, July 14, 2013 2:12 PM

All replies

  • The Design Pane is NOT a browser. It has to do a LOT of things that a browser can't do (outlining elements, labels, etc.). It also doesn't render any active content (Flash, javascript, etc.).

    The Design Pane is a sketchpad. You must preview frequently in multiple browsers (the 4 or 5 major ones) in order to check the actual rendering in each--they can differ, since they have different rendering engines that have their own rules.

    EW is not a drag-and-drop editor; most of your work is done in split view in the Code Pane, not in the Design Pane.

    We don't need screen shots. Read the Forum FAQ; if you have rendering issues, you need to post a link to the problem site/page online. That's the only way for us to see what's really going on--with all the parts of the site working together--so we can examine the details and code (in the same way that a mechanic can't diagnose a car's problem by looking at a photo of the car).

    Given the code you posted, I don't see the rendering issue you describe. The footer and text is centered in the Design Pane.

    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Sunday, July 14, 2013 2:38 PM
  • "Given that SuperPreview doesn't go above IE8, I assume Expression Web 4 is using a rendering engine based on IE8 (or worse!). "

    Well, no, no and no.  SuperPreview will use browsers you have installed, including IE9 (I don't have IE10, so can't comment on that), SuperPreview has nothing to do with Design View, and Design View isn't a browser at all, never mind a specific one.

    Design View does things that a browser does not do, and there are things Design View can't render that a browser can.

    Your posted example, by the way, isn't one of them. What you posted works fine in Design View.

    • Edited by KathyW2 Sunday, July 14, 2013 4:02 PM ssdsds
    Sunday, July 14, 2013 4:00 PM
  • Hi.

    I appreciate what Design View is for and, whilst I almost always work directly with the code, I like being able to quickly view minor edits in Design View. Everything is fine except for the fact that the footer covers up some of the content in my container.

    The code I posted above didn't copy and paste correctly. The blank line in #container should be (position : relative) and the blank line in #footer should be (position : fixed). (Even here the code gets deleted unless I write it incorrectly). If you write this code correctly and open the page you will see that the footer renders correctly in all major browsers but not in Design View (at least not mine).

    I've not posted any other parts of my website because the above piece of code demonstrates the problem precisely. Anything else I add simply works around the problem, rather than affecting it in any way.

    • Edited by 553311 Sunday, July 14, 2013 4:51 PM Code
    Sunday, July 14, 2013 4:45 PM
  • Sorry, that was just an assumption. Clearly a mistaken one.

    Again, whilst I appreciate the limitations of Design View, I like being able to use it to view minor edits and I am not trying to build a complex website. EVERYTHING in my website renders fine in Design View, with the sole exception of the footer. It is very frustrating for the footer to cover up part of the content in my container and I am wondering if there are any alternative ways of creating a sticky footer which would be rendered properly in Design View.

    Sunday, July 14, 2013 4:48 PM
  • Okay--here's my question: Why?

    Why are you using a "sticky footer"? If you look around the web, you'll be hard pressed to find any example of them. What is so important in the footer that it has to stay plastered on the screen all the time? The stuff in most footers is superfluous or extraneous, certainly not something that should command constant attention of the visitor.

    There is good reason that people don't use them any more. For one thing, they consume valuable vertical screen real estate (of which there is much less than horizontal). People are used to footers that move with the page. If they need something, they'll look for it. You may have another, uncommon use for the footer, but we don't know what that could be.

    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Sunday, July 14, 2013 5:02 PM
  • Many of my webpages have only a small amount of content meaning the footer would be in the middle of the page. I don't want that. Further, I want to display a small logo on my footer which should be visible at all times. A sticky footer seems the easiest solution.

    The footer on my website has only one line of small text so it isn't intrusive. It works fine in all major web browsers, on Android, and on other platforms. It just doesn't work in the Design View in Expression Web, which is why I have posted here to see if anyone can offer some assistance.

    Sunday, July 14, 2013 5:08 PM
  • With the changes you mention, I see what you see.

    As to what you can do: You can't change how Design View works with the CSS it is given.

    You can comment out the two lines that cause the issue in your local copy of your CSS.

    • Proposed as answer by KathyW2 Sunday, July 14, 2013 8:22 PM
    Sunday, July 14, 2013 5:49 PM
  • Leaving aside the wisdom of using a sticky footer, the key issue is that design view simply is not a browser. With five, soon to be six, major versions of IE in the wild, all with significant differences in rendering, plus everything from versions 3.6 to 21 of Firefox, several versions of Webkit (Safari, Chrome, and lately, Opera), there is no way that a single rendering engine can possibly accommodate all of the alternatives.

    Furthermore, the design view has to render visual aids, element outlines, control menus for ASP.NET controls, etc., things that no regular browser ever has to be concerned with. It is there as a convenient sketchpad view of the page, not a true rendering as it would be in a browser, and it naturally has limitations as a content editor. This is one of them.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Sunday, July 14, 2013 7:32 PM