Media queries seem to be ignored, even with viewport declaration - css

the tablet/phone media query styles that I have set on my site seem to be ignored, even though I have a viewport declaration in the <head> and the #media styles are at the bottom of the stylesheet—so they can't be over-ridden by desktop styles. I'm sure it's something very simple, but I've tried everything that I can think of. The styles are ignored both on mobile and on desktop when the browser window is resized. Oddly enough, the responsive menu works fine...but the rest of the site is riddled with uncomfortable padding, floats, and margins without the mobile styles. Any help is appreciated!
#media screen and (max-width: 768 px){
body { }
#container {padding: 0;}
#content, #content-archive, #content-full, #content-blog, #content-images, #content-sitemap {padding: 0px;} #content h2, #content-full h2, #content-blog h2 {margin-left: 0px;}
#header { padding: 0.5em; overflow:auto; }
#header #logo img {max-width: 100%;}
.archive #widgets, .page #widgets {width:100%;padding 20px;}
.grid, .grid-right {float:none;}
#scaleContainer {display: none;}
#mobilefeatured {display:block; width: 100%; margin-top:17.5%; zoom:58%;}
#mobilecarousel-hype-container { max-width: 100%; }
.page .featuredimg {display:block; }
.archive .featuredimg, .single .featuredimg, .search .featuredimg {display:block; }
.top-menu {display:none;}
.top-menu li a, .top-menu li:first-child a { }
.menu li, .footer-menu li, .sub-header-menu li {float:none;text-align:left; }
.page .menu-item-6820, .single .menu-item-6820 { display:none; }
#mobile-nav-instruct {display: none;} #search {float:none; text-align: left; margin:auto;}
#search input[type="text"] {text-align: left;}
#wrapper {clear:none; position:relative;}
.post-entry {padding: 20px; }
.post-entry h1, .post-entry h2, .post-entry h3, .post-entry h6, .post-entry div h1, .post-entry div h2, .post-entry div h3, .post-entry div h6, .entry h2 { padding-left: 0; }
.post-entry h6, .post-entry div h6 {margin-bottom: 10px; }
.summary {width:100%; margin:0; }
.thumbnail-wrapper {width: 100%; height:auto;}
.summary img {max-width:100%; height:auto; }
.summary h2 {width:100%; margin: 10px auto;}
.dates-artists {width:100%; margin:0;}
.rep {width:100%; margin:0; } #photo-rep {float:none; width: 100%;}
#vitals {float:left; clear: both; width: 100%; margin-left: 0px; margin-top:20px; -webkit-border-radius:0px; -moz-border-radius:0px; background-color:#fff; border: none; border-radius:0px; font-size: 100%; padding: 5px 0px !important; }
.info-buy { }
.programPricing { clear:both; padding-left:0px; margin-top:-20px; margin-left:0; }
#share .dates, .buy-dates-wrapper .dates { padding-left: 2em; width:75%; line-height: 1.5em;}
.home .widget-wrapper { height: auto; padding: 1em; border:none; background-color: #fff; font-size: 14px; }
.desc {float:right; clear:none;}
.home .newsblog {height: auto; padding: 1em; border:none; background-color: #fff; font-size: 14px; }
.widget-wrapper { background-color:#fff; border:none; font-size:14px; height: auto; padding: 1em;}
.bio { width:100%; }
.roster { width:100%; } #googleCalEmbed { display: none; } #googleEmbedLink {display:block;} #seating table { border: none; width:100%; margin:0%;}
#seating td {border: none;}
#seatingMobileHint {display:block;}
.sponsors { clear:both; padding: 0px; text-align:center; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; border-top: 1px solid #d6d6d6;}
.sponsors h6 { margin-top: 1.6em; }
.sponsors hr {background:#eee; border:none; clear:both; color:#f9f9f9; float:none; height:1px; margin:5px 0px; width:100%; }
.sponsors a img.alignnone { margin:5px 0px; padding:0;float: none; }
#footer .footernav {display:none; }
#footer { text-align:left; } #footer .widget-wrapper { padding:0; }
#footer h6, h6.title-concertdate { color:#fff; padding: 0 8%; margin-bottom:1em; text-shadow: none;}
#mobilecal { display:block; } #mobilecal span.calnk { opacity: 0; }
.home #widgets #cal, .page #widgets, .archive #widgets { display:block; }
.mobilecontact {display:block;} #footer .social-icons { text-align:left; }
.copyright { text-align: center; } /* The homepage featured events slider for retina displays */
#mobilefeatured { display:block; zoom:50%; }
}


Your media query is malformed:
#media screen and (max-width: 768 px)
There must not be a space between the number and the unit:
#media screen and (max-width: 768px)

Related

CSS positioning/size

I am using #media all and (max-width: 600px) {} in my css for responsive menu, the thing is that it does not show correctly.
I want the orange fill the green space.. and turn the green space to transparant of course. Basically it's just a size/position problem.
CSS:
#media all and (max-width: 600px) {
.example-header .container {
width: auto;
height:auto;
margin:0 auto;
padding:auto;
}
/*Zwarte MENU balk */
a.menu-link {
display: block;
color: #fff;
background-color: #333;
text-decoration: none;
padding: 19px 10px;
width:auto;
height:auto;
margin:0 auto;
padding:auto;
margin-bottom:2em;
}
.menu {
border-top: 10px solid #333;
border-bottom:10px solid #333;
height:13.2em;
margin:0 auto;
padding:auto;
width:100%;
background-color:blue;
}
.menu ul {
width:auto;
height:auto;
margin:0 auto;
padding:auto;
}
.menu > ul {
height:auto;
margin-top:;
background-color:TRANSPARANT;
}
.menu li, .menu > ul > li {
width:100%;
height:auto;
margin:0 auto;
padding:0px;
background-color:green;
}
.menu li a {
color: #000;
display: inline;
border-bottom: 1px solid #333;
position: relative;
height:auto;
margin:0 auto;
padding:auto;
background-color:orange;
}
}

It looks like a padding-related issue, try setting it to 0 instead of auto for .menu ul. HTML would be helpful though.

My guess is that the anchor elements' should be display: block; instead of display: inline;. And possibly their margin should also be just 0 instead of 0 auto
Can't say much without the HTML.

print in firefox makes fonts bigger

I used a css file for print, everything is good in IE and Chrome but in FireFox font's are much bigger!!!! i don't know what's wrong with firefox.
Can anybody tell me what's wrong?
here is my css file
*,:before,:after {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html,
body
{
width: auto;
height: auto;
float: none !important;
margin:10px 20px;
padding:0;
background-color: #fff;
font-family: "B Yagut", "B Titr";
line-height: 220%;
font-size:18pt;
font-weight:bold;
direction:rtl;
}
#header,
#footer,
#nav,
#section,
legend,
#bottom-controls,
#bottom-details,
#tabs-2,
#tabs-3 {
display: none;
}
#main {
width: auto;
float: none !important;
padding: 0;
height:auto;
}
p { line-height:220%; font-size:18pt; font-weight:bold;}
strong { line-height:220%;}
#tabs, fieldset, #tabs-1 { width: auto; border-style:none; margin:0; padding:0; line-height:200%; font-size:18pt;
font-weight:bold;}
#tabs ul, #cssmenu{
display: none;
}
thanks everybody.

CSS: Can't make space for sidebar

I'm trying to have my ads show up on the the right side of a page. I have set the width of the content & navigation to 75%.
div.comments, div.navigation {
margin-left:1.5em;
margin-right:1.5em;
width: 75%;
}
#content {
margin: 1em 0px;
width: 75%;
float: left;
padding-top: 1.1em;
}
the side bar is set to 200px. Which is much less than 25% on most screen.
But the content still is taking up some extra space display here in the orange.
I cannot figure where this is coming from. I've spent the last hour using google developer tool to resolve it. Below is style.css. The page can be found at gazzetesm.com. The Our Partner's Page style is what I am trying to achieve.
style.css
/*
Theme Name: Gonzo Daily
Theme URI: http://greatgonzo.net/projects/gonzodaily
Description: Gonzo Daily is flexible-width three-column theme for WordPress. It has a newspaper-like front page, featuring three columns of text for browsers that support CSS columns (currently only Firefox, more to come)<br /><br />Wordpress Widgets ready.<br /><br />The font used in the header is Gputeks by gluk, licensed under SIL Open Font License.
Version: 1.4
Author: Milen Petrinski - Gonzo
Author URI: http://greatgonzo.net/
Tags: black, two-columns, three-columns, right-sidebar, flexible-width
*/
/**
* Eric Meyer's Reset stylesheet - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*/
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,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
/*
* Created by gluk with FontForge 1.0 (http://fontforge.sf.net)
* This Font Software is licensed under the SIL Open Font License, V.1.1.
* This license is available with a FAQ at: http://scripts.sil.org/OFL.
* Copyright (c) 2008, gluk,(gluksza#wp.pl) with Reserved Font Name Gputeks.
*/
#font-face {
font-family: "Gputeks";
src:url(fonts/Gputeks-Regular.ttf);
font-style: normal;
font-weight: normal;
}
/*
* Created by gluk with FontForge 1.0 (http://fontforge.sf.net)
* This Font Software is licensed under the SIL Open Font License, V.1.1.
* This license is available with a FAQ at: http://scripts.sil.org/OFL.
* Copyright (c) 2008, gluk,(gluksza#wp.pl) with Reserved Font Name Gputeks.
*/
#font-face {
font-family: "Gputeks";
src:url(fonts/Gputeks-Bold.ttf);
font-style: normal;
font-weight: bold;
}
/**
* GLOBALS
*/
html {
background: #fff;
text-align:center;
}
body {
background: #fff;
text-align:justify;
margin:0 auto 0 auto;
padding:0;
max-width:95%;
line-height:1;
color:black;
font-family:Georgia,"Lucida bright","Times new roman",Georgia,"lucida bright",serif;
font-size:11pt;
}
h1, h2 {
font-size:1.8em;
text-align:left;
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
font-weight:normal;
font-style:normal;
}
h3 {
text-align:left;
font-size:1.2em;
font-weight:bold;
line-height:1.1em;
font-style:italic;
margin-bottom: 1.4em;
}
h4 {
font-size: 1em;
line-height:1.5em;
font-weight:normal;
font-style:normal;
}
hr {
display:none;
}
a {
text-decoration:none;
color:#633B18;
font-weight:inherit;
font-style:inherit;
}
a:visited {
color:#633B18;
}
a:hover {
text-decoration:underline;
color:#AE3000;
/*text-shadow: #666 2px 2px 5px;*/
}
a:focus {
color:#AE3000;
/*outline-width:.1em;*/
}
p {
line-height:1.5em;
margin-bottom:1.5em;
}
li {
line-height:1.5em;
}
ul, ol {
margin-bottom:10px;
list-style:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
caption, th, td {
text-align:left;
font-weight:normal;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content:"";
}
blockquote, q {
quotes:"" "";
}
blockquote {
margin:0;
padding:1.15em .5em 1.25em 1.5em;
color:#999;
font-family:Georgia,"Lucida bright","Times new roman",serif;
font-size:1.2em;
font-style:italic;
line-height: 1.25em;
}
blockquote * {
line-height: 1.25em;
margin-bottom:0;
}
abbr {
border-bottom: 1px dotted #633B18;
}
img {
border:none;
}
strong {
font-weight:bold;
font-style: inherit;
}
em {
font-style:italic;
font-weight:inherit;
}
.alignleft {
float:left;
margin: 0 1em 1em 0;
}
img.alignleft {
float:left;
margin-right:1em;
}
img.alignright {
float:right;
margin-left:1em;
}
img.alignright {
float:right;
margin-left:1em;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
code {
font-family:courier,"courier new", monospace;
}
pre {
display:block;
font-family:courier,"courier new", monospace;
font-size:1em;
line-height:1.5em;
background-color:#eeeeee;
padding:1.5em 1.5em;
margin-top:0em;
margin-bottom:1.5em;
overflow:auto;
}
/**
* HEADER
*/
#header {
padding: 0 1.5em;
text-align:left;
border-bottom:2px solid #AE3000;
}
#header h1, #header p.title {
color:#AE3000;
font-size:2.2em;
font-weight:bold;
font-family: Gputeks, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
text-align:left;
line-height:2;
/*letter-spacing: 0.1em;*/
margin:0;
}
#header h1 a, #header p.title a {
color:inherit;
text-decoration:none;
}
#header div.description {
color:#999;
text-transform:uppercase;
float:right;
margin-top: -2em;
}
/**
* MAIN NAVIGATION
*/
ul#navigation {
float:right;
margin:0;
margin-top:-2em;
}
ul#navigation li {
display: inline-block;
font-size: 2em;
font-weight:bold;
font-family: Gputeks, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Bitstream Vera Sans", "Liberation Sans", "DejaVu Sans", Verdana, "Verdana Ref", sans-serif;
margin:0;
margin-left:.5em;
line-height:1;
text-transform:lowercase;
word-spacing: -.2em;
}
ul#navigation li a {
}
ul#navigation li a:hover {
text-decoration:none;
}
/**
* First post on index page
*/
div.latest {
padding: 2em 1.5em 1.5em 1.5em;
margin-bottom:1em;
border-bottom:2px solid #AE3000;
}
div.latest h2 {
font-size: 5em;
color: #000;
line-height: 1em;
}
div.latest h2 a:link,
div.latest h2 a:visited,
div.latest h2 a:active {
color:inherit;
}
div.latest p.details_small {
margin:0;
}
div.latest div.post_content {
margin-top:1.5em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1%;
}
div.post_content > p:first-child:first-line {
font-variant: small-caps;
font-weight:bold;
}
div.post_content > p:first-child:first-letter {
display:block;
float:left;
font-size:2.5em;
line-height: 1em;
padding:0;
margin:0;
padding-top: .2em;
margin-right: .2em;
}
div.latest img {
padding:2px;
background:#AE3000;
border:10px solid #ccc;
max-width:90%;
height: auto;
}
/**
* FIRST MAIN COLUMN
*/
#content {
margin: 1em 0px;
width:79%;
float:left;
padding-top:1.1em;
}
#content.home {
padding-top:0em;
background: none;
border:none;
}
#content.single, #content.archive {
padding-top:0em;
}
#content div.post {
margin: 0 0em 0em .5em;
padding: 0em 1em 1em 1em;
color:#000;
}
#content div.list {
margin: 0 0em 1.6em .5em;
padding: 0em 1em 0em 1em;
color:#000;
border:none;
background:none;
}
#content div.post div.more {
padding-top:.2em
}
#content h1 {
color: #000;
font-size:3em;
line-height: 1em;
margin: 0em 0em .5em .5em;
}
#content div.post h1 {
font-size:3em;
margin: 0em 0em .5em 0em;
}
#content div.list h2 {
font-size:1.4em;
line-height:1.1em;
padding-top:.1em;
margin-bottom:.3em;
}
#content div.post h2 {
margin-bottom: .5em;
}
#content div.post h3 {
margin-bottom: 0;
}
#content div.post h2,
#content div.post h3,
#content div.post h4
{
color: #000;
}
#content div.post h2 a:visited,
#content div.post h3 a:visited,
#content div.post h4 a:visited
{
color:#633B18;
}
#content div.post h2 a:hover,
#content div.post h3 a:hover,
#content div.post h4 a:hover
{
color:#AE3000;
}
#content p.tag-cloud {
margin-top:3em;
}
#content p.tag-cloud a {
color: #000;
}
#content ul, div.latest ul {
list-style-type:square;
padding-left:3em;
}
#content ol, div.latest ol {
list-style-type:decimal;
padding-left:3em;
}
#content img {
padding:2px;
background:#AE3000;
border:10px solid #ccc;
max-width:90%;
margin:10px;
}
#content img.noborder {
border:0px;
padding:0;
background: none;
}
.navigation div {
line-height:1.5em;
margin-bottom:1em;
}
.navigation .prev {
float:left;
width:40%;
}
.navigation .next {
float:right;
width:40%;
text-align:right;
}
.details_small {
font-size:1em;
color:#999;
margin:0;
}
div.list .details_small {
margin-top:-0.2em;
}
div.list p {
margin-bottom:0;
}
.details_small a {
color:#999;
text-decoration:underline;
}
p.date {
text-align:right;
font-size:1em;
color:#999;
}
span.gravatar {
display:block;
float:left;
}
span.gravatar img {
border: 5px solid #999;
}
div.column {
float:left;
}
div.left {
padding-right:0;
width:40%;
}
div.right {
padding-left:0;
padding-right:0;
width:48%;
}
/**
* COMMENTS
*/
div.comments, div.navigation {
margin-left:1.5em;
margin-right:1.5em;
width: 75%;
}
h2#comments{
margin-top:.2em;
margin-bottom:1.5em;
padding-bottom:0em;
font-weight:normal !important;
}
ol.commentlist {
list-style-type: none !important;
list-style-position: inside;
padding-left:0px !important;
margin-left:0px;
padding-bottom:.1em;
}
.commentlist li {
margin-bottom:1.5em;
padding-bottom:.5em;
padding-top:.8em;
border-top:1px solid #999;
}
.commentlist li.author {
border-top:1px solid #AE3000;
}
.commentlist li p {
margin-bottom:0em;
}
.commentlist li p.comment-data {
margin-bottom:1.5em;
}
.commentlist li p.comment-author {
font-size:1.5em;
line-height:1em;
font-family:Georgia,"Lucida bright","Times new roman",serif;
font-style:italic;
/*font-weight:bold;*/
/*font-variant:small-caps;*/
margin-bottom:0em;
}
.commentlist ul li,
.commentlist ol li {
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
.commentlist ul {
padding-left:1.5em;
list-style-type:square;
}
.commentlist ol {
padding-left:1.5em;
/*list-style-type:lower-alpha;*/
}
p.nocomments {
padding-bottom:.5em;
border-bottom:1px solid #999;
font-weight:bold;
font-size:1.5em;
line-height:1em;
}
.allowed-tags {
display:none;
}
.commentlist li span.comment_number {
display:none;
float:right;
font-size:40px;
color: #999;
margin-top:.3em;
font-family: Verdana, Helvetica, sans-serif;
}
.commentlist li span.avatar {
display:block;
float:right;
margin:-2px 0px 0 0;
width:60px;
height:60px;
text-align:right;
}
#content .commentlist li span.avatar img.avatar {
display:block;
width:48px;
height:48px;
padding: 2px;
border: 1px solid #999 !important;
background: #eee;
}
#content .commentlist li.author span.avatar img.avatar {
border: 1px solid #AE3000 !important;
}
h2#respond {
margin-bottom:1.5em;
}
/**
* FORMS
*/
#commentform {
margin-bottom:1.5em;
padding-bottom:0em;
border-bottom:1px solid #999;
}
textarea {
width:99%;
}
/**
* RIGHT SIDEBARS
*/
.sidebar {
padding:0px;
float:right;
margin: 0.5em 0 0 0;
}
#sidebarFrame {
float:right;
padding:1em 0px;
width: 200px;
margin: 0 auto;
display: block;
}
.sidebar{
width: 98%;
margin: 0 auto;
}
.sidebar h2 {
font-size:1.3em;
line-height:1.2em;
border-bottom: 1px solid #000;
margin-bottom:.2em;
}
.sidebar ul {
margin-right:1.5em;
}
.sidebar ul li {
margin: 0;
margin-bottom:0.4em;
padding-bottom:.5em;
}
.sidebar h2 {
margin:.2em 0 -.2em 0;
border: none;
padding-bottom:.2em;
}
.sidebar ul {
margin:0 1.5em .2em 0;
padding:0 0 .5em 0;
}
.sidebar ul li {
border:1px solid #999999;
padding:1em 10px .5em 10px;
margin:0;
margin-bottom: 1em;
line-height:1.5em !important;
}
.sidebar ul li:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.sidebar ul li ul,
.sidebar ul li ul li {
border: none;
padding:0;
margin:0;
}
.sidebar img {
float:left;
margin:.3em .5em 0 0;
}
.sidebar .vcard img.photo {
border: 1px solid #999;
background: #eee;
}
.sidebar ul,
.sidebar ul li ul li,
.sidebar ul li ul li ul {
border-bottom:0;
margin:0;
padding-bottom:0;
}
.sidebar ul li ul {
font-size:.9em;
}
.sidebar ul li ul li,
.sidebar ul li ul li {
border-bottom:1px dotted #999;
line-height: 1.7em;
padding:.1em 0;
}
.sidebar ul li ul li:last-child {
border-bottom:none;
}
.sidebar ul li ul li ul {
margin-bottom:0;
padding-left:10px;
border-left:1px solid #aaa;
}
.sidebar a {
/*color: #999;*/
}
.sidebar a:hover {
/*color: #99000e;*/
}
/**
* FOOTER
*/
#footer {
padding:10px;
border-top:2px solid #AE3000;
clear:both;
text-align:left;
font-size:.9em;
}
#footer p {
margin-left:67%;
padding-left:.5em;
padding-top:1.5em;
}
#footer p:first-child {
float:left;
width:65%;
margin-left:0px;
padding-left:1em;
padding-right:0;
padding-top:1.5em;
}
ins.adsbygoogle
{
display:block !important;
margin
}

Your #content says it's width is set # 79%.
Instead of floating three containers to the left (which is causing this issue) I would put them all in another container and float it to the left:
<div class="floatme">
<div id="#container">..</div>
<div class="..">..</div>
<div class="..">..</div>
</div>
or remove the float from the top 3 and just float the comment to the right.

Try moving your HTML around a little. In particular, move the div with id "sidebarFrame" immediately after the div with id "content". When I did this in FireBug, the layout shows up as you describe it.

Your columns are not aligning because your .comments and .navigation elements are block level elements, which will not allow the .sidebarFrame to fill in the empty space. try putting those two elements inside of the left floated #content section, or wrap #content, .comments and .navigation in a left floated element.

Can't get the menu bar to scale to screen size

I am trying to scale a menu bar according to screen size. I've tried float, #media etc. but it hasn't worked properly. Full screen on my 13' looks great. However, as soon as I scale it down, the menu bar shifts to the right, but the page elements are fine. Menu is at the bottom #navsite.
CSS
* {
margin:0;
padding:0;
}
html{
min-width:770px;
}
body{
background:white url(candy/background.png) 0 0 repeat;
text-align:center;
}
/*=====[ Set up container divs and add background tiles ]=====*/
#pageheadContainer,
#contentContainer,
#footContainer{
width:100%;
}
#pageheadContainer{
background:transparent url(candy/pageheadBackground.png) 0 100% repeat-x;
}
#contentContainer{
background:#F7F7F7 url(candy/contentBackground2.png) 50% 100% repeat-y;
float:left;
}
#footContainer{
background:transparent url(candy/footBackground.png) 0 0 repeat-x;
clear:both;
}
#pagehead,
#content,
#foot{
width:770px;
margin:0 auto;
position:relative;
text-align:left;
}
#pagehead{
height:130px;
}
#foot{
height:150px;
}
#pagehead{
background:transparent url(candy/pageheadBackground2.png) 0 100% no-repeat;
}
#content{
background:transparent url(candy/contentBackground.png) 0 0 no-repeat;
min-height:300px;
_height:300px;
}
#foot{
background:transparent url(candy/footBackground2.png) 100% 0 repeat-x;
}
#article{
width:450px;
float:left;
padding:40px 0 20px 0;
margin-left:25px;
}
#subContent{
display:inline;
width:180px;
float:left;
padding:25px 0 20px 0;
margin-left:30px;
color:#8B725A;
font-size:.9em;
}
#foot ul{
position:absolute;
top:45px;
}
#foot li{
list-style-type:none;
}
#foot #foot1{
width:200px;
position:absolute;
left:300px;
}
#foot #foot2{
width:200px;
position:absolute;
left:570px;
}
#foot #pageTop{
position:absolute;
left:482px;
top:-40px;
}
#foot #pageTop a{
display:block;
width:26px;
height:26px;
text-indent:-9999px;
text-decoration:none;
background:transparent url(candy/pageTop.png) 0 0 no-repeat;
float:left;
}
body{
font:normal 62.5%/1.8em Arial, Helvetica, sans-serif;
}
#content ul{
margin:0.8em 0 0.6em 1em;
padding-left:1em;
list-style-type:square;
}
ol{
margin:0.8em 0 0.6em 2em;
padding-left:1em;
list-style-type:lower-roman;
}
blockquote{
margin:0.8em 0 0.6em 1em;
padding-left:1em;
font-style:italic;
border-left:4px solid #E2D7CF;
}
img{
padding:2px;
border:1px solid #F2F2F2;
}
#content{
font-size:1.25em;
}
p{
margin:0.3em 0 0.6em 0;
}
a{
color:#9D6141;
font-weight:bold;
text-decoration:none;
}
a:hover{
background:#9D6141;
color:#FFE;
}
#article{
line-height:1.7em;
color:#635141;
}
h1,
h2,
h3,
h4{
font-family:Georgia, Times New Roman, Times, serif;
}
h2{
color:#98533B;
margin-bottom:.5em;
line-height:1.7em;
font-size:1.7em;
}
h3{
margin:0.8em 0 0.6em 0;
font-size:1.3em;
}
h4{
margin:0.8em 0 0.6em 0;
font-size:1.1em;
}
#subContent h2{
font-size:1.3em;
}
#subContent h3{
font-size:1.1em;
}
/* menu navigation */
.navsite {width: 845px; height: 35px; z-index: 100;
margin-bottom: 3px; margin-left: 155px;}
/* menu bar */
#headermenu {width: 800px; height: 35px; z-index: 100; position: absolute}
#headermenu ul {
text-align: center;
list-style: none;
line-height: 20px;
font-size: small;
}
#headermenu a {
display: block;
width: 8em;
color: white;
text-decoration: none;
padding: 0.3em;
white-space: nowrap;
}
#headermenu li {
float: left;
padding: 0;
width: 8em;
background-color: #B67357; /* medium brown */
}
#headermenu li ul { /* second level lists */
position: absolute;
z-index:500;
left: -999em;
height: auto;
width: 8em;
border-width: 0.25em;
margin: 0;
}
#headermenu li:hover ul, #nav li.shfhover ul {
left: auto;
z-index:100;
}
#content {
clear: left;
color: #ccc;
}
#media screen and (max-width: 770px)
{
#headermenu {
width:770px;
margin:0 auto;
position:relative;
text-align:left;}
}

So your problem is you're absolutely positioning the menu from the left of the browser. So when you resize it it moves.
If you want the whole site to be centered but fluid you can use the following
width:100%; max-width:400px; margin:auto;
Here's a Fiddle

Fixed header positioning in Wordpress

Trying to mess with this Imbalance wordpress theme http://wpshower.com/demo/?theme=imbalance and having fixed the positioning of the header I can't figure out why the main page gallery is scrolling over the header on all browsers. Any help would be very appreciated http://www.pensandneedles.co.uk
note: I've hidden the gallery on the home page until i can correct this
.css stylesheet
*/
body {
background-color:#FFF;
line-height:1.4 !important;}
a:link, a:visited {
text-decoration:underline;
color:#002C57;}
a:hover {
color:#F23B35;}
#outer {
font-family:Arial, Helvetica, sans-serif;
color:#000;
font-size:12px;
width:945px;
margin:0 auto;}
p {
margin-bottom:15px !important;}
blockquote {
font-style:italic !important;
margin-left:70px !important;}
table {border-collapse:separate;border-spacing:0;}
table, td, th {vertical-align:middle;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
thead th {background:#FF3706;}
th, td, caption {padding:4px 10px 4px 5px;}
tr.even td {background:#FF3706;}
tfoot {font-style:italic;}
td#next {text-align:right;}
caption {background:none repeat scroll 0 0 #EEEEEE;}
th, td, caption {padding:4px 10px 4px 5px;}
caption, th, td {font-weight:strong;text-align:left;}
#top {
height: 85px;
padding-left: 10px;
padding-top:27px;}
#logo {
/* background-attachment: scroll;
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: left top;*/
height: 90px;
width: 600px;}
#logo a {
position:fixed;
margin-left:295px;
display:block;
height: 95px;
width: 345px;
border-bottom:solid 1px #F23B35;}
#menu {
position:fixed;
margin-left:340px;
margin-top:-90px;
width:100%x;
display:block;
height: 0px;
text-color:red;}
#menu #navicons {
width:237px;
height:50px;
float:right;}
#menu #navicons li {
float:right;}
#menu #navicons a {
height:50px;
line-height:50px;
padding-left:20px;
background-image: url(images/top-icons.png);
background-attachment: scroll;
background-repeat: no-repeat;
margin:0 7px;
text-decoration:none !important;
font-size:11px;
display:block;}
#menu #navicons a:hover {
background-image: url(images/top-icons-hover.png);}
#menu #navicons a#subscribe {}
#menu #navicons a#twitter {
background-position: left -19px;}
#menu #navicons a#facebook {
background-position: left -58px;}
#cats {
padding-left: 10px;}
#cats li {
float: left;
line-height: 50px;
margin-right: 25px;}
#cats li a {
float: left;
line-height: 50px;
text-decoration:none !important;}
#cats li a:hover, #cats li a.active {
border-bottom:solid 1px #ff3706;}
#categories, #archives, #search {
width:945px;
overflow:hidden;
padding:0;
border-bottom:solid 1px #ff3706;}
#categories ul li, #archives ul li {
font-size:11px;
float:left;
width:293px;
padding:0px;
line-height:20px;
height:20px;}
#categories ul li a, #archives ul li a {
text-decoration:none !important;
display:block;
width:293px;
height:20px;
border-top:solid 1px #FFF;
border-bottom:solid 1px #FFF;
padding:0 10px;}
#categories ul li a span, #archives ul li a span {
float:right;}
#categories ul li a:hover, #archives ul li a:hover {
border-top:solid 1px #FF3706;
border-bottom:solid 1px #FF3706;}
#main {
overflow:hidden;}
#error {
font-size:21px;
font-weight:normal;
line-height:1.2;
margin:15px 15px 45px 15px;}
.li_container {
padding-top:80px;}
#categories .li_container, #archives .li_container {
padding-top:0px;}
li.article {
margin-bottom:15px;
position:relative;}
.li_cont1, .li_cont2 {
margin-right:15px;}
.mcol2 {
margin-top:15px;
margin-bottom:15px;}
#categories .li_container ul, #archives .li_container ul {}
.article ul, .article ol {
margin-bottom:15px;
list-style:square inside none;}
.single .article ul, .single .article ol {
margin-bottom:15px;
margin-left: 165px;
list-style:square inside none;}
.single .article ul ul, .single .article ol ol,
.single .article ul ul ul, .single .article ol ol ol{
margin-bottom:15px;
margin-left: 30px;
list-style:square inside none;}
.article ul {
list-style:square inside none;}
.article ul ul, .article ul ul ul {
margin-left: 15px;}
.article ol {
list-style-type: decimal;}
.article img {
/*margin-bottom:15px;*/}
.article p a, .commentlist p a {
border-bottom:1px solid #FF3706;
text-decoration:none;}
.article p a:hover, .commentlist p a:hover {
border-bottom: 1px solid;
text-decoration:none;
color: #FF3706;}
li.article .postmetadata {
color:#555;
font-size:11px;
margin-top:20px;}
li.article .postmetadata a {
color:#FF3706 !important;}
li.article h2 {
font-size:21px;
line-height:1.2;
margin-bottom:15px;
font-weight:normal;}
li.article h2 a {
text-decoration:none !important;}
.preview {
position:relative;}
.article-over {
position:absolute;
left:0;
top:0;
padding:15px;}
.article .article-over {
display:none;}
#sidebar ul, #sidebar ol {
margin-left: 0px;}
#sidebar .article:hover img, .li_container .article:hover img {
filter:alpha(opacity=10);
opacity: 0.1;
/* -moz-opacity:0.1; */}
.article:hover .article-over {
display:block;}
.single #sidebar {
width:305px;
padding-left:30px;
float:right;
padding-bottom:15px;
padding-top:15px;}
.single #sidebar h2 {
font-size:17px;
margin-bottom:15px;
margin-left: 0px;}
.single #sidebar li {
padding-bottom:15px;}
.single #sidebar li li {
padding:0px;
border:none;}
.single #sidebar img {
margin-bottom:15px;
filter:alpha(opacity=50);
opacity: 0.5;
/* -moz-opacity:0.5; */
position:relative;}
#sidebar .article {
margin:0px;
padding-bottom:0px !important;}
#sidebar .article p {
margin:0;}
#sidebar .article-over {
margin:0;
width:275px;}
#sidebar .article-over .postmetadata {
margin:0;
border-bottom:none;
padding-left:0px!important;}
#sidebar .article h2 {
font-size:21px;
font-weight:normal;
line-height:1.2;
margin-bottom:15px; }
#sidebar .article:hover img {
filter:alpha(opacity=10);
opacity: 0.1;
/* -moz-opacity:0.1; */}
#sidebar #recent-posts li a {
text-decoration:none !important;
border-bottom:1px solid #FF3706;
text-decoration:none; }
#sidebar #recent-posts li, #sidebar #get-recent-comments li {
margin-bottom:10px;}
#sidebar li li {
padding:0px;
border:none;}
#sidebar .post-date {
font-size:11px;
color:#555;}
#sidebar #get-recent-comments a {
text-decoration:none !important;
font-weight:bold;
border-bottom:1px solid #FF3706;
text-decoration:none;}
.single .article {
padding:0 0 15px 0;}
h1 {
font-size:23px;
font-weight:normal;
margin-top:15px;
margin-bottom: -15px;
color:F23B35;}
.single h1 {;
font-size:18px;
font-weight:normal;
margin-bottom:15px;
margin-left: 160px;
margin-top:15px;}
.single .article h2, .single .article h3,
.single .article h4, .single .article h5, .single .article h6 {
margin-left: 160px;
clear: both; }
.single .article h2 {
font-size: 20px;
font-weight: normal;
padding-bottom: 13px;
clear: both;}
.single .article h3 {
font-size: 17px;
font-weight: normal;
padding-bottom: 11px;
clear: both;}
.page h2, .page h3, .page h4, .page h5, .page h6 {
clear: right;}
.page h2 {
font-size: 40px;
padding-bottom:15px;}
.page h3 {
font-size: 17px;
padding-bottom:15px}
.single .article p {
margin-bottom:15px;
margin-left: 160px;}
.article h5 {
float:left;
width:145px;
font-size:11px;
color:#555555;
font-weight:normal;}
.single .postmetadata {
float:left;
width:140px;
margin-top:5px;
font-size:11px;
color:#555;
clear:both;}
.single .postmetadata a {
color:#ff3706 !important;
text-decoration:none !important;}
.single .article .postmetadata {
width:auto;
padding-left: 160px;
float:none;
padding-bottom:15px;}
.page h1 {
display:none;
font-size:53px;
font-weight:normal;
margin-bottom:15px;
float:left;
width:145px;
margin-top:15px;}
.page .article {
padding-top:15px;
padding-left: 160px;margin-left:-160px;}
#searchform #s {
border:0;
padding:18px 10px 16px;
font-size:23px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
color:#555555;
border:solid 1px #EEE;
margin:15px 0;
width:923px;}
#searchform #s:focus, #searchform #s:hover {
border:solid 1px #ff3706;}
#searchform #searchsubmit {
border:0;
background-color:#eee;
height:40px;
line-height:40px;
padding:0 10px;
cursor:pointer;}
#searchform #searchsubmit:hover {
background-color:#ff3706;
color:#FFF;}
#nav {
height:49px;
margin-top:-1px;}
#nav #navright a {
line-height: 49px;
float: right;
padding:0 10px;
text-decoration:none !important;
color:#000 !important;}
#nav #navleft a {
line-height: 49px;
float: left;
padding:0 10px;
text-decoration:none !important;
color:#000 !important;}
.wp-pagenavi a, .wp-pagenavi span {
line-height:25px;
padding:5px 7px;
margin-right:3px;}
.wp-pagenavi .current {
border-bottom:solid 1px #FF3706;}
.wp-pagenavi a {
color:#555;
text-decoration:none !important;}
.wp-pagenavi a:hover {
color:#555;
border-bottom:solid 1px #FF3706;}
.nextpostslink, .previouspostslink {
display:none;}
#footer {
height: 55px;
padding: 25px 430px 0;
border-top:solid 1px #eeeeee;
Margin-bottom:20px;
clear: both;}
#footer a:link, #footer a:visited {
text-decoration:none;
border-bottom:solid 0px #ff3706;}
#footer #copyright {
float:left;}
/* WP image classes */
.entry-content img {
margin: 0 0 1.5em 0;
}
.alignleft, img.alignleft {
margin-right: 1.5em;
display: inline;
float: left;
}
.alignright, img.alignright {
margin-left: 1.5em;
display: inline;
float: right;
}
.aligncenter, img.aligncenter {
margin-right: auto;
margin-left: auto;
display: block;
clear: both;
}
.alignnone, img.alignnone {
/* not sure about this one */
}
.wp-caption {
margin-bottom: 1.5em;
text-align: center;
padding-top: 5px;
}
.wp-caption img {
border: 0 none;
padding: 0;
margin: 0;
}
.wp-caption p.wp-caption-text {
line-height: 1.5;
font-size: 10px;
margin: 0;
font-style: italic;
}
.wp-smiley {
margin: 0 !important;
max-height: 1em;
}
blockquote.left {
margin-right: 20px;
text-align: right;
margin-left: 0;
width: 33%;
float: left;
}
blockquote.right {
margin-left: 20px;
text-align: left;
margin-right: 0;
width: 33%;
float: right;
}
.gallery {
clear: none!important;
float: right;
position:relative;}
.gallery img {
border: 0px!important;}
.entry {
clear:both;}
.photogalleria {
width: 490px;}
div.photogalleria > ul.gallery_list {
margin-left: 75px;}
.page .article .photogalleria {
width:100%!important;}
#twitter_update_list a {
color:#FF3706;
text-decoration:none;
display: inline;}
#twitter_update_list li {
margin-bottom: 25px;}
li#twitter.widget {
padding-bottom:30px;}
.follow {
margin-bottom: 25px;
clear: both;}
.follow a {
background:url("images/larry-shadowed-big.png") no-repeat 6px 3px #fff;
border: 1px solid #FF3706;
color: #FF3706;
text-decoration:none;
margin-top: 15px;
font-weight: bold;
font-size: 12px;
padding: 10px;
padding-left: 50px;}
.follow a:hover {
background-color:#FF3706;
border: 1px solid #FF3706;
color: #fff;}
.attachment img {
display: block;
margin: 0 auto;}
#nav-below .nav-previous {
display: block;
float: left;
margin-left:160px;}
#nav-below .nav-next {
display: block;
float: right;}
.attachment #comments {
clear: both;}
.attachment #respond {
margin-top: 15px;}

Did you try adding z-index:1000; and a background color to #top?

Resources