Hi-
My survey has a footer and the Qualtrics plug elements at the bottom of the page.
The survey has two main background colors. For the skin, progress bar, and skin inner, a light green, and for the header and footer elements, a dark green.
My goal is to have the user see the main content (below the progress bar) framed vertically by two solid blocks of the dark green, in which the header elements, skin content area, and footer all have the same width.
My frustrations have been with the footer elements.
Problem 1: In some window sizings, when the amount of content on the page is small, the footer or footers (depending on which I have set to display) separate vertically from the plug, which sticks to the bottom of the page, leaving a stripe of the light green background color between the two footer elements. The footer seems to stick to the bottom of the skin inner, following it up when there's not enough content to push it to the bottom of the page. I'd like to figure out how to get the footer elements to stick together at the bottom of the page, so that they appear as a single visual element to the user.
I have set all the top and bottom margins to zero to try to keep any space from appearing between them, but this does not fix the problem. I've tried various negative margins (don't really know what I'm doing though). Here are what I think are possibly relevant chunks of the CSS. Sorry if there's a bunch of extra stuff in there--I was throwing the kitchen sink at it.
#SurveyEngineBody {
   background:#DDEACB!important;
   width:100%;
   }
.Skin #Wrapper {
   min-height: 100%;
   height: 100%;          
   background-color:#DDEACB!Important;
   width:100%;
   }
...
.Skin #Footer {
   min-width:100%!Important;
   display:block;
   position:relative;
   background:#528135!Important;
   font-size:12px;
   text-align:center;
   padding-left:6px;
   padding-right:6px;
   padding-top:18px;
   padding-bottom:22px;
   margin-left:auto;
   margin-right:auto;
   margin-top:8px!Important;
   margin-bottom:0px!Important;
   }
.Skin #PushStickyFooter {
   display:block;
   min-height:0px!Important;
   position: relative;
   background:#528135;
   color:#528135;
   padding-left:0px;
   padding-right:0px;
   margin-left:auto;
   margin-right:auto;   
   margin-top:0px!Important;
   margin-bottom:0px!Important;
}
.Skin #Footer #BrandingFooter {
   display:block;
   min-height:40px; */
   position: relative;
   background:r#528135;
   color:#528135;
   padding-left:0px;
   padding-right:0px;
   margin-left:auto;
   margin-right:auto;
   margin-top:0px!Important;
   margin-bottom:0px!Important;
   }
.Skin #Plug {
   display:block!Important;
   position:relative;
   float:none;
   width:100%;
   height:18px;
   padding-top:0px;
   padding-bottom:2px;
   background:#528135!Important;
   margin-left:auto;
   margin-right:auto;
   margin-top: 0px!Important;
   margin-bottom: 4px!Important;
   }
.Skin #Plug a {
   display:block!Important;
   float:none;
   min-height:16px!Important;
   font-size:12px;
   padding-top:4px;
   padding-bottom:0px;
   margin-left:auto;
   margin-right:auto;
   margin-top: 0px!Important;
   margin-bottom: 0px!Important;
   background:#528135!Important;
   }
Problem 2: I have successfully made the header and skin content area the same width using percentages of width rather than pixel width specifications. I like the idea that all the elements size to the window. However, the footer and plug seem to follow a different logic. If I make everything 85%, for example, the progress bar, header, and skin inner will all the same width, but the footer elements are either wider or smaller than the rest of the conent, and how they behave seems to depend on the window. I have spent a lot of time trying to trick these things into doing what I want, and I am baffled. Any insights?
Thanks so much!