CSS overriding styles not allowing display of subsequent div?

CSS overriding styles not allowing display of subsequent div? - html

Issue- properly coded div executes fine in DW, not executing in browser.
Need- to change the bg color on one page only, not globally.
Page in question- www.pointbank.com/testerfile/
I think we have narrowed it down to another CSS file disallowing, preventing, or overriding the execution of the div id=PBredbackground600 - a simple background color command. When isolated in JSFIddle, the PBredbackground600 code works as it should, and in DW it works, but not in browser. There is no background or font change. I have gone thru the default, style, and reset .CSS files, but do not know code well enough to identify the superior code. Page html followed by style.css followed by reset.css followed by defalut.css
Correction- reset.css is not in browser code, leftover from other project, and no call is made for it from this page.
page html
<!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"><!-- InstanceBegin template="/Templates/default.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>PointBank Loans | Denton County Community Bank, Texas</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<meta name="description" content="PointBank has the right financing for personal or business loans at competitive terms." />
<meta name="keywords" content="pointbank loans, pointbank personal loan, pointbank business loan, denton county loan, personal loans denton tx., business loan texas" />
<!-- InstanceEndEditable -->
<link href="/includes/css/default.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link href="/includes/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link href="/includes/css/ie6.css" rel="stylesheet" type="text/css" />
<script src="/includes/js/ddbelatedpng.js"></script>
<script>DD_belatedPNG.fix('img, div, p, a, input');</script>
<![endif]-->
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<script src="/includes/js/default.js"></script>
<!-- InstanceParam name="showBreadcrumb" type="boolean" value="true" -->
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/analytics.php'); ?>
</head>
<body <?php if( $is_homepage ) { echo 'class="homepage"'; } ?>>
<div id="header">
<img src="/images/pointbank.png" width="220" height="92" alt="PointBank - Proudly Serving Denton County, Texas" />
<p id="top">Home | Contact Us | Locations | Online Banking</p>
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/menu.php'); ?>
</div>
<div id="online-banking">
<!-- InstanceBeginEditable name="editHeader" --><img src="/images/headers/loans.png" width="704" height="168" alt="Loans at PointBank" /><!-- InstanceEndEditable -->
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/online-banking.php'); ?>
</div>
<div id="content">
<?php if( $is_homepage ) { ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/homepage.php'); ?>
<?php } else { ?>
<div id="page">
<p id="breadcrumb">Home › <!-- InstanceBeginEditable name="editBreadcrumb" --><span>Loans</span><!-- InstanceEndEditable --></p>
<!-- InstanceBeginEditable name="editContent" -->
<div id="PBredbackground600">
<h2>PointBank Loan Opportunities2</h2>
<p> As the leading Denton County community bank, PointBank has a strong financial foundation that provides us with the lending power we need to work with you on any size loan. With our local decision-making, you will find us <strong>flexible and responsive to your personal or business needs</strong>.</p>
<ul class="icons">
<li><strong><img src="/images/icons/checking-and-savings.png" alt="Personal Loans" width="48" height="48" />Personal Loans</strong><br />
Whatever your unique needs, we have the right financing for personal loans at competitive terms.</li>
<li><strong><img src="/images/icons/mortgage.png" alt="Mortgage Lending" width="48" height="48" />Mortgage Lending</strong><br />
PointBank Mortgage is a full service lender based in Denton County that specializes in Conventional, USDA-Rural Development, FHA and VA loans.</li>
</ul>
<h6>For immediate loan pre-qualification or if you have any preliminary questions before you apply for a loan, call (940) 686-7000.</h6>
</div>
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/usa-patriot-act.php'); ?>
<!-- InstanceEndEditable -->
</div>
<div class="sidebar">
<!-- InstanceBeginEditable name="editSidebar" -->
style.css
a:hover {
text-decoration:none;
}
a {
text-decoration:none;
}
#interface1 {
z-index:1;
}
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:10px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:135px;
border:1px solid #6A6A6A;
text-align:left;
z-index:255;
}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:10px;
background-color:#9D9D94
}
#loader_bg {
background-color:#EBEBE4;
position:relative;
top:8px;left:8px;height:7px;
width:113px;font-size:1px
}
.border_preview{
z-index:100;
position:absolute;
background: #fff;
border: 1px solid #444;
}
.preview_temp_load {
vertical-align:middle;
text-align:center;
padding: 10px;
}
.preview_temp_load img{
vertical-align:middle;
text-align:center;
}
/*Image Title Styling*/
.title_h2 {
padding:12px 0 0 18px;
}
h2 {
font-size:14px;
padding:0;
margin:0;
font-family: "century gothic";
}
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
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;
}
default.css
#charset "utf-8";
/* Copyright MMXI PointBank. All rights reserved. */
/* RESET */
*, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, ul li, ol li, blockquote, form, fieldset, legend, object, param, hr {
margin: 0;
padding: 0;
}
ul, ol {
list-style-type: none;
}
img {
border-style: none;
border-width: 0;
}
span.skype_pnh_container {
display: none !important;
}
span.skype_pnh_print_container {
display: inline !important;
}
/* BODY */
body {
font: normal 14px/22px Arial, Helvetica, sans-serif;
background: #b9cbcd url(/images/overall-background.jpg) no-repeat center top;
}
/* HEADER */
#header {
width: 960px;
height: 92px;
margin: 0 auto;
background: url(/images/header-background.png) repeat-y center top;
overflow: hidden;
}
#header img {
float: left;
}
#header p {
text-align: right;
margin-right: 30px;
}
#header p#top a {
font: normal 12px/42px Arial, Helvetica, sans-serif;
color: #333;
text-decoration: none;
}
#header p#top a:hover {
color: #a80532;
}
#header p#top span.font-chooser {
font: normal 12px/42px Arial, Helvetica, sans-serif;
color: #333;
padding-left: 8px;
}
#header p#top span.font-chooser img {
float: none;
display: inline;
vertical-align: -3px;
margin-left: 2px;
}
#header p#menu a {
font: bold 12px/50px Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
margin: 0 8px;
}
#header p#menu a:hover {
color: #222;
}
/* ONLINE BANKING */
#online-banking {
width: 960px;
margin: 0 auto;
background: url(/images/content-background.png) repeat-y center top;
overflow: hidden;
}
.homepage #online-banking {
background: url(/images/content-background-homepage.png) repeat-y center top;
}
#online-banking img {
float: left;
}
#online-banking div {
float: left;
overflow: hidden;
width: 256px;
height: 100px;
padding-top: 68px;
background: url(/images/a-better-way-to-bank.png) no-repeat center top;
}
.homepage #online-banking div {
width: 242px;
height: 152px;
padding-top: 100px;
background: url(/images/a-better-way-to-bank-homepage.png) no-repeat center top;
}
#online-banking div input.user-id {
font: normal 14px/22px Arial, Helvetica, sans-serif;
width: 190px;
padding: 2px 4px;
margin-bottom: 2px;
color: #555;
}
#online-banking div input.sign-in {
margin: 0 auto;
text-align: center;
text-indent: -9999px;
float: none;
width: 98px;
height: 24px;
padding: 0;
background: url(/images/button-sign-in.jpg) no-repeat 0 0;
font-size: 0;
line-height: 0;
border: none 0;
background-color: transparent;
}
#online-banking div input.sign-in:hover {
background-position: 0 -24px;
cursor: pointer;
}
#online-banking div p {
font-size: 12px;
margin-left: 22px;
}
.homepage #online-banking div p {
margin-left: 10px;
}
#online-banking div p a {
color: #fff;
}
#online-banking div p.submit {
line-height: 24px;
margin-bottom: 6px;
}
.homepage #online-banking div p.submit {
margin-bottom: 18px;
}
#online-banking div p.submit a {
margin-right: 6px;
vertical-align: -4px;
color: #eee;
}
#online-banking div p.sign-up {
overflow: hidden;
line-height: 18px;
color: #eee;
margin-left: 18px;
}
.homepage #online-banking div p.sign-up {
margin-left: 6px;
margin-bottom: 8px;
}
#online-banking div p.sign-up a {
background: url(/images/icons/sign-up.jpg) no-repeat 0 1px;
float: left;
padding-left: 20px;
margin-right: 5px;
}
.homepage #online-banking div p.information {
margin-left: 56px;
font-size: 13px;
}
.homepage #online-banking div#flash {
overflow: hidden;
display: block;
float: left;
width: 718px;
height: 252px;
padding: 0;
background: url(/images/blank.gif) no-repeat 0 0;
}
/* CONTENT */
#content {
width: 900px;
margin: 0 auto;
padding: 0 0 0 60px;
background: url(/images/content-background.png) repeat-y center top;
overflow: hidden;
}
.homepage #content {
background: url(/images/content-background-homepage.png) repeat-y center top;
}
#content #page {
float: left;
width: 600px;
overflow: hidden;
}
#content a {
color: #222;
}
#content a:hover {
color: #a80532;
}
#content h1 {
font: bold 26px/36px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #a80532;
}
#content h2 {
font: bold 18px/32px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #a80532;
}
#content h3 {
font: bold 18px/32px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #a80532;
}
#content h3 a {
color: #a80532;
text-decoration: none;
}
#content h4 {
font: bold 16px/32px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #222;
}
#content h5 {
font: bold 14px/32px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #222;
}
#content h5.border {
border-bottom: solid 1px #bbb;
margin-bottom: 20px;
}
#content h6 {
font: bold 18px/26px Arial, Helvetica, sans-serif;
color: #a80532;
}
#content h6 a {
color: #a80532;
}
#content h6 a:hover {
color: #222;
}
.homepage #content h6 {
color: #222;
}
.homepage #content h6 a {
color: #222;
}
.homepage #content h6 a:hover {
color: #a80532;
}
#content p {
margin: 0 0 20px 0;
}
#content p#breadcrumb {
font: normal 12px/20px Verdana, Arial, Helvetica, sans-serif;
color: #666;
margin: 0 0 10px 0;
}
#content p#breadcrumb a {
color: #666;
}
#content p#breadcrumb a:hover {
color: #333;
}
#content p#breadcrumb span {
font-weight: bold;
}
#content p#branches {
overflow: hidden;
padding-top: 10px;
margin-bottom: 0;
}
#content p#branches.about-us {
width: 600px;
text-align: center;
}
#content p#branches.about-us img {
width: 62px;
height: 76px;
}
#content p#branches.about-us a {
width: 62px;
margin-right: 4px;
}
#content p#branches img {
margin-bottom: 4px;
}
#content p#branches a {
display: block;
float: left;
overflow: hidden;
width: 85px;
color: #a80532;
font-size: 12px;
margin-right: 9px;
text-decoration: none;
line-height: 18px;
text-align: center;
}
#content p#branches a.end {
margin-right: 0;
}
#content p#branches a:hover {
color: #222;
}
#content p#branches strong {
display: block;
clear: both;
overflow: hidden;
font-weight: normal;
}
#content p#branches-text {
margin: 0 350px 0 0;
padding-top: 20px;
font-size: 10px;
color: #999;
}
#content p#branches-text a {
color: #999;
}
#content p.buttons {
overflow: hidden;
text-align: center;
}
#content p.buttons img {
float: left;
}
#content p.buttons img.left {
margin-left: 12px;
}
#content p.form-security {
padding: 6px;
overflow: hidden;
border: solid 1px #ffcece;
background: #ffe6e6 url(/images/icons/alert.png) no-repeat 12px 16px;
padding-left: 54px;
margin-left: 180px;
}
#content p.form-alert {
padding: 6px;
overflow: hidden;
border: 1px solid #fc6;
background: #ffc url(/images/icons/alert.png) no-repeat 12px 16px;
padding-left: 54px;
margin-bottom: 30px;
}
#content p.postmetadata {
font-size: 13px;
color: #999;
margin-bottom: 10px;
}
#content p.postmetadata a {
color: #666;
}
#content p.postmetadata a:hover {
color: #222;
}
#content blockquote, #content ul, #content ol {
margin: 0 40px 20px 40px;
}
#content li {
margin-bottom: 10px;
}
#content ul {
list-style-type: disc;
}
#content ul li ul {
padding-top: 10px;
margin-bottom: 0;
}
#content ul.icons, #content ol.icons {
list-style-type: none;
margin-left: 20px;
}
#content ul.icons li, #content ol.icons li {
overflow: hidden;
margin-bottom: 30px;
}
#content ul.icons.small li {
overflow: hidden;
margin-bottom: 10px;
}
#content ul.icons li ul {
margin-left: 100px;
}
#content ul.icons li img, #content ol.icons li img {
float: left;
margin: 0 20px 0 0;
vertical-align: 20px;
}
#content ul.icons.small li img {
margin: 0 10px 0 0;
}
#content ol {
list-style-type: decimal;
}
#content blockquote.quote {
background: url(/images/quote-left.jpg) no-repeat 0 0;
padding: 8px 0px 0 30px;
}
#content blockquote.quote p.end {
background: url(/images/quote-right.jpg) no-repeat right bottom;
padding: 8px 15px 0 15px;
margin-bottom: 10px;
}
#content blockquote.quote p.by {
text-align: right;
margin-bottom: 0;
font-size: 13px;
color: #666;
}
#content hr {
height: 1px;
background-color: #A80532;
margin-bottom: 20px;
border: none 0;
}
#content .post {
border-bottom: solid 1px #bbb;
margin-bottom: 30px;
padding-bottom: 10px;
overflow: hidden;
}
#content .read-more {
overflow: hidden;
}
#content .read-more a {
display: block;
float: right;
font-size: 13px;
font-weight: bold;
color: #a80532;
margin-right: 20px;
padding-right: 16px;
background: url(/images/arrow.jpg) no-repeat right 4px;
}
#content .read-more a:hover {
color: #222;
background-position: right -40px;
}
#content .navigation {
overflow: hidden;
}
#content .alignright a {
display: block;
float: right;
font-size: 13px;
font-weight: bold;
color: #a80532;
padding-right: 16px;
background: url(/images/arrow.png) no-repeat right 4px;
}
#content .alignright a:hover {
color: #222;
background-position: right -40px;
}
#content .alignleft a, #content .sidebar p.return a {
display: block;
float: left;
font-size: 13px;
font-weight: bold;
color: #a80532;
padding-left: 16px;
background: url(/images/arrow-left.png) no-repeat left 4px;
}
#content .alignleft a:hover, #content .sidebar p.return a:hover {
color: #222;
background-position: left -40px;
}
#content #page ol.commentlist { list-style-type:none; margin:0; padding:0; }
#content #page ol.commentlist li { border-bottom:1px solid #ccc; margin:0 0 10px; padding:5px 7px 5px 64px; position:relative; list-style-type:none; }
#content #page ol.commentlist li.pingback comment-author { padding:0 170px 0 0; }
#content #page ol.commentlist li div.vcard { font-weight:bold; font-size: 14px; line-height: 16px; }
#content #page ol.commentlist li div.vcard cite.fn { font-style:normal; font-size: 11px; }
#content #page ol.commentlist li div.vcard cite.fn a.url { color:#333; text-decoration:none; }
#content #page ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; }
#content #page ol.commentlist li div.vcard img.avatar { background: #fff; border:1px solid #aaa; padding: 5px; left:7px; position:absolute; top:7px; }
#content #page ol.commentlist li div.comment-meta { font-weight:normal; font-size: 10px; line-height: 16px; position:absolute; right:10px; text-align:right; top:5px; }
#content #page ol.commentlist li div.comment-meta a { color:#999; text-decoration:none; }
#content #page ol.commentlist li p { font-weight:normal; font-size: 14px; margin:5px 0 12px; }
#content #page ol.commentlist li ul { font-weight:normal; font-size: 14px; margin:0 0 12px; padding:0; list-style-type:none; }
#content #page ol.commentlist li div.reply a { color:#333; text-decoration:none; font-size: 11px; font-weight: bold; }
#content #page ol.commentlist li ul.children { list-style:none; margin:12px 0 0; text-indent:0; border-top:1px solid #ccc; border-bottom:0 none; }
#content #page ol.commentlist li ul.children li { border-bottom:0 none; }
#content #page ol.commentlist li ul.children li.depth-2 { margin:0 0 3px; }
#content #page ol.commentlist li ul.children li.depth-3 { margin:0 0 3px; }
#content #page ol.commentlist li ul.children li.depth-4 { margin:0 0 3px; }
#content #page ol.commentlist li ul.children li.depth-5 { margin:0 0 3px; }
#content #page ol.commentlist ul.children li.odd { background:#efefef; }
#content #page ol.commentlist ul.children li.even { background:#f8f8f8; }
#content #page ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }
#content #page ol.commentlist .says { display: none; }
#content #page #respond { margin:0 0 10px; padding:0; position:relative; list-style-type:none; }
/* SIDEBAR */
#content .sidebar {
float: left;
width: 270px;
margin: 0 0 0 30px;
padding-top: 34px;
overflow: hidden;
}
#content .sidebar h3, #content .sidebar ul {
margin: 0 15px;
}
#content .sidebar p.center {
margin-right: 30px;
}
#content .sidebar p.return, #content .sidebar p.feed {
margin-left: 15px;
overflow: hidden;
}
#content .sidebar p.feed a {
background: url(/images/icons/feed.gif) no-repeat 0 0;
padding-left: 22px;
line-height: 18px;
font-weight: bold;
font-size: 13px;
}
#content .sidebar h3 {
color: #222;
margin-bottom: 10px;
}
#content .sidebar h3 a {
color: #222;
text-decoration: none;
}
#content .sidebar h3 a:hover {
color: #a80532;
}
#content .sidebar ul {
margin-right: 50px;
margin-bottom: 40px;
list-style-type: none;
border-bottom: solid 1px #ccc;
}
#content .sidebar ul li {
border-top: solid 1px #ccc;
padding-top: 8px;
}
#content .sidebar ul li a {
color: #222;
text-decoration: none;
margin-left: 8px;
overflow: hidden;
display: block;
}
#content .sidebar ul li a:hover {
color: #a80532;
}
#content .sidebar ul.blog_bookmark {
width: 100px;
float: left;
margin: 0 0 30px 15px;
padding: 0;
border: none 0;
}
#content .sidebar ul.blog_bookmark li {
padding: 0;
margin: 0;
border: none 0;
}
#content .sidebar ul.blog_bookmark li a {
margin: 0;
padding-left: 28px;
padding-top: 7px;
padding-bottom: 6px;
background-repeat: no-repeat;
background-position: 0px 3px;
font-size: 12px;
}
#content .sidebar ul.blog_bookmark li.feed a {
background-image: url(/images/icons/bookmarks/feed.png);
}
#content .sidebar ul.blog_bookmark li.delicious a {
background-image: url(/images/icons/bookmarks/delicious.png);
}
#content .sidebar ul.blog_bookmark li.google a {
background-image: url(/images/icons/bookmarks/google.png);
}
#content .sidebar ul.blog_bookmark li.technorati a {
background-image: url(/images/icons/bookmarks/technorati.png);
}
#content .sidebar ul.blog_bookmark li.yahoo a {
background-image: url(/images/icons/bookmarks/yahoo.png);
}
#content .sidebar ul.blog_bookmark li.live a {
background-image: url(/images/icons/bookmarks/live.png);
}
/* FOOTER */
#footer {
width: 880px;
margin: 0 auto;
padding: 60px 40px 20px 40px;
background: url(/images/footer-background.png) no-repeat center top;
}
.homepage #footer {
background: url(/images/footer-background-homepage.png) no-repeat center top;
}
/* MISC. CLASSES */
img.right {
margin: 0 0 20px 20px;
padding: 1px;
border: solid 1px #ddd;
float: right;
}
img.right.noborder {
border: none 0;
}
img.alignright {
float: right;
margin: 0 0 20px 20px;
}
img.alignleft {
float: left;
margin: 0 20px 20px 0;
}
p.center {
text-align: center;
}
p.right {
text-align: right;
}
div.link {
height: 200px;
text-align: center;
}
.underline {
text-decoration: underline;
}
.redbackground {
background: url(/images/backgournd3.jpg) no-repeat center top;
color: #0F0;
}
.redbackground280x280 {
background: url(/images/OFFICIAL_Red_Background_280x280.jpg) no-repeat center top;
color: #0F0;
}
.red {
color: #0F0;
}
.gray {
background-color: #999;
color: #fff;
}
.half {
float: left;
width: 300px;
}
.half.left {
width: 290px;
margin-right: 20px;
}
.half.right {
width: 290px;
}
.half.gray {
width: 278px;
padding: 10px 0 0 10px;
margin-right: 10px;
background-color: #efefef;
border: solid 1px #eee;
-moz-border-radius: 6px;
border-radius: 6px;
}
.half.triplegray {
width: 170px;
padding: 10px 0 0 10px;
margin-right: 10px;
background-color: #efefef;
border: solid 1px #eee;
-moz-border-radius: 6px;
border-radius: 6px;
}
.table td {
padding: 8px;
border-bottom: solid 1px #888;
}
.privacy td {
border-bottom: solid 1px #999;
}
#content .privacy h2, #content .privacy h3 {
color: #000;
}
.table .total td {
border-bottom: none 0;
}
#content .sidebar form#searchform {
margin-bottom: 20px;
overflow: hidden;
}
form.form p {
overflow: hidden;
}
form.form .submit input.print {
background: url(/images/button-print.jpg) no-repeat 0 0;
}
#content #page form#commentform input#submit {
margin-left: 0;
}
#content .sidebar input#searchsubmit {
margin-left: 122px;
background-image: url(/images/button-search.png);
}
form.form .submit input:hover, #content #page form#commentform input#submit:hover, #content .sidebar input#searchsubmit:hover {
background-position: 0 -24px;
cursor: pointer;
}
#BuzzYellow {
color: #F90;
<!-- added these classes for thumbnail mouseover expanison/popup on 6-1-2013 see http: //jsfiddle.net/pJJHe/1/ for further explanation-->
.thumbnails {
padding: 35px;
}
.thumbnail {
float:left;
position:relative;
width: 70px;
margin-right: 10px;
}
.thumbnail img {
/* ... */
width:70px;
height:50px;
}
div>div {
width:20%;
float:left; /* display: inline-block; */
min-width:100px;
}
#PBredbackground900 {
background-image:url(/images/PB_Red_Background_900wide.png) ;
}
#PBredbackground600 {
background-color:#80FF00
font-family: "Comic Sans MS", cursive
}

It appears your css declarations are not being separated by a ; which would cause them to be ignored:
#PBredbackground600 {
background-color:#80FF00 <----------- missing ';'
font-family: "Comic Sans MS", cursive <----------- missing ';'
}
change to:
#PBredbackground600 {
background-color:#80FF00;
font-family: "Comic Sans MS", cursive;
}
UPDATE
It might be this area in default.css:
#BuzzYellow {
color: #F90;
<!-- added these classes for thumbnail mouseover expanison/popup on 6-1-2013 see http:
For one #BuzzYellow is not closed (missing }) and secondly <!-- is a comment in HTML not CSS. For CSS you need to use:
.class{
/*this is a comment*/
}
Try fixing that. #PBredbackground600 has no recognition in the DOM which usually means there is an error above it in the stylesheet with unclosed rules or incorrect syntax

Related

Style issues with web page, works in firefox, not in ie or chrome

I am very inexperienced when it comes to recent html and other languages, I had a little schooling years ago, but that's about it. I had a friend ask for hep designing a simple web page for him. I have all the kinks worked out except for on a gallery page I created in the website. This page seems to work well in firefox, but not on chrome or is. In ie, it seems to ignore the css sheet altogether. In chrome, I cannot get the "Preview" image to load.
HTML of Gallery page:
<!DOCTYPE html>
<html>
<style type="text/css">
body {
background: #222;
margin-top: 20px;
}
h3 {
color: #eee;
font-family: Verdana;
}
.thumbnails img {
height: 80px;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
cursor:pointer;
}
.preview {
padding: 1px;
display: block;
max-width:500px;
max-height:399px;
width: auto;
height: auto;
}
#content, html, body {
height: 98%;
}
#left {
max-height:400px;
float: left;
width: 75%;
background: white;
height: 100%;
overflow: auto;
}
#right {
max-height:400px;
float: left;
width: 25%;
background: white;
height: 100%;
overflow: auto;
}
</style>
<head>
<meta charset="UTF-8">
<title>Gallery - Urban Outdoor Design</title>
<link rel="stylesheet" type="text/css"
href="css/style.css">
</head>
<body height: 1000px>
<div id="page">
<div id="header">
<a href="index.html" id="logo"><img
src="images/logo.png" alt="Logo"></a>
<ul>
<li>
Home
</li>
<li>
About Us
</li>
<li>
Services
</li>
<li class="current">
Gallery
</li>
<li>
<a href="billpay.html">Bill
Pay</a>
</li>
<li>
Contact
</li>
</ul>
</div>
<div id="body">
<div id="content">
<h1>Some Samples of our work:</h1>
<br>Use the scrollbar at the right
to browse images, point to an image to view a
larger version on the left.
</div>
<div class="gallery" align="center">
<div id="content">
<div id="left"><img
id="preview"
class="preview"
></div>
<div id="right">
<div class="thumbnails" align="center">
<img onmouseover="preview.src=this.src"
src="gallery/image1.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
src="gallery/image2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
src="gallery/image3.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
src="gallery/image4.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
src="gallery/image5.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=this.src"
<br>
</div>
</div>
</div>
<div id="footer">
<p>
Urban Outdoor Design, LLC ©
2015 | All Rights Reserved
</p>
</div>
</div>
</body>
</html>
CSS sheet:
body {
background: url(../images/bg-body.jpg) repeat;
color: #A7A238;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
min-width: 940px;
padding: 0;
}
a {
outline: none;
}
img {
border: 0;
}
p {
margin: 0;
text-align: justify;
}
p a {
color: #356618;
}
p a:hover {
color: #66a143;
}
#page {
background: #840D22;
margin: 0 auto;
padding: 0 20px;
width: 900px;
}
#header {
background: #ffffff;
height: 151px;
}
#header a#logo {
display: block;
height: 86px;
padding: 15px 0 0 20px;
}
#header a#logo img {
display: block;
margin: 0 auto;
}
#header > ul {
background: #4b4b4b;
height: 49px;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 900px;
}
#header > ul > li {
float: left;
position: relative;
width: 150px;
}
#header > ul > li > a {
color: #f0f2c9;
display: block;
letter-spacing: 0.1em;
line-height: 49px;
text-align: center;
text-decoration: none;
}
#header > ul > li.current > a,
#header > ul > li.current > a:hover,
#header ul li ul li.current a,
#header ul li ul li.current a:hover {
background: #840d22;
color: #f0f2c9;
}
#header ul li a:hover {
background: #daead0;
color: #1b330c;
}
#header ul li ul {
list-style: none;
left: -99999px;
margin: 0;
overflow: visible;
padding: 11px 0 0;
position: absolute;
top: 49px;
width: 150px;
z-index: 2;
}
#header ul li:hover ul {
left: 0;
top: 49px;
}
#header ul li ul li {
background: #4B4B4B;
}
#header ul li ul li a {
color: #f0f2c9;
display: block;
line-height: 31px;
text-align: center;
text-decoration: none;
}
#body {
background: #ffffff;
}
#body div.header {
height: 410px;
}
#body div.header div {
position: relative;
}
#body div.header div a img,
#body div.header ul li a.figure img,
#body div.body ul li a img {
display: block;
filter: alpha(opacity=100);
/* Needed for IE8 and old versions */
opacity: 1;
}
#body div.header div a img:hover,
#body div.header ul li a.figure img:hover,
#body div.body ul li a img:hover {
filter: alpha(opacity=90);
/* Needed for IE8 and old versions */
opacity: 0.9;
}
#body div.header div div {
background: url(../images/bg-description.png) repeat-x;
height: 75px;
bottom: 0;
position: absolute;
padding: 17px 20px;
left: 0;
width: 860px;
}
#body div.header div div h1 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
text-transform: uppercase;
}
#body div.header div div h1 a {
color: #e3e699;
text-decoration: none;
}
#body div.header div div h1 a:hover {
color: #ffffff;
}
#body div.header div div p {
color: #ffffff;
letter-spacing: 0.028em;
line-height: 24px;
}
#body div.header div div p a.continue {
background: url(../images/interface.png) no-repeat -400px 0;
display: inline-block;
height: 20px;
left: 3px;
position: relative;
top: 5px;
width: 20px;
}
#body div.header div div p a.continue:hover {
background: url(../images/interface.png) no-repeat -400px -20px;
}
#body div.header ul {
background: #356618;
list-style: none;
margin: 0;
overflow: hidden;
padding: 10px 0;
}
#body div.header ul li {
background: url(../images/separator1.png) repeat-y;
float: left;
overflow: hidden;
padding: 9px 20px 7px 0;
width: 280px;
}
#body div.header ul li:first-child {
background: none;
}
#body div#content ul.section li img,
#body div.header ul li a.figure {
display: block;
float: left;
}
#body div.header ul li a.figure img {
display: block;
border: 1px solid #ffffff;
margin: 0 20px 0;
}
#body div.header ul li.current h3 a {
color: #e3e699;
}
#body div.header ul li h3 {
font-size: 16px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.028em;
margin: 0;
padding: 0 0 10px;
}
#body div.header ul li h3 a {
color: #e3e699;
text-decoration: none;
}
#body div.header ul li h3 a:hover {
color: #ffffff;
}
#body div.header ul li p {
color: #ffffff;
letter-spacing: 0.022em;
line-height: 18px;
text-align: left;
}
#body div.body {
padding: 23px 20px 0;
}
#body div.body h1,
#body div.footer div h1 {
background: #dce9d4;
border-bottom: 2px solid #b3cca4;
color: #836145;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
font-weight: normal;
height: 37px;
line-height: 37px;
margin: 0;
padding: 0 0 0 20px;
text-transform: uppercase;
text-shadow: 1px 1px 1px #ffffff;
}
#body div.body ul {
list-style: none;
margin: 0;
overflow: hidden;
padding: 21px 0;
}
#body div.body ul li {
float: left;
margin: 0 0 0 20px;
width: 200px;
}
#body div.body ul li:first-child,
#body div#content ul.section li:first-child,
#body div#content div#sidebar div ul li:first-child {
margin: 0;
}
#body div.body ul li h2 {
color: #836145;
font-size: 16px;
font-weight: normal;
margin: 0;
padding: 24px 0 10px;
text-transform: uppercase;
}
#body div.body ul li p {
color: #4b4b4b;
letter-spacing: 0.028em;
line-height: 24px;
text-align: left;
}
#body div.footer {
border-top: 1px solid #d7d6cd;
margin: 0 20px;
overflow: hidden;
padding: 23px 0;
}
#body div.footer img {
display: block;
float: left;
}
#body div.footer div {
float: right;
width: 540px;
}
#body div.footer div ol {
margin: 0;
padding: 20px 0 0 20px;
}
#body div.footer div ol li {
color: #4b4b4b;
font-weight: bold;
margin: 10px 0;
}
#body div.footer div ol li p {
font-weight: normal;
letter-spacing: 0.028em;
line-height: 24px;
}
#body div#content {
border-top: 1px solid #5d8546;
overflow: hidden;
padding: 35px 20px;
}
#body div#content h1 {
color: #818181;
font-size: 20px;
letter-spacing: 0.028em;
margin: 0;
text-transform: uppercase;
}
#body div#content h3 {
color: #836145;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.028em;
line-height: 24px;
margin: 0;
padding: 30px 0 0;
}
#body div#content h3.first {
padding: 12px 0 0;
}
#body div#content p {
letter-spacing: 0.028em;
line-height: 24px;
padding: 25px 0 0;
}
#body div#content ul.section {
list-style: none;
margin: 0;
padding: 29px 0 0;
}
#body div#content ul.section li {
margin: 35px 0 0;
overflow: hidden;
}
#body div#content ul.section li span {
display: block;
float: left;
}
#body div#content ul.section li div {
float: right;
width: 520px;
}
#body div#content ul.section li div h2,
#body div#content div#article h2 {
color: #836145;
font-size: 16px;
letter-spacing: 0.028em;
line-height: 13px;
margin: 0;
}
#body div#content ul.section li div p {
padding: 23px 0 0;
}
#body div#content form {
margin: 0;
padding: 30px 0 0;
}
#body div#content form p {
color: #818181;
padding: 0 0 25px;
}
#body div#content form label {
display: block;
margin: 20px 0;
overflow: hidden;
}
#body div#content form label span:first-child {
background: none;
color: #836145;
float: left;
height: auto;
text-transform: uppercase;
width: 200px;
}
#body div#content form label span {
background: url(../images/interface.png) no-repeat;
display: block;
float: left;
height: 19px;
width: 320px;
}
#body div#content form label span input {
background: none;
border: none;
color: #818181;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 17px;
letter-spacing: 0.028em;
line-height: 17px;
margin: 1px 0 0 2px;
padding: 0;
width: 316px;
}
#body div#content form label span.message {
background: url(../images/interface.png) no-repeat 0 -25px;
height: 151px;
}
#body div#content form label span.message textarea {
background: none;
border: none;
color: #818181;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 147px;
letter-spacing: 0.028em;
margin: 2px 0 0 2px;
overflow: auto;
padding: 0;
resize: none;
width: 316px;
}
#body div#content form input#send {
background: url(../images/interface.png) no-repeat -331px -56px;
border: none;
color: #ffffff;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 25px;
letter-spacing: 0.028em;
line-height: 25px;
margin: 0 0 0 440px;
text-align: center;
text-shadow: 1px 1px 1px #514b61;
text-transform: uppercase;
width: 80px;
}
#body div#content form input#send:hover {
background: url(../images/interface.png) no-repeat -331px -81px;
}
#body div#content div#article {
border-right: 1px solid #96b285;
float: left;
padding: 0 20px 0 0;
width: 580px;
}
#body div#content div#article img {
display: block;
margin: 0 0 35px;
}
#body div#content div#article h1 {
padding: 0 0 17px;
}
#body div#content div#article h2 {
line-height: 24px;
}
#body div#content div#article span {
color: #818181;
display: block;
letter-spacing: 0.028em;
line-height: 24px;
}
#body div#content div#sidebar {
float: right;
width: 242px;
}
#body div#content div#sidebar h3 {
color: #818181;
font-weight: bold;
line-height: normal;
padding: 0 0 15px;
text-transform: uppercase;
}
#body div#content div#sidebar div {
border-top: 1px solid #96b285;
padding: 20px 0;
}
#body div#content div#sidebar div:first-child {
border: none;
padding: 0 0 20px;
}
#body div#content div#sidebar div ul,
#footer div div ul {
list-style: none;
margin: 0;
padding: 0;
}
#body div#content div#sidebar div ul li {
color: #818181;
letter-spacing: 0.028em;
line-height: 24px;
}
#body div#content div#sidebar div ul li a {
color: #818181;
text-decoration: none;
}
#body div#content div#sidebar div ul li a:hover {
color: #4b4b4f;
}
#body div#content div#sidebar div:first-child ul li {
letter-spacing: 0.024em;
line-height: 18px;
margin: 15px 0 0;
}
#body div#content div#sidebar div p {
color: #818181;
padding: 0;
}
#footer {
background: #dce9d4;
border-top: 1px solid #b8d0aa;
}
#footer div {
height: 174px;
overflow: hidden;
}
#footer div div {
border-left: 1px solid #b8d0aa;
float: left;
height: 134px;
padding: 20px 20px;
width: 180px;
}
#footer div div:first-child {
border: none;
}
#footer div div h1 {
color: #8c8c8c;
font-size: 18px;
font-weight: normal;
margin: 0;
padding: 0 0 13px;
text-shadow: 1px 1px 1px #ffffff;
text-transform: uppercase;
}
#footer div div ul li a {
letter-spacing: 0.028em;
line-height: 18px;
}
#footer div div a {
color: #8c8c8c;
display: block;
letter-spacing: 0.05em;
text-decoration: none;
}
#footer div div a:hover {
color: #4b4b4f;
}
#footer div div a#mail {
background: url(../images/icons.png) no-repeat;
height: 14px;
line-height: 14px;
margin: 0 0 10px;
padding: 0 0 0 30px;
}
#footer div div a#facebook {
background: url(../images/icons.png) no-repeat 0 -38px;
height: 20px;
line-height: 20px;
margin: 0 0 10px;
padding: 0 0 0 30px;
}
#footer div div a#twitter {
background: url(../images/icons.png) no-repeat 0 -88px;
height: 18px;
line-height: 18px;
margin: 0 0 10px;
padding: 0 0 0 30px;
}
#footer div div a#googleplus {
background: url(../images/icons.png) no-repeat 0 -134px;
height: 20px;
line-height: 20px;
margin: 0 0 10px;
padding: 0 0 0 30px;
}
#footer div div a#mail:hover {
background: url(../images/icons.png) no-repeat 0 -14px;
}
#footer div div a#facebook:hover {
background: url(../images/icons.png) no-repeat 0 -58px;
}
#footer div div a#twitter:hover {
background: url(../images/icons.png) no-repeat 0 -106px;
}
#footer div div a#googleplus:hover {
background: url(../images/icons.png) no-repeat 0 -154px;
}
#footer p {
background: #840D22;
color: #ffffff;
height: 37px;
line-height: 37px;
text-align: center;
text-shadow: 1px 1px 1px #8da181;
}
Here is a link to a screenshot of what it should look like. It works in Firefox. On mouseover of a thumbnail on right, it opens a large version of the image in the white space in the body.
http://www.image-share.com/ijpg-2876-171.html
Thank you for any help!

you can use this for your mouseover will make it work in firefox and chrome
onmouseover="document.getElementById('preview').src=this.src"
from what I can find it looks like firefox can apply id variables to javascript in this case preview will be automatically given an id, while chrome does not do this.
Edit:
replace your onmouseover
<img onmouseover="preview.src=this.src" src="gallery/image1.jpg" alt="Image Not Loaded"/>
change to
<img onmouseover="document.getElementById('preview').src=this.src" src="gallery/image1.jpg" alt="Image Not Loaded"/>
edit 2:
to get the first image already in the area just add a src="" to the <img /> inside of the left div, see below:
<div id="content">
<div id="left">
<img id="preview" class="preview" src="http://d.ibtimes.co.uk/en/full/1409516/how-update-nexus-5-official-android-5-0-lollipop-build-lrx21o-via-factory-image.jpg">
</div>

CSS and page layout won't display in ie but will work fine in chrome and firefox

Majority of pages on the website works with no errors but on a few of them the navigation doesn't line up with the content and I am missing the "contact" link at the top of the navigation. The website works fine in Chrome and Firefox, and only shows these errors when in Internet Explorer. I don't quite understand why? I've search Google for answers and I haven't seen any solutions that actually work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Business Learning Foundation</title>
<!--==== js image slider ====-->
<!--==== design ====-->
<link href="staticstyle.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
.auto-style9 {
text-align: center;
}
</style>
<!--==== browser ====-->
<!--[if lte IE 7]><link href="../design/iestyle.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lte IE 8]><style>#wrapper{width: 1020px;max-width: 1020px;min-width: 1020px;background-image: none;display: block;}
.auto-style1 {
background-color: #EF7F1A;
}
.auto-style10 {
color: #EF4923;
}
.auto-style11 {
display: inline-block;
height: 30px;
padding: 5px 0px 0px 0px;
font-size: 14px;
font-weight: normal;
color: #1C1C1C;
text-align: center;
}
</style><![endif]-->
<!--[if lt IE 9]><script src="../design/js/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="10375.js"></script>
<!--
=====================================
COOKIE COMPLIANCE CODE
=====================================
-->
<script type="text/javascript" src="../CookieCompliance/jquery.js"></script>
<script type="text/javascript" src="../CookieCompliance/cookie-compliance.js"></script>
<link href="../CookieCompliance/stylesheet.css" rel="stylesheet" type="text/css" />
<!--
END
=====================================
-->
</head>
<body>
<!--
=====================================
COOKIE COMPLIANCE CODE
=====================================
-->
<div id="cookieMessageWrapper">
<div id="cookieMessage">
<a id="cookieClose" href="#">Close</a>
<p>This site uses cookies. By continuing to use our website you accept
our use of cookies. For more information and how you can disable them
please click here, or click the close
button on the right to hide this message.</p>
</div>
</div>
<!--
END
=====================================
-->
<div id="menu-wrapper">
<div id="menu" style="height: 58px">
<ul>
<li>Home</li>
<li>Public courses</li>
<li>In-house training</li>
<li>ILM centre</li>
<li class="current_page_item">About us</li>
<li>Contact us</li>
</ul>
</div>
<!-- end #menu -->
</div>
<div id="header-wrapper" style="height: 317px">
<div id="header" style="height: 272px">
<div id="logo" style="height: 223px; width: 999px;">
<p><img src="../images/logo/BLF-trans.png" alt="Business Learning Foundation" /></p>
<div id="staticFrame" style="width: 958px;" >
<img alt="" height="165" src="booklogo.png" style="float: left" width="238" /><!--thumbnails--><div id="thumbs" style="width: 302px; height: 173px;">
<div class="thumb" style="height: 155px">
<br />
<h1>spice up your learning & development with business learning
foundation</h1>
<p>About us</p>
<p> </p>
<p> </p>
</div>
</div>
<!--clear above float:left elements. It is required if above #slider is styled as float:left. -->
</div>
<p> </p>
<p> </p>
</div>
<h1><span > </span> <img alt="Facebook" height="32" src="../images/social-media-icons/facebok.png" width="32" class="auto-style6" style="float: right" />
<a href="https://twitter.com/theblf_co" target="_blank">
<img alt="Twitter" height="32" src="../images/social-media-icons/twitter.png" width="32" class="auto-style6" style="float: right" /></a>
<a href="http://www.linkedin.com/company/2634098?trk=prof-exp-company-name" target="_blank">
<img alt="Linked In" height="32" src="../images/social-media-icons/linkedin.png" width="32" class="auto-style6" style="float: right" /></a>
<a href="https://plus.google.com/b/108614131190835211694/108614131190835211694/posts" target="_blank">
<img alt="" height="32" src="../images/social-media-icons/google-plus.png" width="32" class="auto-style6" style="float: right" /></a></h1>
</div>
</div>
<div id="menu2-wrapper">
<div id="menu2">
<ul>
<li class="current_page_item">about</li>
<li>history</li>
<li>the team</li>
<li>venues</li>
<li>clients</li>
<li>testimonials</li>
<li>news</li>
<li>gallery</li>
<li>careers</li>
</ul>
</div>
<!-- end #menu -->
</div>
<!-- end #header -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content" style="height:808px">
<div class="post">
<div class="entry">
<h2> About the business learning foundation</h2>
<p>The Business Learning Foundation specialises in
Management Development, Team Building and Business
Coaching. We also have our own range of
psychometrics and eBooks to support the various
methods of development. We are renowned for our
innovative exercises we use for our management
development programmes and team builds, these
re-energise the delegates and illustrate the key
learning’s and messages in a way which cannot be
done in the classroom.<br />
<br />
We have been running since 1985 and have built an
impressive and loyal client base by delivering world
class learning and development. Our clients used to
stick to what they knew and repeated the work we had
done with them in the past, this year we have
rebranded to bring all elements of our organisation
under one umbrella so that our customers could see
and benefit from all the specialism’s we were able
to offer them.<br />
The CSS code is:
body {
margin: 0;
padding: 0;
background-color:#e5d7cc;
font-family:"Century Gothic";
font-size: 12pt;
color: #3B3B3B;
background-image:url('../images/logo/leftrighttree.png');
background-position:left top;
background-repeat:no-repeat;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
letter-spacing: -2px;
text-transform: uppercase;
font-family: "Trajan Pro 3";
font-weight: normal;
color:#261e74;
}
h1 {
font-size: 26px;
font-family:"Trajan Pro 3";
color:#3e1f00;
letter-spacing:0.5px;
}
h2 {
letter-spacing: 1px;
font-size: 18px;
border-bottom:1px #f26522 solid;
border-top:1px #f26522 solid;
padding:1px;
text-align:center;
color:#1c4297;
}
h3 {
letter-spacing: 1px;
font-size: 14px;
border-bottom:1px #f26522 solid;
border-top:1px #f26522 solid;
padding:1px;
text-align:center;
color:#0487d3;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #ef4923;
}
a:hover {
text-decoration: none;
color: #0487d3;
}
.div1, .div2 {width:800px;margin:0 auto; background-color:#e5d7cc}
.div1 {margin-top:30px;margin-bottom:60px;text-align:center;line-height:20px;background-color:#e5d7cc}
.div1 P {font-size:18px;}
.div1 a, .div2 a {color:#07C;}
.div2 {margin-top:70px;}
.div2 li {padding-top:6px;padding-bottom:6px;background-color:#e5d7cc}
.floatLeft {float:left;}
/* Header */
#header-wrapper {
}
#header {
clear: both;
width: 1000px;
height:416px;
margin: 0px auto;
}
/* Logo */
#logo {
margin: 0px;
padding: 30px 0px;
color: #000000;
}
#logo h1, #logo p {
margin: 0;
padding: 0;
}
#logo h1 {
margin: 0px;
padding: 0px;
text-align: center;
text-transform: lowercase;
font-size: 10em;
font-family: 'Yesteryear', cursive;
font-weight: 400;
color: #323030;
}
#logo h1 span {
color: #F6B300;
}
#logo p {
margin-top: -2em;
padding: 0px;
text-align: center;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 11px;
color: #3B3B3B;
}
#logo p a {
color: #3B3B3B;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #323030;
}
#slogan{
height:36px;
font-size:24pt;
font-family:"Trajan Pro 3";
text-align:left;
padding-bottom:6px;
}
/* Search */
#side-label{
width:250px;
color:black;
font-family:"Century Gothic";
letter-spacing:0.5px;
}
#search {
width: 320px;
height: 60px;
padding: 0px;
}
#search form {
margin: 0px;
padding: 0px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 250px;
outline: none;
background: #F5F0E7;
border: 1px solid #D7D0C0;
padding: 10px;
border-radius: 8px;
text-transform: lowercase;
font-family:"Century Gothic";
color: #454545;
}
#search-submit {
width:82px;
padding: 5px 10px;
background: #e5d7cc;
border-radius: 5px;
letter-spacing: 1px;
text-transform: uppercase;
font-family:"Century Gothic";
font-size: 14px;
background-image:url('../images/search.png');
background-repeat:no-repeat;
background-position:center;
color: #0a4fa3;
}
/* CourseSearch */
#coursesearch {
width: 320px;
height: 60px;
padding: 0px;
}
#coursesearch form {
margin: 0px;
padding: 0px;
}
#coursesearch fieldset {
margin: 0;
padding: 0;
border: none;
}
#coursesearch-text {
width: 250px;
outline: none;
background: #F5F0E7;
border: 1px solid #D7D0C0;
padding: 2px;
border-radius: 8px;
text-transform: lowercase;
font-family:"Century Gothic";
color: #454545;
}
#coursesearch-submit {
width:82px;
margin-top:10px;
padding: 2px 5px;
background: #e5d7cc;
border-radius: 5px;
letter-spacing: 1px;
text-transform: uppercase;
font-family:"Century Gothic";
font-size: 14px;
color: #1c4297;
}
/* Contact */
#contact {
width: 320px;
height: 60px;
padding: 0px;
}
#contact form {
margin: 0px;
padding: 0px;
}
#contact fieldset {
margin: 0;
padding: 0;
border: none;
}
#contact-text {
width: 209px;
outline: none;
background: #F5F0E7;
border: 1px solid #D7D0C0;
padding: 2px;
border-radius: 8px;
font-family:"Century Gothic";
color: #454545;
}
#contact-submit {
width: 62px;
height: 22px;
display: none;
border: none;
color: #FFFFFF;
}
/* Menu */
#menu-wrapper {
overflow: hidden;
height: 56px;
}
#menu {
width: 1000px;
height: 55px;
margin: 0px auto;
padding-top:5px;
background:#f47321 url('../images/logo/whitetree.png') no-repeat right 50%;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
border-right: 1px solid #FDA408;
}
#menu a {
display: block;
letter-spacing: 1px;
margin: 0px 10px;
line-height: 55px;
padding: 0 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a {
text-decoration: none;
color: #3D2729;
}
#menu .current_page_item a {
}
#menu-wrapper {
overflow: hidden;
height: 56px;
}
/* Navigation part 2 */
#menu2 {
width: 1000px;
height: 30px;
margin: 0px auto;
padding: 0px;
background-color:#3E1F00;
border-radius:8px;
}
#menu2 ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu2 li {
display: inline-block;
border-right: 1px solid #FDA408;
}
#menu2 a {
display: block;
letter-spacing: 1px;
margin: 0px 10px;
line-height: 25px;
padding: 0 1px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family:"Century Gothic";
font-size: 12px;
font-weight: normal;
color:#FFFFFF;
border: none;
}
#menu2 a:hover, #menu2 .current_page_item a {
text-decoration: none;
color:#FF3300;
}
#menu2 .current_page_item a {
}
#menu2-wrapper {
overflow: hidden;
height: 31px;
}
/* Page */
#wrapper
{
overflow: hidden;
padding-bottom: 40px;
}
#page {
overflow: hidden;
width: 1000px;
margin: 0px auto;
}
/* Content */
#content {
float: left;
width: 640px;
height:500px;
background-color:#ffffff;
overflow:scroll;
}
.post {
margin-bottom: 5px;
padding: 10px 15px;
}
.post-alt
{
background: #F0F0F0;
}
.post .title {
height: 38px;
margin-bottom: 10px;
padding: 12px 0 0 0px;
font-size: 32px;
}
.post .title a {
border: none;
color: #3D2729;
}
.post .meta {
margin-bottom: 5px;
padding: 5px 0px 15px 0px;
text-align: left;
font-weight: normal;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 0px 20px 0px;
padding-bottom: 5px;
text-align: justify;
}
.links {
display: inline-block;
height: 30px;
padding: 5px 0px 0px 0px;
font-size: 14px;
font-weight: normal;
color: #1C1C1C;
}
.button
{
padding: 5px 10px;
background: #E58703;
border-radius: 5px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
color: #FFFFFF;
}
/* Sidebar */
#sidebar {
float: right;
width:300px;
height:536px;
margin: 0px;
padding: 40px 30px 0px 30px;
color: #787878;
background: #f26522;
}
#sidebar p
{
color: #3B3B3B;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 50px;
}
#sidebar li li {
border-bottom: 1px solid #D8AD06;
margin: 0px 0px;
padding: 10px 0px;
border-left: none;
}
#sidebar li li a {
color: #3B3B3B;
}
#sidebar li li span {
display: block;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar h2 {
padding-bottom: 20px;
font-size: 18px;
color: #3D2729;
}
#sidebar p {
margin: 0px 0px 40px 0px;
padding: 0px;
text-align: justify;
}
#sidebar a {
border: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
height: 150px;
margin: 0 auto;
padding: 0px 0 15px 0;
background:#EE8A48;
border-top: 1px solid #A59282;
font-family: 'Arvo', serif;
}
#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
#banner {
width: 1000px;
margin: 0px auto;
}
#banner img
{
border-radius: 8px;
background-repeat:no-repeat;
background-position:center;
}
/* Three Column Content */
#three-column {
overflow: hidden;
padding: 10px 0px 10px 0px;
color:white;
}
#three-column #tbox1 {
float: left;
width: 320px;
margin-right: 20px;
}
#three-column #tbox2 {
float: left;
width: 320px;
margin-right: 20px;
}
#three-column #tbox3 {
float: left;
width: 320px;
}
.box-style {
background-color:#3E1F00;
}
.box-style01
{
border-bottom: 5px solid #0F62B4;
}
.box-style02
{
border-bottom: 5px solid #DE5635;
}
.box-style03
{
border-bottom: 5px solid #0F62B4;
}
.box-style h2 {
padding: 10px 0px;
letter-spacing: -1px;
font-size: 16px;
color: #FFFFFF;
width:272px;
}
.box-style .image {
width: 272px;
}
.box-style .arrow {
}
.box-style .content {
overflow: hidden;
width: 300px;
padding: 30px;
}
.divider {
overflow: hidden;
height: 50px;
background: url(images/img04.png) no-repeat center top;
}
/* http://www.menucool.com */
/*slider frame*/
#staticFrame
{
width:950px;
margin:0 auto; /*center-aligned*/
padding:20px;
border-top:1px #BE9C81 dashed;
height:154px;
border-bottom:1px #BE9C81 dashed;
}
/* -- thumbnails -- */
#thumbs
{
float:right;
margin-left:10px;
width:300px;
font:normal 11px/13px Arial;
color:#666;
height:240px;
}
#thumbs .thumb
{
padding:6px 4px;
color:fuchsia;
}
#thumbs .thumb h1
{
padding:6px 4px;
color:#715239;
font-family:"Trajan Pro 3";
letter-spacing:0.5px;
line-height:20px;
font-size:20px;
}
#thumbs .thumb p
{
padding:20px 20px;
color:#FF6600;
font-size:16px;
font-family:"Century Gothic";
text-decoration:none;
text-transform:none;
}
#testimonial{
}
#testimonial .testimage{
width: 20%;
padding:10px 0px 0px 0px;
float:left;
}
#testimonial .testcontent{
border:1px #BE9C81 dashed;
float:right;
width:100%;
margin-bottom:20px;
}
#testimonial .testcontent h1 {
width:75%;
float:right;
padding:10px 10px 10px 10px;
font-style:italic;
color:#3E1F00;
font-size:15px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
}
#testimonial .testcontent h2 {
font-weight:bold;
color:#090071;
border:none;
font-size:15px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
width:75%;
float:right;
text-align:left;
}
#testimonial .testcontent p {
font-style:italic;
color:#CA5100;
border:none;
font-size:15px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
width:75%;
float:right;
}
#testimonial .testcontent h4 {
color:#622000;
border:none;
font-size:12px;
text-transform:none;
font-family:"Century Gothic";
letter-spacing:0.1px;
width:75%;
float:left;
text-align:center;
line-height:-10px;
width:20%;
}

Use float:left for menu LI. It will align all the LIs from left to right in IE. And set margin: auto to align UL to the center.
#menu2 li {
display: inline-block;
border-right: 1px solid #FDA408;
float:left;
}
#menu li {
display: inline-block;
border-right: 1px solid #FDA408;
float:left;
}
Update:
For equally spacing LIs within UL, there is no easy way to implement it using CSS, but you could use jquery like this. I have tried it using number of different ways in CSS, but this seems to be the best and works in every browser.
$(document).ready(function() {
var tabs = $('#menu2').find('li');
if (tabs.length) tabs.css('width', (100 / tabs.length) + "%");
})

HTML page randomly showing gigantic fonts

I have a Wordpress website.
Upon visitng the pages for the first time I randomly sometimes get gigantic fontsizes as show in this image. In such cases, pressing F5 and relading the page fixes the problem as show in this second image.
Has anybody got any idea?
Please find below my 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, font, 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
{
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
font-family: 'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
html /****/
{
font-size: 62.5;
}
#comments
{
}
.comment-content p
{
margin-bottom: 15px;
}
body
{
line-height: 1;
}
h1, h2, h3, h4, h5, h6
{
clear: both;
font-weight: bold;
}
ol, ul
{
list-style: none;
}
blockquote
{
quotes: none;
}
blockquote:before, blockquote:after
{
content: '';
content: none;
}
del
{
text-decoration: line-through;
}
/*tables still need 'cellspacing="0"' in the markup*/
table
{
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 10px;
}
table td, table th
{
padding: 5px;
}
a img
{
border: none;
}
a, a:visited {
outline: 0;
}
/*=Fonts
--------------------------------------------------------------*/
body, input, textarea, .page-title span, .pingback a.url
{
font-family: 'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
h3#comments-title, h3#reply-title, #access .menu, #access div.menu ul, #cancel-comment-reply-link, .form-allowed-tags, #site-info, #site-title, #wp-calendar, .comment-meta, .comment-body tr th, .comment-body thead th, .entry-content label, .entry-content tr th, .entry-content thead th, .entry-meta, .entry-title, .entry-utility, #respond label, .navigation, .page-title, .pingback p, .reply, .widget-title, .wp-caption-text
{
font-family: 'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
input[type=submit]
{
font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}
pre
{
font-family: "Courier 10 Pitch", Courier, monospace;
}
code
{
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
#site-title a
{
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
#colleft #access a
{
font-family: Geneva, Tahoma, Verdana, sans-serif;
}
.widget-title
{
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.entry-title
{
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}
.entry-content
{
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
/*
=Typography
--------------------------------------------------------------*/
.widget-area, #commentform
{
font-size: 14px;
font-size: 1.4rem;
}
.entry-content
{
display: inline-block;
/*color: #BBB;*/
font-size: 14px;
font-size: 1.3rem;
line-height: 26px;
line-height: 1.6rem;
/*font-family:'Cardo', "Century Gothic", CenturyGothic, AppleGothic, sans-serif;*/
margin-bottom: 15px;
}
.entry-content:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac */
* html .entry-content
{height: 1%;}
.entry-content
{display: block;}
/* End hide from IE-mac */
body
{
color: white;/*#CCC;*/
}
#site-title a
{
color: #FFF;
text-decoration: none;
font-size: 20px;
font-size: 2rem;
word-wrap: break-word;
}
#colleft #access a
{
text-transform: uppercase;
font-size: 12px;
font-size: 1.0rem;
font-weight: 600;
color: #FFF;
line-height:1.2rem;
}
#colophon a, #colophon a:visited
{
color: #CCC;
font-size: 14px;
font-size: 1.4rem;
}
#colophon
{
font-family: 'Cardo', serif, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-size: 1.4em;
}
.entry-title
{
font-size: 24px;
font-size: 2.3rem;
color: #EEE;
}
.widget-title, #reply-title
{
color: #777;
font-size: 14px;
font-weight: bold;
}
.form-allowed-tags
{
font-size: 12px;
}
.page-title
{
font-size: 19px;
font-size: 1.9rem;
font-weight: bold;
}
#credits, #credits a {
font-size:12px;
font-size:1.2rem;
font-weight: bold;
}
#site-generator {
}
/*Global styles
----------------------------------------------------------------
Text elements*/
p
{
margin-bottom: 1.625em;
}
ul, ol
{
margin: 0 0 1.625em 2.5em;
}
ul
{
list-style: square;
}
ol
{
list-style-type: decimal;
}
ol ol
{
list-style: upper-alpha;
}
ol ol ol
{
list-style: lower-roman;
}
ol ol ol ol
{
list-style: lower-alpha;
}
ul ul, ol ol, ul ol, ol ul
{
margin-bottom: 0;
}
dl
{
margin: 0 1.625em;
}
dt
{
font-weight: bold;
}
dd
{
margin-bottom: 1.625em;
}
strong
{
font-weight: bold;
}
cite, em, i
{
font-style: italic;
}
blockquote
{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-style: italic;
font-weight: normal;
margin: 0 3em;
}
blockquote em, blockquote i, blockquote cite
{
font-style: normal;
}
blockquote cite
{
color: #666;
font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-transform: uppercase;
}
pre
{
color: #333;
background: #BBB;
font: 13px "Courier 10 Pitch", Courier, monospace;
line-height: 1.5;
margin-bottom: 1.625em;
overflow: auto;
padding: 0.75em 1.625em;
}
code, kbd
{
font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr, acronym, dfn
{
border-bottom: 1px dotted #666;
cursor: help;
}
address
{
display: block;
margin: 0 0 1.625em;
}
ins
{
background: #FFF9C0;
text-decoration: none;
}
sup, sub
{
font-size: 10px;
font-size: 1.0rem;
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup
{
bottom: 1ex;
}
sub
{
top: 0.5ex;
}
/*Forms*/
input[type=text], input[type=password], textarea
{
background: #EEE;
-moz-box-shadow: inset 0 1px 1px #bbb;
-webkit-box-shadow: inset 0 1px 1px #bbb);
box-shadow: inset 0 1px 1px #BBB;
border: 1px solid #DDD;
color: #888;
}
input[type=text]:focus, textarea:focus
{
color: #373737;
}
textarea
{
padding-left: 3px;
width: 98%;
}
input[type=text]
{
padding: 3px;
}
input#s
{
-moz-border-radius: 2px;
border-radius: 2px;
font-size: 14px;
height: 22px;
line-height: 1.2em;
padding: 4px 10px 4px 28px;
}
input#searchsubmit
{
display: none;
}
a, a:visited
{
color: #FF6347;
}
/*=General Styles
--------------------------------------------------------------*/
.entry-header
{
width: 100%;
display: inline-block;
margin-bottom: 15px;
}
.entry-title
{
border-bottom: 1px solid grey;/*#222;*/
padding-bottom: 10px;
}
#respond p
{
margin-top: 10px;
}
#respond input, #comments #respond textarea
{
margin-top: 5px;
}
#respond
{
color: #444444;
}
.clear
{
clear: both;
}
#site-generator
{
padding-left: 60px;
}
#main
{
display:inline-block;
margin: 40px;
}
/*
#main:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}*/
/* Hides from IE-mac */
* html #main
{height: 1%;}
#main
{display: block;}
/* End hide from IE-mac */
#image-navigation
{
margin-top: 5px;
}
.page-title
{
margin-bottom: 10px;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6
{
margin-bottom: 20px;
}
.entry-content img
{
outline: 2px solid white;
}
.archive .entry-title
{
margin-top: 20px;
}
.attachment .entry-caption
{
margin-top:10px;
}
#comments-title
{
font-size: 16px;
margin-bottom: 25px;
}
.comment-content
{
font-size: 14px;
line-height: 18px;
color: #AAA;
}
#comments
{
clear: both;
}
#comments .navigation
{
padding: 0 0 18px;
}
h3#comments-title, h3#reply-title
{
color: #999;
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
}
h3#comments-title
{
padding: 24px 0;
}
.commentlist
{
list-style: none;
margin: 0;
}
.commentlist li.comment
{
border-bottom: 1px solid #111;
line-height: 24px;
margin: 0 0 24px;
padding: 0 0 0 65px;
position: relative;
}
.commentlist li:last-child
{
border-bottom: none;
margin-bottom: 0;
}
#comments .comment-body ul, #comments .comment-body ol
{
margin-bottom: 18px;
}
#comments .comment-body p:last-child
{
margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child
{
margin-bottom: 24px;
}
.commentlist ol
{
list-style: decimal;
}
.commentlist .avatar
{
position: absolute;
top: 4px;
left: 0;
}
.comment-author
{
}
.comment-author cite
{
color: #CCC;
font-style: normal;
font-weight: bold;
}
.comment-author .says
{
font-style: italic;
}
.comment-meta
{
font-size: 12px;
margin: 0 0 13px;
}
.comment-meta a:link, .comment-meta a:visited
{
color: #888;
text-decoration: none;
}
.comment-meta a:active, .comment-meta a:hover
{
color: #FF4B33;
}
.commentlist .even
{
}
.commentlist .bypostauthor
{
}
.reply
{
font-size: 12px;
padding: 0 0 24px;
}
.reply a, a.comment-edit-link
{
color: #888;
}
.reply a:hover, a.comment-edit-link:hover
{
color: #FF4B33;
}
.commentlist .children
{
list-style: none;
margin: 0;
}
.commentlist .children li
{
border: none;
margin: 0;
}
.nopassword, .nocomments
{
display: none;
}
#comments .pingback
{
border-bottom: 1px solid #E7E7E7;
margin-bottom: 18px;
padding-bottom: 18px;
}
.commentlist li.comment + li.pingback
{
margin-top: -6px;
}
#comments .pingback p
{
color: #888;
display: block;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#comments .pingback .url
{
font-size: 13px;
font-style: italic;
}
.entry-meta a
{
color: #EEE;
}
/*=Structure
--------------------------------------------------------------*/
#commentform
{
padding: 10px;
}
#wrapper
{
margin: 0 auto;
width: 1200px;
height: 100%;
}
#colleft
{
width: 230px;
float: left;
margin-right: 50px;
margin-top: 20px;
border-top: 0;
background:rgba(70,70,70,0.90);
border-bottom:1px solid rgba(57,57,57,0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#99464646',endColorstr='#99464646',GradientType=0);
}
#branding h1,#branding h2
{
text-align: center;
text-indent: -9999px;
margin:0;
paading:0;
}
#logo
{
margin-top:0;
height:144px;
background:url('images/Locandina_Logo.jpg') no-repeat center;
background-position:50% 0;
}
#wrapper #colleft a img {
display:block;
margin:auto;
width:100%;
}
.home #page
{
display: none;
}
#page
{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
border: none;
display: block;
width: 730px;
margin-top: 20px;
float: left;
height:auto;
background:rgba(70,70,70,0.90);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#99464646',endColorstr='#99464646',GradientType=0);
overflow:hidden;
}
#primary
{
/*float: left;*/
width: 80%;
}
#page #main .full-width {
width:100%;
}
#content
{
margin-right:40px;
}
#main .widget-area
{
float: right;
overflow: hidden;
width: 0px;
}
.widget-area
{
color: #999;
}
#colophon
{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
border-top: 1px solid #222;
clear: both;
display: block;
bottom: 0;
left: 0;
height: 15px;
margin-top: 30px;
position: relative;
}
.home #colophon
{
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.4);
border-top: 1px solid #222;
clear: both;
display: block;
width: 100%;
bottom: 0;
right: 0;
left: 0;
height: 15px;
position: fixed;
}
#content .post
{ display: block;
margin-bottom: 25px;
}
.post .entry-title a, .post .entry-title a:visited
{
text-decoration: none;
color: #EEE;
word-wrap: break-word;
}
.page-template-template-blog-php .page-title {
margin-bottom:20px;
}
/*Increase the size of the content area for templates without sidebars*/
.full-width #content, .image-attachment #content, .error404 #content
{
margin: 0;
}
/*Text meant only for screen readers*/
.screen-reader-text, .assistive-text
{
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
/*IE6, IE7*/
clip: rect(1px, 1px, 1px, 1px);
}
/*Alignment*/
.alignleft
{
display: inline;
float: left;
}
.alignright
{
display: inline;
float: right;
}
.aligncenter
{
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*=Header
--------------------------------------------------------------*/
#site-title
{ text-align: center;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
padding:0 5px;
}
#site-description
{
text-align: center;
color: #CCCCCC;
font-size: 12px;
font-weight: normal;
margin: 0 0 1em;
padding:0 5px;
}
/*=Menu
--------------------------------------------------------------*/
#access
{
display: block;
margin: 10px auto;
width: 80%;
}
#access ul
{
list-style: none;
margin: 0;
padding-left: 0;
}
#access li
{
position: relative;
}
#access li a
{
padding: 10px;
}
#access a
{
display: block;
line-height: 15px;
padding: 0 1em;
text-decoration: none;
}
#access ul ul
{
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 0;
left: 100%;
z-index: 99999;
}
#access ul ul ul
{
left: 100%;
top: 0;
}
#access ul ul a
{
width: 10em;
height: auto;
}
#access li:hover > a, #access ul ul :hover > a
{
background: #DEDEDE;
color: #555 !important;
}
#access ul ul a:hover
{
color: #555 !important;
}
#access ul li:hover > ul
{
display: block;
color: #555;
}
#access .menu li a:hover
{
color: #555;
}
#access .children li
{
background-color: #999999 !important;
}
#access .sub-menu li
{
background-color: #999999 !important;
}
.menu
{
text-align: center;
}
.menu li
{
border-top: 1px solid grey;/* #222;*/
}
.menu .sub-menu li
{
border-top: 1px solid #888;
}
.menu .children li
{
border-top: 1px solid #888;
}
.menu li:first-child
{
border: 0;
}
/*=Content
--------------------------------------------------------------*/
.sticky
{
}
.entry-meta
{
color: #ccc;
margin-top: 10px;
clear: both;
display: block;
font-size: 12px;
font-weight:bold;
}
.single-author .entry-meta .byline
{
display: none;
}
#content nav
{
padding-bottom: 5px;
display: block;
overflow: hidden;
font-size: 11px;
font-size: 1.1rem;
}
#content nav .nav-previous
{
float: left;
width: 50%;
}
#content nav .nav-next
{
float: right;
text-align: right;
width: 50%;
}
#content #nav-above
{
display: none;
}
.paged #content #nav-above, .single #content #nav-above
{
display: block;
}
#nav-below
{
margin: 1em 0 0;
}
.page-link
{
clear: both;
margin: 0 0 1em;
}
.page .edit-link
{
clear: both;
}
/*404 page*/
.error404 .widget
{
float: left;
width: 33%;
}
.error404 .widget .widgettitle, .error404 .widget ul
{
margin-right: 1em;
}
.error404 .widget_tag_cloud
{
clear: both;
float: none;
width: 100%;
}
/*Notices*/
.post .notice, .error404 #searchform
{
background: #EEE;
display: block;
padding: 1em;
}
/*Image Attachments*/
#image-navigation {
margin: 10px 0 0 10px;
}
.image-attachment div.entry-meta
{
float: left;
}
.image-attachment nav
{
float: right;
margin: 0 0 1em;
}
.image-attachment .entry-content
{
clear: both;
}
.image-attachment .entry-content .entry-attachment
{
margin: 0 0 1em;
text-align: center;
margin-top: 6px;
}
.image-attachment .entry-content .attachment
{
display: block;
margin: 0 auto;
text-align: center;
}
/*Aside Posts*/
.format-aside .entry-header
{
display: none;
}
.single .format-aside .entry-header
{
display: block;
}
.format-aside .entry-content, .format-aside .entry-summary
{
padding-top: 1em;
}
.single .format-aside .entry-content, .single .format-aside .entry-summary
{
padding-top: 0;
}
/*Gallery Posts*/
.format-gallery .gallery-thumb
{
float: left;
margin: 0 1em 0 0;
}
/*Image Posts*/
.format-image .entry-header
{
display: none;
}
.single .format-image .entry-header
{
display: block;
}
.format-image .entry-content, .format-image .entry-summary
{
padding-top: 1em;
}
.single .format-image .entry-content, .single .format-image .entry-summary
{
padding-top: 0;
}
/*=Images
--------------------------------------------------------------*/
img
{
margin: 10px 0;
}
#supersized img
{
margin: 0;
}
a img
{
border: none;
}
p img
{
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img, .widget-area img, .wp-caption
{
max-width: 100%;
/*When images are too wide for containing element, force them to fit.*/
height: auto;
/*Override height to match resized width for correct aspect ratio.*/
}
img.alignleft
{
margin-right: 1em;
}
img.alignright
{
margin-left: 1em;
}
.wp-caption
{
text-align: center;
}
.wp-caption img
{
}
.wp-caption .wp-caption-text
{
margin: 0.5em;
}
.gallery-caption
{
}
.wp-smiley
{
margin: 0;
}
/*=Forms
--------------------------------------------------------------*/
button, #submit {
background: #222;
border: 1px solid #666;
color: white;
cursor: pointer;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 5px 10px;
width: auto;
color:#aaa;
}
#searchform label
{
display: none;
}
#searchform {
padding:10px;
}
#searchform input#s
{
width: 60%;
}
input[type=text], input#s
{
margin: 0 1em 0 0;
width: 60%;
}
textarea
{
width: 80%;
}
/*Class for labelling required form items*/
.required
{
color: #CC0033;
}
/*=Comments
--------------------------------------------------------------*/
#comments
{
margin-top: 30px;
}
article.comment
{
display: block;
}
#respond input[type=text]
{
display: block;
width: 60%;
}
#respond textarea
{
display: block;
margin: 0 0 1em;
width: 80%;
}
#respond .form-allowed-tags
{
clear: both;
width: 80%;
}
#respond .form-allowed-tags code
{
display: block;
}
/*=Widgets
--------------------------------------------------------------*/
.widget
{
display: block;
margin-top: 20px;
}
.widget ul
{
margin: 5px 10px 10px;
padding: 10px;
}
.widget ul li
{
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid #222;
}
.widget ul li a, .widget ul li a:visited
{
text-decoration: none;
color: #999;
}
.widget-area .widget_search
{
overflow: hidden;
}
.widget-area .widget_search input
{
float: left;
}
/*=Footer
--------------------------------------------------------------*/
#colophon
{
padding: 10px;
background: #000000;
}
/*Gallery
---------------------------------------------------------------*/
#content .gallery .gallery-item img
{
border:0;
width: 350px;
height: 175px;
padding: 0;
}
#content .gallery .gallery-item {
width:100%;
margin:0;
text-align:left;
}
#main #content .gallery-caption
{
margin: 0 auto;
font-size: 12px;
}
#main .image-attachment
{
width: 100%;
}
.entry-attachment img
{
width:650px;
padding: 0;
margin: 0;
}
.attachment-thumbnail {
width:350px;
height:175px;
margin-left: 20px;
margin-bottom: 20px;
}

Maybe you are zoomed in. Check this by pressing Ctrl+0.

I have fixed the problem. I was using rem based font sizes. However for some strange reason I was getting gigantic font size on size occations, some other times it was working as expected.
Reverting to tradition px sizes, did do the trick. I know it is not the best solution, but I got the job done.

web responsive design using tapestry

I want to build a web responsive website with tapestry, I add the meta data in the head section of the .tml file and used the css for the responsive design. However it doesn't work at all. I tested with an elastic youtube video, which should match the width of the page. I post here the .tml file and the css.
The .tml file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div class="header">
<div class="logo">
<h1>
<t:pagelink page="index">com.example:tutorial1</t:pagelink>
version ${appVersion}
</h1>
</div>
<div class="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div class="page">
<!-- start sidebar -->
<div class="sidebar">
<ul>
<li class="search" style="background: none;">
</li>
<li>
<t:alerts/>
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div class="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
<p class="legal">
©2012 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
The css file:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.jpg) repeat-x;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
form {
margin: 0;
padding: 0;
}
input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1692B8;
}
a:hover {
text-decoration: none;
}
/* Header */
div.header {
height: 42px;
}
div.logo h1, div.logo p {
float: left;
text-transform: lowercase;
}
div.logo h1 {
padding: 0px 0 0 40px;
}
div.logo p {
margin: 0;
padding: 14px 0 0 4px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.logo a {
text-decoration: none;
color: #D0C7A6;
}
div.menu {
float: right;
}
div.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div.menu li {
display: block;
float: left;
height: 42px;
}
div.menu a {
display: block;
padding: 8px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #CEC5A4;
}
div.menu .last {
margin-right: 20px;
}
div.menu a:hover {
color: #FFFFFF;
}
div.menu .current_page_item A {
text-decoration: underline;
}
div.menu .current_page_item a {
}
/* Page */
div.page {
padding: 40px 40px 0 40px;
}
/* Content */
div.content {
margin-right: 340px;
}
.post {
margin-bottom: 10px;
}
.post .title {
border-bottom: 1px #999999 dashed;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 30px 30px 0 0px;
text-transform: lowercase;
font-weight: normal;
font-size: 2.2em;
}
.post .title p {
margin: 0;
padding: 0 0 10px 0px;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding: 20px 0px 20px 0px;
}
.post .links {
margin: 0;
padding: 0 30px 30px 0px;
}
.post .links a {
display: block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
.post .links a:hover {
}
.post .links .more {
width: 128px;
height: 30px;
background: url(images/img03.jpg) no-repeat left center;
}
.post .links .comments {
width: 152px;
height: 30px;
background: url(images/img04.jpg) no-repeat left center;
}
/* Sidebar */
div.sidebar {
float: right;
width: 300px;
margin-top: 30px;
}
div.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
div.sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
div.sidebar li ul {
padding: 0 30px 40px 30px;
}
div.sidebar li li {
margin: 0;
padding-left: 20px;
}
div.sidebar h2 {
padding: 30px 30px 5px 10px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
}
div.sidebar DIV.sidebar-content {
width: 265px;
margin-left: 10px;
padding-bottom: 1px;
}
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.video-container iframe,
div.video-container object,
div.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Search */
li.search {
padding: 20px 30px 40px 30px;
}
li.search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}
li.search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
li.search br {
display: none;
}
/* Categories */
div.sidebar div.categories li {
background: url(images/img12.gif) no-repeat left center;
}
/* Calendar */
div.calendar_wrap {
padding: 0 30px 40px 30px;
}
div.calendar table {
width: 100%;
text-align: center;
}
div.calendar thead {
background: #F1F1F1;
}
div.calendar tbody td {
border: 1px solid #F1F1F1;
}
div.calendar #prev {
text-align: left;
}
div.calendar #next {
text-align: right;
}
div.calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
div.calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}
/* Footer */
div.footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}
div.footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}
div.footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}
div.footer a:hover {
color: #FFFFFF;
}
div.footer .rss {
background: url(images/img18.gif) no-repeat left center;
}
div.footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
div.footer .legal a {
padding: 0;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Thank you very much.

You are missing a closing brace. It goes between the 2nd and 3rd line below.
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {

As Lee Meador already pointed out you are missing the closing braces for your footer declaration, also the background markup is incomplete. it should be something like this (deduced from your other markup):
div.footer .css {
background: url(images/img20.gif) no-repeat left center;
}
#media .... etc.

Instead of rolling your own, I would suggest looking at an existing library that already is responsive, and then customizing it, so save yourself some time instead of re-inventing the wheel.
Bootstrap is one such excellent library. You can also integrate it easily into Tapestry using the tapestry-bootstrap integration project. I have used this combo on multiple responsive applications, some exclusively for mobiles, and have been quite successful.

Please Help Me With My Footer

I'm using Dreamweaver to edit a template that I got for my new business website. I'm having a problem with the footer and I'm not sure if it's an HTML issue, a CSS issue, or an I'm just an idiot issue. No matter what I do the footer extends down too far. Here's a screenshot of what I'm talking about:
http://tinypic.com/r/t9ccbn/4
Also, I would like the links to line up with the column above it like the contact info and the copyright info do. Here is the HTML:
<div id="footer">
<div>
<div id="links">
<div class="showroom">
<p><br>
9501 W. Sahara Ave. #2082
<br> Las Vegas, NV 89117
<br> 702-409-5373<br>
info#briarpatchfurniture.com
</p>
</div>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li> Gallery</li>
<li>Contact</li>
<p id="footnote">
© Copyright TIBISI, Inc 2013. All Rights Reserved.
</p>
</div>
</div>
And here is the CSS:
/*------------------------------ FOOTER ------------------------------*/
#footer {
background-color: #e2b241;
border-top: 1px solid #fff;
padding: 28px 0 14px;
}
#footer p {
color: #4b3a33;
font-size: 12px;
line-height: 18px;
margin: 0;
}
#footer > div {
width: 940px;
margin: 0 auto;
padding: 0 10px;
}
#footer .posts {
float: left;
height: 300px;
width: 302px;
padding: 0;
}
#footer .posts li {
width: 276px;
margin: 0 0 30px;
padding-left: 10px;
}
#footer .posts p a {
line-height: 24px;
margin: -3px 0 3px;
}
#links {
background: url(../images/separator-dark.png) repeat-x left bottom;
color: #4b3a33;
display: inline-block;
width: 940px;
padding: 0 0 20px;
}
#links h4 {
color: #241b18;
font-family: "Oswald";
font-size: 15px;
font-weight: normal;
line-height: 24px;
margin: 0 0 12px;
padding-left: 10px;
text-transform: uppercase;
}
#links > div {
float: left;
background: url(../images/separator-dark-vertical.png) repeat-y left top;
height: 300px;
padding-left: 20px;
}
#links .showroom {
background: none;
width: 293px;
padding-left: 0;
padding-right: 15px;
}
#links .showroom h4 {
padding-left: 0;
}
#links .showroom img {
margin-bottom: 12px;
}
#links .showroom p {
font-size: 13px;
margin: 0;
}
#links .showroom p em {
color: #fff;
display: block;
font-style: normal;
margin: 0 0 20px;
}
#links .showroom p a {
color: #4b3a33;
display: block;
}
#links .showroom p a:hover {
color: #241b18;
}
#newsletter {
background: url(../images/separator-dark.png) repeat-x left bottom;
width: 284px;
margin: 0 0 16px 6px;
padding: 0 0 20px;
}
#newsletter h4 {
padding-left: 0;
}
#newsletter input {
color: #4b3a33;
height: 26px;
line-height: 26px;
width: 269px;
border: 3px solid #af8112;
margin: 0 0 6px;
padding: 0 4px;
*margin-left: -6px; /** Needed for IE7 **/
}
#newsletter input.btn2 {
color: #fff;
width: 83px;
border: 0;
padding: 0px 0 2px;
}
#connect a {
display: inline-block;
height: 33px;
margin: 0 10px;
}
#connect a.facebook {
background-position: -46px -112px;
width: 33px;
}
#connect a.googleplus {
background-position: -46px -153px;
width: 34px;
}
#connect a.twitter {
background-position: -46px -194px;
width: 40px;
}
#connect a.facebook:hover {
background-position: 0 -112px;
}
#connect a.googleplus:hover {
background-position: 0 -153px;
}
#connect a.twitter:hover {
background-position: 0 -194px;
}
#footer ul.navigation {
float: right;
display: block;
line-height: 24px;
list-style: none;
margin: 0;
padding: 0 12px 0 0;
}
#footer ul.navigation li {
float: left;
margin-left: 15px;
}
#footer ul.navigation li:first-child {
margin-left: 0;
}
#footer ul.navigation li a {
color: #ab7d0f;
font: 11px/24px "Oswald";
text-decoration: none;
text-transform: uppercase;
}
#footer ul.navigation li a:hover {
color: #241b18;
}
#footer #footnote {
color: #ab7d0f;
font: 11px/24px "Oswald";
margin: 0;
text-transform: uppercase;
}
Any help will be appreciated.
http://jsfiddle.net/GCqfE/

Your use of line-height in all of the child elements of the footer is causing the footer to expand downwards vertically, and without a height value given for the parent div they are free to expand. Either change the line-heights to smaller values, or prescribe a height for the parent footer div like so:
#footer {
background-color: #e2b241;
border-top: 1px solid #fff;
padding: 28px 0 14px;
height:100px;
}
I've updated your jsFiddle: http://jsfiddle.net/GCqfE/1/

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

CSS overriding styles not allowing display of subsequent div? - html

Related

Style issues with web page, works in firefox, not in ie or chrome

CSS and page layout won't display in ie but will work fine in chrome and firefox

HTML page randomly showing gigantic fonts

web responsive design using tapestry

Please Help Me With My Footer

Categories

Resources