Hi guys,

I have very little experience with coding however I hope someone will help me out anyways. I would like to have the top spacing removed/reduced from my contact page and my blog page on www.ducmphung.com but I having some trouble seeing where in the CSS I need to alter. Maybe one of you can see it?

thanks in advance!

/*


/* HTML5 Boilerplate */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: inherit; color: #3b3b3b; }
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #5a88fe; color: #fff; text-shadow: none; }
::selection { background: #5a88fe; color: #fff; text-shadow: none; }

a { color: #909090; text-decoration: none; }
a:hover { color: #3b3b3b; text-decoration: none; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* =============================================================================
WP styles
========================================================================== */
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
clear: both;
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
clear: both;
display: block;
margin: 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background-color: #fff;
border: 1px solid #f0f0f0;
max-width: 100%; /* Image does not overflow the content area */
padding: 4px;
text-align: center;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.wp-caption.alignnone {
clear: both;
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption a{
display: block;
}
.wp-caption img {
border: 0 none;
display: block;
height: auto;
margin: 0;
max-width: 100%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
color: #9d9d9d;
font-size: 11px;
font-style: italic;
line-height: 17px;
margin: 0;
padding: 10px;
}
.gallery-caption {
color: #666;
font-size: 12px;
}
.sticky { /*Empty*/ }

/* Assistive text */
.assistive-text {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
#access a.assistive-text:active,
#access a.assistive-text:focus {
background: #eee;
border-bottom: 1px solid #ddd;
color: #1982d1;
clip: auto !important;
font-size: 12px;
position: absolute;
text-decoration: underline;
top: 0;
left: 7.6%;
}
h1,h2,h3,h4,h5{
color: #484848;
font-weight: bold;
line-height: 1.05em;
margin: 0 0 0.9em;
}
h1 a,h2 a,h3 a,h4 a,h5 a,
.widget .post-title{
color: #484848;
}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,
.widget .post-title:hover{
color: #909090;
}
h1{
font-size: 30px;
}
h2{
font-size: 27px;
}
h3{
font-size: 24px;
}
h4{
font-size: 20px;
}
h5{
font-size: 17px;
}


/* =============================================================================
MAIN STYLES
========================================================================== */
html, body{
font-family: Georgia, Cambria, Arial, sans-serif;
min-height: 100%;
}
html.lt-ie8{
height: 100%;
}
.lt-ie8 body{
height: 100%;
}
#whole-bg-image{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
#whole-bg-image img{
display: block;
height: auto;
width: 100%;
}
#root{
padding: 60px 0 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#root > header{
background-color: #fff;
min-height: 60px;
padding: 0 75px 0 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
-moz-box-shadow: 0 5px 5px rgba(0,0,0, 0.15);
-webkit-box-shadow: 0 5px 5px rgba(0,0,0, 0.15);
box-shadow: 0 5px 5px rgba(0,0,0, 0.15);
}
#root > header.no-widgets{
padding-right: 40px;
}
#root > header.open{
}
#root > header .handle{
background: transparent url(images/header-handle-strip.gif) 0 0 repeat;
cursor: pointer;
position: absolute;
top: 0;
bottom: 0;
right: 40px;
width: 30px;
}
#root > header .handle span{
background: transparent url(images/spriteme1.png) -10px -168px no-repeat;
height: 27px;
position: absolute;
bottom: -27px;
left: 0;
width: 30px;
}
#root > header.open .handle span{
background-position: -10px -195px;
}
#root > header .handle:hover span{
background-position: -10px -163px;
bottom: -32px;
height: 32px;
}
#root > header.open .handle:hover span{
background-position: -10px -190px;
}
#mid{
padding: 100px 0;
position: relative;
}
#content{
background-color: #fff;
margin: 0 auto;
padding: 40px;
width: 820px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/*-moz-box-shadow: 0 0 5px 5px rgba(0,0,0, 0.15);*/
/*-webkit-box-shadow: 0 0 5px 5px rgba(0,0,0, 0.15);*/
/*box-shadow: 0 0 5px 5px rgba(0,0,0, 0.15);*/
}
.static-right #content{
float: right;
}
.static-left #content{
margin: 0;
}
#root > footer{
background-color: transparent;
font-size: 12px;
min-height: 50px;
padding: 0 40px;
position: relative;
}
.copyright{
float: left;
line-height: 50px;
}
.signature{
float: right;
line-height: 50px;
}

/* GLASS SWITCH*/
.glass-switch{
background: transparent url(images/spriteme1.png) 0 -549px no-repeat;
cursor: pointer;
display: none;
height: 50px;
margin-top: -25px;
position: fixed;
top: 50%;
left: 0;
width: 50px;
z-index: 500;
}
body.page-template-albums_template-php .glass-switch,
body.single-album .glass-switch{
margin-top: -90px;
}
body.apollo_glass_on.glass_switch .glass-switch{
display: block;
}
.glass-switch.off{
background-position: -50px -549px;
}


/* =============================================================================
HEADER
========================================================================== */
#root > header .inside{
display: table;
width: 100%;
}
#logo{
display: table-cell;
padding: 0 40px;
vertical-align: top;
}
.lt-ie8 #logo{
float: left;
}
.collapsing{
display: table-cell;
vertical-align: top;
width: 100%;
}
.lt-ie8 .collapsing{
width: auto;
}
.lt-ie8 .collapsing nav{
float: left;
}
.collapsing .add-ons{
float: right;
width: 39%;
}
.lt-ie8 .collapsing .add-ons{
width: auto;
}
#access{
float: left;
width: 60%;
}
#access > ul{
min-height: 36px;
padding: 13px 0 11px;
}
#access > ul > li{
border: 1px solid transparent;
float: left;
margin-right: 5px;
position: relative;
white-space: nowrap;
}
#access > ul > li:hover,
#access > ul > li.hovered{
background-color: #fff;
border-color: #f2f2f2;
-webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
}
#access > ul > li > a{
display: block;
line-height: 36px;
padding: 0 9px;
position: relative;
z-index: 5;
}
#access > ul > li:hover > a{
background-color: #fff;
}
#access > ul ul{
background-color: #fff;
border: 1px solid #f2f2f2;
display: none;
position: absolute;
top: 100%;
left: 0;
margin-left: -1px;
margin-top: -1px;
min-width: 100%;
padding: 3px 0;
-webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
}
#access > ul ul ul{
top: 0;
left: 100%;
margin-left: 4px;
margin-top: -3px;
}
#access li:hover{
z-index: 201;
}
#access h3.assistive-text{
line-height: 36px;
}
#access li a,
#access h3.assistive-text{
color: #4a4a4a;
font-size: 13px;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
#access li li a{
display: block;
font-size: 12px;
font-weight: normal;
padding: 0 10px;
}
#access li li a:hover{
color: #9d9d9d;
}
#access li li a span{
border-top: 1px solid #f2f2f2;
display: block;
line-height: 2em;
padding: 3px 0 2px;
}
#access li li:first-child > a span{
border-top: none;
}
#access li li.parent{
position: relative;
}
#access li li.parent:after{
content: "";
background: transparent url(images/spriteme1.png) -8px -431px no-repeat;
height: 8px;
margin-top: -4px;
position: absolute;
top: 50%;
right: 10px;
width: 6px;
}
#access li li.parent > a span{
padding-right: 6px;
}
.lt-ie8 #access li li.parent > a span{
background: transparent url(images/spriteme1.png) 67px -422px no-repeat;
}
#header .socials{
float: right;
height: 39px;
overflow: hidden;
padding: 7px 0 0;
visibility: hidden;
}
#header .socials.hover{
overflow: visible;
}
#header .socials .slide{
padding: 0 7px 7px 0;
-webkit-border-radius: 16px;
-moz-border-radius:16px;
border-radius: 16px;
}
#header .socials.hover .slide{
background-color: rgb(255,255,255); /* IE */
background-color: rgba(255,255,255,0.8);
}
#header .socials .slide a{
float: left;
height: 32px;
margin: 7px 0 0 7px;
opacity: 0.6;
}
#header .socials .slide a:hover{
opacity: 1;
}
#header .socials .slide img{
display: block;
}
#head-widgets{
clear: both;
display: none;
overflow: auto;
margin-right: -5px;
padding: 40px 5px 0 0;
}
.lt-ie8 #head-widgets {
position: relative;
padding-bottom: 10px;
}

#jpHeaderPlayer{
border-right: 1px solid #eee;
float: right;
height: 40px;
padding: 0;
margin-top: 10px; /* only margin-top */
width: 40px;
}
#jpHeaderPlayer ul{
height: 40px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
#jpHeaderPlayer a.jp-play,
#jpHeaderPlayer a.jp-pause{
background: url(images/speaker.png) 50% -55px no-repeat;
display: block;
height: 40px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
width: 40px;
}
#jpHeaderPlayer a.jp-pause{
background-position: 50% -5px;
}
#jpAudioContainer audio{
max-width:30px; /*IOS fix */
}
/* =============================================================================
SINGLE PAGE / POST
========================================================================== */
body.single-post #content{
position: relative;
}
article{
background: transparent url(images/line.gif) 0 0 repeat-x;
float: left;
padding-top: 30px;
width: 560px;
}
.full-width article{
float: none;
width: auto;
}
/*.page-title{
margin-bottom: 25px;
word-wrap: break-word;
}*/
.post-info{
border-top: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
font-size: 13px;
margin-bottom: 25px;
padding: 5px 0;
}
.post-info > a,
.post-info > span{
line-height: 20px;
margin-right: 10px;
padding-left: 17px;
}
.post-info > a:last-child,
.post-info > span:last-child{
margin-right: 0;
}
.post-info a.date{
background: transparent url(images/icons.png) 0 3px no-repeat;
}
.post-info span.author{
background: transparent url(images/icons.png) 0 -24px no-repeat;
}
.post-info span.categories{
background: transparent url(images/icons.png) 0 -56px no-repeat;
}
.post-info span.tags{
background: transparent url(images/icons.png) 0 -87px no-repeat;
}
article .post-info a.comments{
background-color: #3b3b3b;
color: #fff;
font-size: 16px;
line-height: 30px;
min-width: 20px;
padding: 0 5px;
position: absolute;
top: 30px;
left: -50px;
text-align: center;
}
article .post-info a.comments:hover{
background-color: #909090;
}
article .post-info a.comments:after{
content: "";
border-top: 10px solid #cdcdcd;
border-left: 10px solid transparent;
position: absolute;
bottom: -10px;
left: 0;
height: 0;
width: 0;
}
.static-left article .post-info a.comments{
left: -40px;
}
body.single-post article .post-info a.comments{
left: -10px;
top: 37px;
}
body.single-post .static-left article .post-info a.comments{
left: 0;
}

.post-info em{
font-style: normal;
}
.comment-info a.comment-reply-link,
.post-info .post-edit-link{
border-left: 1px solid #ebebeb;
margin: 0 0 0 8px;
padding: 0 0 0 8px;
}
.post-info .post-edit-link{
margin-left: 0;
}
.post-info .post-edit-link:first-child{
border: none;
margin: 0;
padding: 0;
}
.post-info .comments{
white-space: nowrap;
}
.post-media{
margin: 0 0 25px;
}
.post-media iframe,
.post-media img{
display: block;
height: auto;
max-width: 100%;
width: auto;
}
.real-content{
font-size: 14px;
line-height: 1.6;
padding: 0 0 10px;
}
.real-content p:first-child{
margin-top: 0;
}
.real-content img{
height: auto;
max-width: 100%;
}
.real-content a:hover img,
.wp-caption:hover{
border-radius: 10px;
}
.post-video{
padding: 10px 0;
}
.post-video iframe,
.post-media iframe{
display: block;
margin: 0 auto;
}


/* =============================================================================
PAGINATION
========================================================================== */
.navigation{
border-top: 1px solid #ececec;
min-height: 22px;
padding: 25px 140px 0;
position: relative;
text-align: center;
}
#comments .navigation{
border: none;
}
.navigation > a{
background-color: #e5e5e5;
display: inline-block;
height: 7px;
margin: 0 12px 0 0;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
width: 7px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.lt-ie8 .navigation > a{
background-color: transparent;
display: inline-block;
height: auto;
padding: 0 5px;
text-indent: 0;
width: auto;
}
.navigation > a.current,
.navigation > a:hover{
background-color: #707070;
color: #fff; /* IE 7 */
}
.nav-previous,
.nav-next{
background: transparent url(images/blog-nav.gif) 0 50% no-repeat;
font-size: 14px;
position: absolute;
top: 25px;
}
.nav-previous{
left: 0;
padding-left: 45px;
}
.nav-next{
background-position: 100% 50%;
padding-right: 45px;
right: 0;
}



/* =============================================================================
CONTACT PAGE
========================================================================== */
body.page-template-contact-php .page-title{
}
.contact-page .message-form{
border-top: 1px solid #ECECEC;
margin: 0;
padding: 25px 0 0;
}
.contact-page .message-form{
padding-top: 0;
}

If you take off the top padding off your #mid <div>, it moves your content up to where you want it. Trouble is it moves your footer 'on top' of your content on the fashion and people pages.

Really not sure what the fix could be but it's definitely something to do with your top padding on the #mid div.

Regards,

LC.

Ahhh that was it! Thank you so much for that! I have been sitting here for ages trying to figure it out but I guess when you know what you are doing it's a bit easier. The footer is suppose to be "on-top" on the other pages. Clicking the bulb on the left side makes the site go "full-screen".

Thanks again! :)

Hello ducmphung,
There's 40px to play with in #content if you want.

#content {
background-color: #FFFFFF;
border-radius: 3px 3px 3px 3px;
margin: 0 auto;
padding: 0 40px;
width: 820px;
}

Hello ducmphung,
There's 40px to play with in #content if you want.

#content {
background-color: #FFFFFF;
border-radius: 3px 3px 3px 3px;
margin: 0 auto;
padding: 0 40px;
width: 820px;
}
Cheers Excavator! The little nudge was what the contact and blog pages needed.

Now it's just my index site. :D

Now it's just my index site. :D

#content article has some top padding here - article {
background: url("images/line.gif") repeat-x scroll 0 0 transparent;
float: left;
padding-top: 30px;
width: 560px;
}
And quite a lot of junk in the markup that is not right. This bit of js should not be wrapped in paragraph tags - <div id="mid" class="clearfix glass static-left full-width">
<div id="content" class="clearfix">


<h1 class="page-title"></h1>
<article>

<div id="post-805" class="post-805 page type-page status-publish hentry real-content clearfix">
<p><html lang="en"><br />
<head><br />
<meta charset="utf-8" /><br />
<meta charset="utf-8"/><br />
<meta name="viewport" content="width=device-width"/><br />
<script src="js/modernizr-2.5.3.min.js"></script></p>

And this paragraph tag with the line break, it's just taking up space and the head and body stuff doesn't belong in it -
<div id="mid" class="clearfix glass static-left full-width">
<div id="content" class="clearfix">


<h1 class="page-title"></h1>
<article>

<div id="post-805" class="post-805 page type-page status-publish hentry real-content clearfix">
<p><html lang="en"><br />
<head><br />
<meta charset="utf-8" /><br />
<meta charset="utf-8"/><br />
<meta name="viewport" content="width=device-width"/><br />
<script src="js/modernizr-2.5.3.min.js"></script></p>
<p></head><br />
<body></p>
<div id="content" class="container clearfix">
<div class="item"><img class="lazy lazy-hidden"

You should really have a look at the links about validation in my signature line. The validators will find little mistakes like that.

Thanks for pointing out the mistakes - maybe that's why the main stylesheet is mixing with the custom stylesheet for the index site.

I am trying to implement a Masonry image grid on the index site in a already made wordpress template which meant I had to override the main stylesheet and make a stylesheet just for the index site. Very confusing for me but progressing slowly hehe.

Definitely will use the validator tools. Thank you!