/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
position: relative;
min-height: 100%;
line-height: 1.4;
font-size: 18px;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
.redText {
color: #b6503c
}
.footerBack {
height: 1em;
}
body {
margin: 0 0 5.5em;
font-size: 100%;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.02, #E2DFD7),
color-stop(1, #F4F2EE)
);
background-image: -o-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: -moz-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: -webkit-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: -ms-linear-gradient(bottom, #E2DFD7 2%, #F4F2EE 100%);
background-image: linear-gradient(to bottom, #E2DFD7 2%, #F4F2EE 100%);
}
#wrapper {
margin: 0 auto;
padding-bottom: 0px;
/* max-width: 1280px;
max-height: 960px;
width: 53.333em;
height: 71.111em; */
}
#logo {
margin: 1em 1em -1em 1.5em;
z-index: 2;
}
#hook {
display: inline;
clear: both;
position: absolute;
top: 125px;
letter-spacing: .05em;
}
#socialIcon1, #socialIcon2, #socialIcon3 {
margin-top: -1em;
}
/* Spacing between social media icons created via padding in the below .button float css */
#iAm {
font-family: Vivaldi, "Brush Script MT", "Giddyup Std", "Myriad Pro", Garamond;
font-size: 1.5em;
}
#carousel {
background-color: #433d32;
/* height: 16.667em; */
height: 58.823529%;
margin: auto 0;
padding: 10px;
}
#bio {
/* height: 11.667em; */
height: 41.117647%;
padding: 0 3em 0 3em;
margin: auto 0;
}
#bioText {
margin: 1em;
width: 70%;
}
#social {
background-color: #a29d92;
}
#portrait {
float: right;
margin: 0 1em 0 1em;
}
h1 {
font-family: "Century Gothic", Muli:300, "Century", "Calibri", "Courier New", Courier, monospace;
font-size: 1.5em;
color: #433d32;
text-align: center;
margin: auto 0;
}
p {
font-family: "Bell MT", Sylfaen, "Baskerville Old Face", Garamond;
font-size: 1em;
color: #433d32;
padding: 0;
}
a {
color: #b6503c;
text-decoration: underline;
}
/*
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
header {
height: 9em; /*11.111em;
margin: auto 0;
}*/
aside {
text-align: center;
background: #a29d92;
position: absolute;
top: 0;
right: 1em;
height: 4em;
width: 25%;
padding: 0em .5em .5em .5em;
margin: auto 0;
clear: both;
font-size: .9em;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
main {
clear: both;
height: 100%;
/*max-height: 18.333em;*/n
/*margin: auto 0 20px 0;*/
}
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
clear: both;
text-align: center;
}
footer p {
color: #433d32;
margin-bottom: 0;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Float Shadow Effect
========================================================================== */
.button {
margin: 0em;
padding-left: 2.5em;
padding-right: 2.5em;
cursor: pointer;
background: none;
text-decoration: none;
color: none;
/* Prevent highlight colour when element is tapped */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* SHADOW/GLOW TRANSITIONS */
/* Float Shadow */
.float-shadow {
display: inline-block;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform, opacity;
transition-property: transform, opacity;
}
.float-shadow:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.float-shadow:hover:before {
opacity: 1;
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
/*@media only screen and (min-height: 850px) {
#bio {
background: blue;
padding: 3% 3em 3% 3em;
margin: auto 0;
}
#carousel {
background: red;
height: 58.823529%;
padding: 100px;
margin: auto 0;
}
}
@media only screen and (max-width: 944px) {
#social {
background: red;
}
}*/
/* @media screen and (max-width: 944px) {
#fbContainer {
margin: auto 0 0 40px;
width: 80%;
display: block;
}
.social-links img {
margin: -10px auto -10px -50px;
}
.fb-page {
margin-top: 25px;
}
}
*/
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Risa Lee ~ Web Design Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- <link rel="stylesheet" media="screen and (max-width: 501px)" href="css/main_mobile.css" />-->
<link href='http://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet' type='text/css'>
<!--Start Royal Carousel-->
<link rel="stylesheet" type="text/css" href="load/skin_modern_silver.css"/>
<link rel="stylesheet" type="text/css" href="load/html_content.css"/>
<script type="text/javascript" src="java/FWDRoyal3DCarousel.js"></script>
<script type="text/javascript">
FWDUtils.onReady(function()
{
var carousel = new FWDRoyal3DCarousel({
//required settings
carouselHolderDivId:"myDiv",
carouselDataListDivId:"carouselData",
displayType:"fluidwidth",
autoScale:"yes",
carouselWidth:30,
carouselHeight:225,
skinPath:"load/skin_modern_silver",
//main settings
backgroundColor:"none",
backgroundImagePath:"none",
thumbnailsBackgroundImagePath:"none",
scrollbarBackgroundImagePath:"none",
backgroundRepeat:"none",
showDisplay2DAlways:"no",
carouselStartPosition:"center",
numberOfThumbnailsToDisplayLeftAndRight:4,
slideshowDelay:5000,
autoplay:"no",
showPrevButton:"yes",
showNextButton:"yes",
showSlideshowButton:"yes",
disableNextAndPrevButtonsOnMobile:"yes",
controlsMaxWidth:940,
slideshowTimerColor:"#777777",
showContextMenu:"no",
addKeyboardSupport:"yes",
//thumbnail settings
thumbnailWidth:400,
thumbnailHeight:250,
thumbnailSpaceOffset3D:70,
thumbnailSpaceOffset2D:70,
thumbnailBorderSize:10,
thumbnailBackgroundColor:"#666666",
thumbnailBorderColor1:"#fcfdfd",
thumbnailBorderColor2:"#e4e4e4",
transparentImages:"no",
maxNumberOfThumbnailsOnMobile:13,
showThumbnailsGradient:"yes",
showThumbnailsHtmlContent:"no",
enableHtmlContent:"no",
textBackgroundColor:"#333333",
textBackgroundOpacity:.7,
showText:"yes",
showTextBackgroundImage:"yes",
showThumbnailBoxShadow:"yes",
thumbnailBoxShadowCss:"0px 2px 2px #555555",
showReflection:"yes",
reflectionHeight:60,
reflectionDistance:0,
reflectionOpacity:.2,
//scrollbar settings
showScrollbar:"no",
disableScrollbarOnMobile:"no",
enableMouseWheelScroll:"yes",
scrollbarHandlerWidth:300,
scrollbarTextColorNormal:"#777777",
scrollbarTextColorSelected:"#000000",
//combobox settings
showComboBox:"no",
startAtCategory:1,
selectLabel:"SELECT CATEGORIES",
allCategoriesLabel:"All Categories",
showAllCategories:"no",
comboBoxPosition:"topright",
selectorBackgroundNormalColor1:"#fcfdfd",
selectorBackgroundNormalColor2:"#e4e4e4",
selectorBackgroundSelectedColor1:"#a7a7a7",
selectorBackgroundSelectedColor2:"#8e8e8e",
selectorTextNormalColor:"#8b8b8b",
selectorTextSelectedColor:"#FFFFFF",
buttonBackgroundNormalColor1:"#e7e7e7",
buttonBackgroundNormalColor2:"#e7e7e7",
buttonBackgroundSelectedColor1:"#a7a7a7",
buttonBackgroundSelectedColor2:"#8e8e8e",
buttonTextNormalColor:"#000000",
buttonTextSelectedColor:"#FFFFFF",
comboBoxShadowColor:"#000000",
comboBoxHorizontalMargins:12,
comboBoxVerticalMargins:12,
comboBoxCornerRadius:0,
//lightbox settings
addLightBoxKeyboardSupport:"yes",
showLightBoxNextAndPrevButtons:"yes",
showLightBoxZoomButton:"yes",
showLightBoxInfoButton:"yes",
showLighBoxSlideShowButton:"yes",
showLightBoxInfoWindowByDefault:"no",
slideShowAutoPlay:"no",
lightBoxVideoAutoPlay:"no",
lightBoxBackgroundColor:"#000000",
lightBoxInfoWindowBackgroundColor:"#FFFFFF",
lightBoxItemBorderColor1:"#fcfdfd",
lightBoxItemBorderColor2:"#e4FFe4",
lightBoxItemBackgroundColor:"#333333",
lightBoxMainBackgroundOpacity:.8,
lightBoxInfoWindowBackgroundOpacity:.9,
lightBoxBorderSize:5,
lightBoxBorderRadius:0,
lightBoxSlideShowDelay:4
});
})
</script>
<!-- End Royal Carousel-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="wrapper">
<header>
<a href="index.html"><img src="img/signature_logo_final2.png" alt="RisaLogo" id="logo"/></a>
<aside>
<p><span class="redText"><strong>@</strong></span> Email me:
<a href="mailto: [email protected]">[email protected]</a><br>
<a href="http://www.linkedin.com/in/risalee" alt="LinkedInLink"><img src="img/48x48-Square-82-LI.png" alt="LinkInIcon" target="_new" width="18px" height="18px" /> View my Resume</a></p>
</aside>
<h1 id="hook">I love <span class="redText">Web Design</span> and <span class="redText">Front End Developement</span>.</h1>
<!-- DELETE ME
<p>Header logo is 298 x 189 signature_logo_final</p>
<p>
200 - Header - 40 .25 25%
300 - Carousel - 26.66667 .2249 37.5%
210 - About 38 .4210 26.25%
90 - Footer 33 .48484 11.25%</p>
-->
</header>
<main>
<div id="carousel">
<div id="myDiv">
</div>
<div id="carouselData" style="display: none;">
<!-- category -->
<ul data-cat="Category one">
<ul>
<li data-type="media" data-url="load/images/1.jpg"></li>
<li data-thumbnail-path="load/thumbnails/1.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Megalith Online</p>
<p class="smallLabel">This site is sadly no longer live (mainly because it's a half a decade old), however, it was designed employing Flash - back when that was the animation standard.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Megalith Online</p>
<p class="mediaDescriptionText">This site is sadly no longer live (mainly because it's a half a decade old), however, it was designed employing Flash - back when that was the animation standard.</p>
</li>
</ul>
<ul>
<li data-type="media" data-url="load/images/5.jpg"></li>
<li data-thumbnail-path="load/thumbnails/5.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Student Orientation Design</p>
<p class="smallLabel">Designed for a University, this project required a simple layout that would accomodate their existing color scheme (gray, beige, red and orange) while still looking clean and clutter-free. Complete with an original logo, the design displays excellently on smaller devices thanks to the use Responsive Design principles.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Student Orientation Design</p>
<p class="mediaDescriptionText">Designed for a University, this project required a simple layout that would accomodate their existing color scheme (gray, beige, red and orange) while still looking clean and clutter-free. Complete with an original logo, the design displays excellently on smaller devices thanks to the use Responsive Design principles.</p>
</li>
</ul>
<ul>
<li data-type="iframe" data-width="800" data-height="550" data-url="load/images/StartHereInfoGraphic_Final.html"></li>
<li data-thumbnail-path="load/thumbnails/6.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Interactive Infographic</p>
<p class="smallLabel">Designed for a University, this graphic replaced a text heavy document with an immersive learning element. The layout for this project was completed using Piktochart, with the interactive elements hand coded to add a little "whizz bang".</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Interactive Infographic</p>
<p class="mediaDescriptionText">Designed for a University, this graphic replaced a text heavy document with an immersive learning element. The layout for this project was completed using Piktochart, with the interactive elements hand coded to add a little "whizz bang".</p>
</li>
</ul>
<ul>
<li data-type="media" data-width="640" data-height="420" data-url="load/images/3.jpg"></li>
<li data-thumbnail-path="load/thumbnails/3.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Creative Portrait</p>
<p class="smallLabel">Created to showcase the then new CSS3 features, this old Portfolio site is no longer live. In it's heyday, it utilized Spry Tabs and a Fluid Layout to allow the foreground elements to float above the background content.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Creative Portrait</p>
<p class="mediaDescriptionText">Created to showcase the then new CSS3 features, this old Portfolio site is no longer live. In it's heyday, it utilized Spry Tabs and a Fluid Layout to allow the foreground elements to float above the background content.</p>
</li>
</ul>
<ul>
<li data-type="iframe" data-width="800" data-height="550" data-url="load/images/dynamicCharts/dynamicTable.html"></li>
<li data-thumbnail-path="load/thumbnails/4.jpg"></li>
<li data-thumbnail-text="" data-thumbnail-text-title-offset="35" data-thumbnail-text-offset-top="10" data-thumbnail-text-offset-bottom="7">
<p class="largeLabel">Dynamic Chart</p>
<p class="smallLabel">This mockup was created for a University that sought implementation of Highcharts' interactive features within their course template. Information displayed is shown only as an example.</p>
</li>
<li data-info="">
<p class="mediaDescriptionHeader">Dynamic Chart</p>
<p class="mediaDescriptionText">This mockup was created for a University that sought implementation of Highcharts' interactive features within their course template. Information displayed is shown only as an example.</p>
</li>
</ul>
</ul>
<!-- end -->
</div>
</div>
<div id="bio">
<img src="img/risa_portrait.jpg" alt="RisaPortrait" id="portrait" />
<div id="bioText">
<p><span class="redText" id="iAm">I</span> am a Denver, CO native who designs and builds beautiful sites with clean, responsive code for computer screens, tablets, mobiles and more.</p>
<p>With over 6 years of experience in the web industry, I have worked with companies like Verizon, CSUGlobal and Pearson eCollege. I work primarily with the Adobe Suite and use cutting edge technologies including <strong>HTML5</strong>, <strong>CSS3</strong> and <strong>JavaScript</strong> to produce accessible sites. I’m passionate about anything computer, art or design related and am an avid video gamer.</p>
<p>What are you wating for? <a href="mailto: [email protected]"><strong>Contact Me</strong></a>!</p>
</div>
</div>
</main>
<footer>
<div id="social">
<a href="https://plus.google.com/+RisaLee/posts" alt="GooglePlusLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-GP.png" alt="GooglePlusIcon" target="_new" id="socialIcon1" /></a>
<a href="http://www.linkedin.com/in/risalee" alt="LinkedInLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-LI.png" alt="LinkInIcon" target="_new" id="socialIcon2" /></a>
<a href="http://twitter.com/#!/@RisaLee316" alt="TwitterLink" rel="float-shadow" class="button float-shadow"><img src="img/48x48-Square-82-TW.png" alt="TwitterIcon" target="_new" id="socialIcon3" /></a>
<p>© 2014 Risa Hall, All Rights Reserved.</p>
</div>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<!--
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
-->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>I've read through countless articles and worked on this for hours but I just can't figure out where the space below the footer is coming from. I've tried declaring 0 margin and padding on the footer and any containing Div's but that didn't work.
In Inspect Mode and Dreamweaver, it seems to think the space is part of the footer, but altering the Footer CSS does nothing.
There are a lot of supporting files, so it's probably easiest to just review my HTML and main.css files in Inspect Mode: http://risalee.com/
Please help!
You shouldn't give your footer a fixed heigth and you have to remove the margin from your p element in the footer. This will fix your problem.
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
clear: both;
text-align: center;
}
footer p {
color: #433d32;
margin-bottom: 0;
}