I keep trying to change different fonts to helvetica on a site for a client. I have been through and through this, and it seems like the more I change the font, the more each part seems to turn into the wrong font. I accidentally changed the title bars to a different font and now I'm stumped.
Here is the first page I was trying to change. It all started when the only thing that was not helvetica was where it says "Blog Test" here: http://dolceaquaswim.com/blog/
Now nothing is displaying as helvetica it seems. I've uploaded the font in all it's versions to the server and put them in the css with #font. Here is my/the theme's css:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
/*HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
#font-face {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
src: url('fonts/helveticaneue-webfont.eot');
src: url('fonts/helveticaneue-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helveticaneue-webfont.woff') format('woff'),
url('fonts/helveticaneue-webfont.ttf') format('truetype'),
url('fonts/helveticaneue-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
src: url('fonts/helveticaneuebd-webfont.eot');
src: url('fonts/helveticaneuebd-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helveticaneuebd-webfont.woff') format('woff'),
url('fonts/helveticaneuebd-webfont.ttf') format('truetype'),
url('fonts/helveticaneuebd-webfont.svg') format('svg');
font-weight: bold;
font-style: bold;
}
#font-face {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
src: url('fonts/helveticaneueit-webfont.eot');
src: url('fonts/helveticaneueit-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/helveticaneueit-webfont.woff') format('woff'),
url('fonts/helveticaneueit-webfont.ttf') format('truetype'),
url('fonts/helveticaneueit-webfont.svg') format('svg');
font-weight: italic;
font-style: italic;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button, input, select, textarea {
font-size: 100%;
overflow: visible;
margin: 0;
vertical-align: baseline;
width: auto;
}
textarea {
overflow: auto;
vertical-align: text-top;
}
/* =Horizontal Rule
-------------------------------------------------------------- */
hr {
background: #dddddd;
border: none;
clear: both;
color: #dddddd;
float: none;
height: 1px;
width: 100%;
}
hr.space {
background: #ffffff;
color: #ffffff;
}
/* =Base
-------------------------------------------------------------- */
html {
height: 100%;
}
body {
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
background: #efefef;
color: #555555;
font-family: 'Helvetica Neue' !important;
font-size: 14px;
font-smoothing: antialiased;
line-height: 1.5em;
text-rendering: optimizeLegibility;
}
/* =Typography
-------------------------------------------------------------- */
p {
word-wrap: break-word;
}
i,
em,
dfn,
cite {
font-style: italic;
}
tt,
var,
pre,
kbd,
samp,
code {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
}
b,
strong {
font-weight: 700;
font-size: 27px;
font-weight: 700;
font-weight: normal;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
}
pre {
-moz-box-sizing: border-box;
-moz-border-radius: 2px;
-moz-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
background: #f4f4f4;
border: 1px solid #aaaaaa;
border-bottom-color: #cccccc;
border-radius: 2px;
height: auto;
margin: 0;
outline: none;
padding: 6px 10px;
vertical-align: middle;
width: 100%;
word-wrap: break-word;
white-space: pre-wrap;
}
del {
color: #555555;
text-decoration: line-through;
}
ins,
dfn {
border-bottom: 1px solid #cccccc;
}
sup,
sub,
small {
font-size: 85%;
}
abbr,
acronym {
font-size: 85%;
letter-spacing: .1em;
text-transform: uppercase;
}
a abbr,
a acronym {
border: none;
}
dfn[title],
abbr[title],
acronym[title] {
border-bottom: 1px solid #cccccc;
cursor: help;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
/* =Responsive 12 Column Grid
http://themeid.com/responsive-grid/
-------------------------------------------------------------- */
.grid {
float: left;
margin-bottom: 2.127659574468%;
padding-top: 0;
}
.grid-right {
float: right;
margin-bottom: 2.127659574468%;
padding-top: 0;
}
.col-60,
.col-140,
.col-220,
.col-300,
.col-380,
.col-460,
.col-540,
.col-620,
.col-700,
.col-780,
.col-860 {
display: inline;
margin-right: 2.127659574468%;
}
.col-60 {
width: 6.382978723404%;
}
.col-140 {
width: 14.893617021277%;
}
.col-220 {
width: 23.404255319149%;
}
.col-300 {
width: 31.914893617021%;
}
.col-380 {
width: 40.425531914894%;
}
.col-460 {
width: 48.936170212766%;
}
.col-540 {
width: 57.446808510638%;
}
.col-620 {
width: 65.957446808511%;
}
.col-700 {
width: 74.468085106383%;
}
.col-780 {
width: 82.978723404255%;
}
.col-860 {
width: 91.489361702128%;
}
.col-940 {
width: 100%;
}
.fit {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* =Visibility
-------------------------------------------------------------- */
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
.none {
display: none;
}
.hide-desktop {
display: none;
}
.show-desktop {
display: block;
}
/* =Responsive Images
-------------------------------------------------------------- */
img {
-ms-interpolation-mode: bicubic;
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.ie8 img {
height: auto;
width: auto\9;
}
.ie8 img.size-large {
max-width: 60%;
width: auto;
}
/* =Responsive Videos
-------------------------------------------------------------- */
video {
width: 100%;
max-width: 100%;
height: auto;
}
/* =Responsive Embeds/Objects
-------------------------------------------------------------- */
embed,
object {
max-width: 100%;
}
svg:not(:root) {
overflow: hidden;
}
/* =Links
-------------------------------------------------------------- */
a {
color: #00CCFF;
font-weight: 400;
text-decoration: none;
}
a:hover,
a:focus,
a:active {
color: #444444;
outline: 0;
text-decoration: none;
}
::selection {
background: #999999;
color: #ffffff;
text-shadow: none;
}
/* =Forms
-------------------------------------------------------------- */
label {
display: inline-block;
font-weight: 700;
padding: 2px 0;
}
legend {
padding: 2px 5px;
}
fieldset {
border: 1px solid #cccccc;
margin: 0 0 1.5em;
padding: 1em 2em;
}
select,
input[type="text"],
input[type="password"],
input[type="email"] {
-moz-box-sizing: border-box;
-moz-border-radius: 2px;
-webkit-box-sizing: border-box;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
box-sizing: border-box;
border: 1px solid #aaaaaa;
border-bottom-color: #cccccc;
border-radius: 2px;
cursor: text;
margin: 0;
outline: none;
padding: 6px 8px;
vertical-align: middle;
max-width: 100%;
}
select {
height: auto;
max-width: 100%;
}
area,
textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
box-shadow: 0 1px 0 #ffffff, inset 0 1px 1px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
border: 1px solid #aaaaaa;
border-bottom-color: #cccccc;
border-radius: 2px;
height: auto;
overflow: auto;
margin: 0;
outline: none;
padding: 8px 10px;
max-width: 100%;
}
map area {
padding: 0px;
border: 0px;
}
input,
select {
cursor: pointer;
}
area:focus,
input:focus,
textarea:focus {
border: 1px solid #66ccff;
}
input[type='text'],
input[type='password'] {
cursor: text;
}
/* =IE Forms
-------------------------------------------------------------- */
.ie7 area,
.ie7 select,
.ie7 textarea,
.ie7 input[type="text"],
.ie7 input[type="password"],
.ie7 input[type="email"] {
width: 96%;
}
/* =IE6 Notice
-------------------------------------------------------------- */
.msie-box {
background-color: #f9edbe;
border: 1px solid #f0c36d;
color: #212121;
display: block;
margin: 0 auto;
max-width: 960px;
padding: 10px;
position: absolute;
top: 60px;
text-align: center;
width: 100%;
}
.msie-box a {
color: #212121;
}
/* =Tables
-------------------------------------------------------------- */
th,
td,
table {
border: 1px solid #dddddd;
}
table {
border-collapse: collapse;
width: 100%;
}
/* =Lists
-------------------------------------------------------------- */
ul {
list-style-type: disc;
margin: 0;
padding: 0;
}
ol {
line-height: 22px;
list-style-position: outside;
list-style-type: decimal;
margin: 0;
padding: 0;
}
dt {
font-weight: 400;
}
/* =Blockquote
-------------------------------------------------------------- */
blockquote {
background: #f9f9f9;
border: none;
border-left: 4px solid #d6d6d6;
margin: 20px;
overflow: auto;
padding: 0 0 10px 12px;
}
blockquote p {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 18px;
line-height: 26px;
}
/* =Headings
-------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: 700;
line-height: 1.0em;
word-wrap: break-word;
font-family: "Open Sans";
}
h1 {
font-size: 2.625em; /* = 42px */
margin-bottom: .5em;
margin-top: .5em;
font-family: "Open Sans";
}
h2 {
font-size: 2.250em; /* = 36px */
margin-bottom: .75em;
margin-top: .75em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h3 {
font-size: 1.875em; /* = 30px */
margin-bottom: .857em;
margin-top: .857em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h4 {
font-size: 1.500em; /* = 24px */
margin-bottom: 1em;
margin-top: 1em;
font-family: "Open Sans";
}
h5 {
font-size: 1.125em; /* = 18px */
margin-bottom: 1.125em;
margin-top: 1.125em;
font-family: "Open Sans";
}
h6 {
font-size: 1.000em; /* = 16px */
margin-bottom: 1.285em;
margin-top: 1.285em;
font-family: "Open Sans";
}
/* =Margins & Paddings
-------------------------------------------------------------- */
p,
hr,
dl,
pre,
form,
table,
address,
blockquote {
margin: 1.6em 0;
}
th, td {
padding: .8em;
}
caption {
padding-bottom: .8em;
}
blockquote {
padding: 0 1em;
}
blockquote:first-child {
margin: .8em 0;
}
fieldset {
margin: 1.6em 0;
padding: 0 1em 1em;
}
legend {
padding-left: .8em;
padding-right: .8em;
}
legend+* {
margin-top: 1em;
}
input,
textarea {
padding: .3em .4em .15em;
}
select {
padding: .1em .2em 0;
}
option {
padding: 0 .4em;
}
dt {
margin-bottom: .4em;
margin-top: .8em;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
ul,
ol {
margin: 0 1.5em 1.5em 0;
padding-left: 2.0em;
}
li ul,
li ol {
margin: 0;
}
form div {
margin-bottom: .8em;
}
/* =Globals
-------------------------------------------------------------- */
#container {
margin: 0 auto;
max-width: 960px;
padding: 0px 0px;
background: #ffffff;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
-webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.49);
-moz-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.49);
box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.49);
}
#wrapper {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 4px;
clear: both;
margin: 20px auto 20px auto;
padding: 0 20px 20px 20px;
position: relative;
}
.front-page #wrapper {
background-color: #ffffff;
border: none;
margin: 20px auto 20px auto;
padding: 0;
}
#header {
margin: 0;
}
#footer {
clear: both;
margin: 0 auto;
max-width: 960px;
padding: 0 25px 0 25px;
}
#footer-wrapper {
margin: 0;
padding: 0;
}
/* =Header
-------------------------------------------------------------- */
#logo {
text-align: center;
margin: 0;
}
.site-name {
display: block;
font-size: 2.063em; /* = 33px */
line-height: 1.0em;
padding-top: 20px;
font-family: "Helvetica Neue";
}
.site-name a {
color: #333333;
font-weight: 700;
font-family: "Helvetica Neue";
}
.site-description {
color: #afafaf;
display: block;
font-size: 0.875em; /* = 14px */
font-family: "Helvetica Neue";
margin: 10px 0;
}
.latestTextstory {
font-family: "Helvetica Neue";
}
.part1 {
font-family: "Helvetica Neue";
}
.part2 {
font-family: "Helvetica Neue";
}
/* =Content
-------------------------------------------------------------- */
#content {
margin-top: 40px;
margin-bottom: 20px;
}
#content-full {
margin-top: 40px;
margin-bottom: 20px;
}
#content-blog {
margin-top: 40px;
margin-bottom: 20px;
}
#content-images {
margin-bottom: 20px;
}
#content-search {
margin-bottom: 20px;
margin-top: 20px;
}
#content-archive {
margin-top: 40px;
margin-bottom: 20px;
}
#content-sitemap {
margin-top: 40px;
margin-bottom: 20px;
}
#content-sitemap a {
font-size: 12px;
}
#content .sticky {
clear: both;
}
#content .sticky p {
}
/* =Templates (Landing Page)
-------------------------------------------------------------- */
/*
.page-template-landing-page-php .menu,
.page-template-landing-page-php .top-menu,
.page-template-landing-page-php .main-nav,
.page-template-landing-page-php .footer-menu,
.page-template-landing-page-php .sub-header-menu {
display: none;
}
*/
/* =Templates (Blog Page)
-------------------------------------------------------------- */
.page-template-blog-php .menu,
.page-template-blog-php .top-menu,
.page-template-blog-php .main-nav,
.page-template-blog-php .footer-menu,
.page-template-blog-php .sub-header-menu {
display: none;
}
/* =Author Meta (Author's Box)
-------------------------------------------------------------- */
#author-meta {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #f9f9f9;
border: 1px solid #d6d6d6;
border-radius: 4px;
clear: both;
display: block;
margin: 30px 0 40px 0;
padding: 10px;
overflow: hidden;
}
#author-meta img {
float: left;
padding: 10px 15px 0 5px;
}
#author-meta p {
margin: 0;
padding: 5px;
}
#author-meta .about-author {
font-weight: 700;
margin: 10px 0 0 0;
}
/* =Featured Content
-------------------------------------------------------------- */
#featured {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 4px;
padding-bottom: 40px;
width: 99.893617021277%;
}
#featured p {
font-size: 18px;
font-weight: 200;
line-height: 27px;
padding: 0 40px 0 40px;
text-align: center;
}
#featured-image {
margin: 40px 0 0 0;
}
#featured-image .fluid-width-video-wrapper {
margin-left: -20px;
}
.featured-image img {
margin-top: 44px;
}
/* =Post
-------------------------------------------------------------- */
.comments-link {
font-size: 12px;
}
#cancel-comment-reply-link {
color: #990000;
}
.post-data {
clear: both;
font-size: 12px;
font-weight: 700;
margin-top: 20px;
}
.post-data a {
color: #111111;
}
.post-entry {
clear: both;
font-family: "Helvetica Neue";
}
.entry-title {
font-family: "Helvetica Neue";
}
.post-title {
font-family: "Helvetica Neue";
}
.post-meta {
clear: both;
color: #9f9f9f;
font-size: 12px;
margin-bottom: 10px;
}
.post-edit {
clear: both;
display: block;
font-size: 12px;
margin: 1.5em 0;
}
.post-search-terms {
clear: both;
}
.read-more {
clear: both;
font-weight: 700;
}
.attachment-entry {
clear: both;
text-align: center;
}
/* =bbPress
bbPress has its own breadcrumb lists
-------------------------------------------------------------- */
.bbPress .breadcrumb-list {
display: none;
}
/* =Symbols
-------------------------------------------------------------- */
.ellipsis {
color: #aaaaaa;
font-size: 18px;
margin-left: 5px;
}
.form-allowed-tags {
display: none;
font-size: 10px;
}
/* =Widgets
-------------------------------------------------------------- */
.widget-wrapper {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 4px;
margin: 0 0 20px;
padding: 20px;
}
.widget-wrapper select,
.widget-wrapper input[type="text"],
.widget-wrapper input[type="password"],
.widget-wrapper input[type="email"] {
width: 75%;
}
#widgets {
margin-top: 40px;
}
#widgets a {
display: inline-block;
margin: 0;
padding: 0;
text-decoration: none;
}
#widgets form {
margin: 0;
}
#widgets ul,
#widgets ol {
padding: 0 0 0 20px;
}
#widgets ul li a {
display: inline;
text-decoration: none;
}
#widgets .widget-title img {
float: right;
height: 11px;
position: relative;
top: 4px;
width: 11px;
}
#widgets .rss-date {
line-height: 18px;
padding: 6px 12px;
}
#widgets .rssSummary {
padding: 10px;
}
#widgets cite {
font-style: normal;
line-height: 18px;
padding: 6px 12px;
}
#widgets .tagcloud,
#widgets .textwidget {
display: block;
line-height: 1.5em;
margin: 0;
word-wrap: break-word;
}
#widgets .textwidget a {
display: inline;
}
#widgets ul .children {
padding: 0 0 0 10px;
}
#widgets .author {
font-weight: 700;
padding-top: 4px;
}
.widget_archive select, #cat {
display: block;
margin: 0 15px 0 0;
}
#colophon-widget ul {
}
.colophon-widget {
background: none;
min-height: 0;
}
.colophon-widget select,
.colophon-widget input[type="text"],
.colophon-widget input[type="password"],
.colophon-widget input[type="email"] {
width: 100%;
}
#top-widget {
}
.top-widget {
background: none;
border: none;
clear: right;
float: right;
min-height: 0;
padding: 0 3px 0 0;
text-align: right;
width: 45%;
}
.top-widget ul {
padding: 0;
}
.top-widget select,
.top-widget input[type="text"],
.top-widget input[type="password"],
.top-widget input[type="email"] {
width: auto;
}
.top-widget #searchform {
margin: 0;
}
/* =Titles
-------------------------------------------------------------- */
.featured-title {
font-size: 60px;
letter-spacing: -1px;
margin: 0;
padding-top: 40px;
text-align: center;
font-family: "Helvetica Neue";
}
.featured-subtitle {
padding: 0 10px;
text-align: center;
font-family: "Helvetica Neue";
}
.widget-title h3,
.widget-title-home h3 {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 18px;
margin: 0;
padding: 0 0 20px 0;
text-align: left;
font-family: "Helvetica Neue";
}
.top-widget .widget-title h3 {
font-size: 14px;
padding: 0;
text-align: right;
font-family: "Helvetica Neue";
}
.widget-title a {
border-bottom: none;
padding: 0 !important;
font-family: "Helvetica Neue";
}
.title-404 {
color: #993333;
}
/* =404 Page
-------------------------------------------------------------- */
.error404 select,
.error404 input[type="text"],
.error404 input[type="password"],
.error404 input[type="email"] {
width: auto;
}
/* =Top Menu
-------------------------------------------------------------- */
.top-menu {
float: right;
margin: 10px 0;
padding: 0;
}
.top-menu li {
display: inline;
list-style-type: none;
}
.top-menu li a {
border-left: 1px solid #cccccc;
color: #333333;
font-size: 11px;
padding: 0 4px 0 8px;
}
.top-menu > li:first-child > a {
border-left: none;
}
.top-menu li a:hover {
color: #333333;
}
What both Jack and rgdesign are right on. You can see that the #font-face rule is used to name a font or give it an ID and define it's location. From the looks of it, it seems like your trying to edit something that was already made. The problem is I can't see where you are actually referencing the font for the locations you want to change. For CSS changes and to avoid bloating your css files I would recommend using a tool like firebug to look at the css on the site and make changes that you can verify work.
Checking your site, it looks like you are defining Open-Sans for your headings.
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: "Open-Sans";
font-weight: 700;
letter-spacing: 1px;
line-height: 1em;
word-wrap: break-word;
}
You need to change the font here by defining the font-family to Helvetica Neue and continue to do that for each section you want to change.
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
line-height: 1em;
word-wrap: break-word;
}
I have just validated, and these errors come up:
Sorry! We found the following errors (2) URI : simple.css 320 Parse
Error .tftable { font-size:100%;
color:#e0ece8; width:100%; border-width:.1em; border-color: #ffffff;
border-collapse: collapse; } 356 Parse Error #wrapper {
background: #fff; color: #b6c5be; }
I've tried simply removing the stuff in but that messes up all the colours on my page. Here is the code, line 320-356:
<style type="text/css">
.tftable {
font-size:100%;
color:#e0ece8;
width:100%;
border-width:.1em;
border-color: #ffffff;
border-collapse: collapse;
}
.tftable th {
font-size:105%;
background-color:#354640;
border-width: .1em;
padding: 1em;
border-style: solid;
border-color: #354640;
text-align:center;
border-bottom: solid .4em #6b806f;
}
.tftable tr {
background-color:#9db2a6;
}
.tftable td {
font-size:105%;
border-width: .1em;
padding: 0.8em;
border-style: solid;
border-color: #6b806f;
}
.tftable tr:hover {
background-color:#b6c5be;
}
</style>
And Here's the whole thing:
/*
|--------------------------------------------------------------------------
| General Text Formatting
|--------------------------------------------------------------------------
*/
html, body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
background: #b6c5be;
color: #151816;
}
h1 {
font-family: Georgia, palatino, serif;
font-size: 300%;
font-weight: normal;
color: #151816;
margin: 0 0 .5em 0;
text-align:center;
}
h2 {
font-size:120%;
font-weight: bold;
padding: 1em 0 0.7em 0;
}
h3 {
font-size:120%;
font-family: Georgia, palatino, serif;
text-align:center;
padding: 1em 0 0.8em 0;
font-weight: bold;
}
h4 {
font-size:110%;
color: #e3f2ed;
}
h5 {
font-size:140%;
color: #e3f2ed;
text-align:center;
font-weight: bold;
}
p {
line-height: 150%;
padding: 0 0 1em 0;
text-align:justify;
}
ul {
padding: 0 0 0 2em;
list-style: disc;
}
ol {
padding: 0 0 0 2em;
list-style: decimal;
}
li {
padding: 0 0 1em 0;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
blockquote {
color: #000000;
background: #9db2a6;
padding: 1em 1em 0 1em;
margin-bottom: 1em;
font-size: 130%;
border-bottom: solid .4em #6b806f;
border-top: solid .4em #6b806f;
}
#footer {
/*
colours for text within the
footer division, ie <p id="footer">
*/
padding: 1em 1em 1em 1em;
color: #e3f2ed;
background-color: #354640;
text-align:right;
}
.screen-reader-only {
/*
This is a special class used to prevent text from
being displayed on screen, while still making it visible to
screen readers. Use this class if you want to add extra
descritive text for visually impaired users, but don't want
that description to be visible for other users.
For example:
<p class="screen-reader-only">Special text for screen readers</p>
*/
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
/*
|--------------------------------------------------------------------------
| Page Links
|--------------------------------------------------------------------------
*/
a:link {
color: #000000;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #000000;
font-style:italic;
text-decoration: none;
}
a:hover {
font-style:italic;
}
a:active {
color: #000000;
}
/*
|--------------------------------------------------------------------------
| Top Navigatin Links
|--------------------------------------------------------------------------
TOP NAVIGATION LINKS
The following styles control the appearence
of the top navigation links, eg.
<a class="top-link" href="default.htm">Home</a>
*/
a.top-link {
/*
these styles will apply to ALL links (:link, :visited, :hover and :active) unless
*/
display: block;
padding: .7em 0 .7em 0;
margin: 0 1em 0 2em;
background: #9db2a6;
color: #000000;
padding: 0;
line-height: 2.5em;
}
.top-link:link {
/* styles for normal, unvisited links can be set here */
/* these styles will override the defaults set for .top-link above */
text-decoration: none;
border-bottom: solid .3em #9db2a6;
}
.top-link:visited {
/* styles for links once visited can be changed here */
/* these styles will override the defaults set for .top-link above */
text-decoration: none;
border-bottom: solid .3em #9db2a6;
}
.top-link:hover {
/* styles for top links when a user hovers over it can be changed here */
text-decoration: none;
border-bottom: solid .3em #6b806f;
}
.top-link:active {
/* Styles for when the link is being clicked can be changed here */
}
.top-link.selected:link, .top-link.selected:visited {
/* Sets the style of a link that has been selected (ie. has a class of selected)
for example (note the additional class "selected"):
<a class="top-link selected" href="content.htm">Content Page</a>
*/
border-bottom: solid .3em #354640;
cursor: default;
}
/*
|--------------------------------------------------------------------------
| Footer Links
|--------------------------------------------------------------------------
Change these if you want your footer links to have a
different style to other links
*/
#footer a:link {
color: #e3f2ed;
font-weight: bold;
}
#footer a:visited {
color: #e3f2ed;
font-weight: bold;
}
#footer a:hover {
font-style:italic;
}
#footer a:active {
color: #e3f2ed;
}
/*
|--------------------------------------------------------------------------
| Header Colours
|--------------------------------------------------------------------------
*/
#header {
/*
Colours for <div id="header">
See layout.css for layout and size properties
*/
background: #00016c url(../images/headbit.gif) repeat-x top left;
color: #354640;
}
#nav {
/*
Colours for <ul id="nav">
See layout.css for layout and size properties
*/
background: #9db2a6;
color: #000000;
}
<style type="text/css">
.tftable {
font-size:100%;
color:#e0ece8;
width:100%;
border-width:.1em;
border-color: #ffffff;
border-collapse: collapse;
}
.tftable th {
font-size:105%;
background-color:#354640;
border-width: .1em;
padding: 1em;
border-style: solid;
border-color: #354640;
text-align:center;
border-bottom: solid .4em #6b806f;
}
.tftable tr {
background-color:#9db2a6;
}
.tftable td {
font-size:105%;
border-width: .1em;
padding: 0.8em;
border-style: solid;
border-color: #6b806f;
}
.tftable tr:hover {
background-color:#b6c5be;
}
</style>
#wrapper {
background: #fff;
color: #b6c5be;
}
/*
|--------------------------------------------------------------------------
| Widget Box Colours
|--------------------------------------------------------------------------
Colour styles for widget boxes, ie <li class="widget">
See layout.css for layout and size properties
*/
.widget {
background: #9DB2A6;
color: #000000;
border-bottom: solid .4em #6b806f;
}
.widget-heading {
color: #E3F2ED;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #354640;
border-bottom: solid .4em #6b806f;
}
Any help would be greatly appreciated!
I see a style tag in there: Get rid of it.
.tftable tr:hover {
background-color:#b6c5be;
}
</style>
#wrapper {
background: #fff;
color: #b6c5be;
}
Other than that, your CSS seems fine.
I don't what CSS parser, you are using. It seems to valid, which I have tested using W3C CSS validator.
No error but with one warning says,
.tftable th Same color for background-color and border-color
I set up a sticky footer at my site using this method, and for some reason there's a large amount of extra space between the bottom of the content and the top of the footer. I can't figure out why. Since there's not much content on the first page, the page shouldn't even extend beyond the viewport and there shouldn't be scrollbars. What's going on?
Here's the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" type="text/css" href="/css/styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/pygment_trac.css" media="screen" />
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
<title>gulshansingh.com</title>
</head>
<body>
<header>
<img src="/images/banner.jpg">
</header>
<div id='cssmenu'>
<ul>
<li><a href='/'><span>Home</span></a></li>
<li><a href='/about/'><span>About</span></a></li>
<li><a href='/projects/'><span>Projects</span></a></li>
<li><a href='/articles/'><span>Articles</span></a></li>
</ul>
</div>
<div class="container">
<section id="main_content">
<h3>Welcome to GitHub Pages.</h3>
<p>This is a test home page for my site</p>
<pre><code>$ cd your_repo_root/repo_name
$ git fetch origin
$ git checkout gh-pages
</code></pre>
<h3>Section 2</h3>
<p>Lorem ipsum</p>
</section>
<div class="push">
</div>
</div>
<div id="footer">
Footer content goes here
</div>
</body>
</html>
Here is the CSS (Although looking at Firebug/CDT might be more helpful):
* {
margin: 0;
}
html, body {
height: 100%;
min-height: 100%;
}
.container {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px; /* the bottom margin is the negative value of the footer's height */
}
#footer, .push {
height: 80px; /* .push must be the same height as .footer */
}
body {
margin: 0;
padding: 0;
background: #161616;
color: #eaeaea;
font: 16px;
line-height: 1.5;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
}
/* General & 'Reset' Stuff */
.container {
width: 100%;
}
section {
display: block;
margin: 0 0 20px 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 15px 0 5px;
}
p {
margin: 0 0 5px;
}
li {
line-height: 1.4 ;
}
header, header img {
position: relative;
z-index: 10;
width: 100%;
height: 150px;
box-shadow: 0 0 5px #469B46;
-webkit-box-shadow: 0 0 5px #469B46;
-moz-box-shadow: 0 0 5px #469B46;
-o-box-shadow: 0 0 5px #469B46;
-ms-box-shadow: 0 0 5px #469B46;
}
#downloads .btn {
display: inline-block;
text-align: center;
margin: 0;
}
/* Main Content
*/
#main_content {
padding: 20px;
background: #474747;
width: 80%;
margin: 50px auto;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-webkit-font-smoothing: antialiased;
}
section img {
max-width: 100%
}
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {
font-weight: normal;
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
color: #b5e853;
letter-spacing: -0.03em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
0 0 5px rgba(181, 232, 83, 0.1),
0 0 10px rgba(181, 232, 83, 0.1);
-moz-transition: all 0.3s ease-out; /* FF3.7+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5 */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
transition: all 0.3s ease-out;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
color: #ccc;
}
#main_content h1 {
font-size: 30px;
}
#main_content h2 {
font-size: 24px;
}
#main_content h3 {
font-size: 18px;
}
#main_content h4 {
font-size: 14px;
}
#main_content h5 {
font-size: 12px;
text-transform: uppercase;
margin: 0 0 5px 0;
}
#main_content h6 {
font-size: 12px;
text-transform: uppercase;
color: #999;
margin: 0 0 5px 0;
}
dt {
font-style: italic;
font-weight: bold;
}
/*
ul li {
list-style: none;
}
ul li:before {
content: ">>";
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
font-size: 13px;
color: #b5e853;
margin-left: -37px;
margin-right: 21px;
line-height: 16px;
}*/
blockquote {
color: #aaa;
padding-left: 10px;
border-left: 1px dotted #666;
}
pre {
background: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 10px;
font-size: 14px;
color: #b5e853;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
text-wrap: normal;
overflow: auto;
overflow-y: hidden;
}
table {
width: 100%;
margin: 0 0 20px 0;
}
th {
text-align: left;
border-bottom: 1px dashed #b5e853;
padding: 5px 10px;
}
td {
padding: 5px 10px;
}
hr {
height: 0;
border: 0;
border-bottom: 1px dashed #b5e853;
color: #b5e853;
}
/* Buttons
*/
.btn {
display: inline-block;
background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.3), rgba(35, 35, 35, 0.3) 50%, rgba(10, 10, 10, 0.3) 50%, rgba(0, 0, 0, 0.3));
padding: 8px 18px;
border-radius: 50px;
border: 2px solid rgba(0, 0, 0, 0.7);
border-bottom: 2px solid rgba(0, 0, 0, 0.7);
border-top: 2px solid rgba(0, 0, 0, 1);
color: rgba(255, 255, 255, 0.8);
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.btn:hover {
background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.6), rgba(35, 35, 35, 0.6) 50%, rgba(10, 10, 10, 0.8) 50%, rgba(0, 0, 0, 0.8));
}
.btn .icon {
display: inline-block;
width: 16px;
height: 16px;
margin: 1px 8px 0 0;
float: left;
}
.btn-github .icon {
opacity: 0.6;
background: url("../images/blacktocat.png") 0 0 no-repeat;
}
/* Links
a, a:hover, a:visited
*/
a {
color: #63c0f5;
text-shadow: 0 0 5px rgba(104, 182, 255, 0.5);
}
/* Clearfix */
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
#footer {
border-top: 2px solid #15893d;
text-align: center;
width: 100%;
height: 80px;
background: #0c0c0c;
line-height: 80px;
}
#footer_inner {
display: table-cell;
}
#footer a {
text-decoration: none;
color: #eaeaea;
}
#footer a:hover {
text-decoration: underline;
color: #eaeaea;
}
The .container element should wrap around all the other elements in the body except for the footer. This means you have to place the header in the .container element as well, because it's height of 100% means it will take up the height of the viewport. Since your header/navigation has been excluded from the .container element, the viewport height will be extended down further by the height of the header.
And please consider posting your example in a fiddle instead of your site, or any other external site that makes it too localized and less relevant to the rest of the SO community.