i use this css code in IE7 and it works great without any problems.
Now in IE11 and chrome the drop down doesn't work i see the main menu and all sub menus together.
need an assistance in that to understand what can be done to fix it.
Thanks.
<div id='cssmenu'>
<ul>
<li class='active'><a href='url'><span>text</span></a></li>
<li class='has-sub'><a href='#'><span>text</span></a></li>
<ul>
<li><a href='url'><span>text</span></a></li>
<li><a href='url'><span>text</span></a></li>
</ul>
body {
background: #4096EE url(images2/img1.jpg) repeat-x;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: small;
color: #333333;
}
h1 {
}
h2, h3 {
margin-top: 0px;
}
h4, h5, h6 {
}
p, ol, ul, dl, blockquote {
}
a {
color: #1B4978;
}
a:hover {
text-decoration: none;
}
/* Header */
#header {
width: 600px;
height: 60px;
margin: 0px auto;
}
#header h1 {
float: left;
margin: 0px;
padding-top: 20px;
font-size: 42px;
letter-spacing: -2px;
}
#header h2 {
float: right;
margin: 10px 0px 0px 0px;
padding-top: 28px;
font-size: 16px;
letter-spacing: -1px;
color: #FFFFFF;
}
#header a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 600px;
height: 30px;
margin: 0px auto;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 120px;
padding: 5px 0px;
text-align: center;
text-decoration: none;
font-weight: bold;
background: #EEEEEE;
}
#menu a:hover {
background: #CCCCCC;
}
/* Content */
#content {
background: #FFFFFF;
width: 600px;
margin: 0px auto;
padding: 2px 0px 0px 0px;
}
#colOne {
float: right;
width: 360px;
margin-top: 20px;
padding-right: 20px;
}
#colTwo {
float: left;
width: 180px;
margin-top: 20px;
padding-right: 20px;
padding-left: 20px;
}
#colTwo ul {
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
}
#content h1 {
background-color: #B2D4F7;
padding: 5px 0px 5px 5px;
color: #173E68;
}
#content h2 {
background-color: #B2D4F7;
padding: 5px 0px 5px 5px;
text-transform: uppercase;
font-size: 16px;
color: #173E68;
}
#content h3 {
color: #2F73B8;
}
/* Footer */
#footer {
width: 600px;
margin: 0px auto;
padding: 3px 0px 0px 0px;
height: 50px;
background: #EEEEEE;
}
#footer p {
margin: 0px;
padding-top: 15px;
text-align: center;
font-size: 11px;
color: #999999;
}
#footer a {
color: #666666;
}
#footer a:hover {
color: #333333;
}
#cssmenu{
border:none;
border:0px;
margin:0px auto;
padding:0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
width:600px;
font-size:14px;
font-weight:bold;
}
#cssmenu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px;
}
#cssmenu li a{
background:#333333 url('seperator.gif') bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#cssmenu li a:hover, #cssmenu ul li:hover a{
background: #2580a2 url('hover.gif') bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
#cssmenu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
background:url('sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
#cssmenu li:hover li a{
background:none;
}
#cssmenu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover, #cssmenu li ul li:hover a{
background:#2580a2 url('hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
#cssmenu p{
clear:left;
}
I'm surprised that HTML works as expected anywhere, but then IE7 is a large pile of bugs.
You have a <ul> as a child of another <ul>, which isn't valid HTML. <ul> can only contain <li> elements. That sub-menu list should be the child of the <li> above it:
<li class='has-sub'><a href='#'><span>text</span></a>
<ul>
<li><a href='url'><span>text</span></a></li>
<li><a href='url'><span>text</span></a></li>
</ul>
</li>
body {
background: #4096EE url(images2/img1.jpg) repeat-x;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: small;
color: #333333;
}
h1 {
}
h2, h3 {
margin-top: 0px;
}
h4, h5, h6 {
}
p, ol, ul, dl, blockquote {
}
a {
color: #1B4978;
}
a:hover {
text-decoration: none;
}
/* Header */
#header {
width: 600px;
height: 60px;
margin: 0px auto;
}
#header h1 {
float: left;
margin: 0px;
padding-top: 20px;
font-size: 42px;
letter-spacing: -2px;
}
#header h2 {
float: right;
margin: 10px 0px 0px 0px;
padding-top: 28px;
font-size: 16px;
letter-spacing: -1px;
color: #FFFFFF;
}
#header a {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 600px;
height: 30px;
margin: 0px auto;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 120px;
padding: 5px 0px;
text-align: center;
text-decoration: none;
font-weight: bold;
background: #EEEEEE;
}
#menu a:hover {
background: #CCCCCC;
}
/* Content */
#content {
background: #FFFFFF;
width: 600px;
margin: 0px auto;
padding: 2px 0px 0px 0px;
}
#colOne {
float: right;
width: 360px;
margin-top: 20px;
padding-right: 20px;
}
#colTwo {
float: left;
width: 180px;
margin-top: 20px;
padding-right: 20px;
padding-left: 20px;
}
#colTwo ul {
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
}
#content h1 {
background-color: #B2D4F7;
padding: 5px 0px 5px 5px;
color: #173E68;
}
#content h2 {
background-color: #B2D4F7;
padding: 5px 0px 5px 5px;
text-transform: uppercase;
font-size: 16px;
color: #173E68;
}
#content h3 {
color: #2F73B8;
}
/* Footer */
#footer {
width: 600px;
margin: 0px auto;
padding: 3px 0px 0px 0px;
height: 50px;
background: #EEEEEE;
}
#footer p {
margin: 0px;
padding-top: 15px;
text-align: center;
font-size: 11px;
color: #999999;
}
#footer a {
color: #666666;
}
#footer a:hover {
color: #333333;
}
#cssmenu{
border:none;
border:0px;
margin:0px auto;
padding:0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
width:600px;
font-size:14px;
font-weight:bold;
}
#cssmenu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px;
}
#cssmenu li a{
background:#333333 url('seperator.gif') bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#cssmenu li a:hover, #cssmenu ul li:hover a{
background: #2580a2 url('hover.gif') bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
#cssmenu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
background:url('sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
#cssmenu li:hover li a{
background:none;
}
#cssmenu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover, #cssmenu li ul li:hover a{
background:#2580a2 url('hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
#cssmenu p{
clear:left;
}
<div id='cssmenu'>
<ul>
<li class='active'><a href='url'><span>text</span></a></li>
<li class='has-sub'><a href='#'><span>text</span></a>
<ul>
<li><a href='url'><span>text</span></a></li>
<li><a href='url'><span>text</span></a></li>
</ul>
</li>
</ul>
</div>
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)
My navigation bar works perfectly fine, any image links work fine, but all text links on my page jump down when I click on them. Most of them jump so far you cannot actually click it.
I also noticed my a:visited links are inheriting the color #000 from somewhere, when they should be #616161. There is no issue when browsing on my Android device, but happens in IE11 and Chrome32.
The HTML is nothing special. Just
Page Name
type links. It has to be something with the CSS.
The CSS:
body {
background-color: #7296d9;
max-width:1000px;
}
#wrapper {
width:auto;
background:url(../images/bg.jpg);
background-repeat:repeat;
margin:4px;
}
#content {
width:98%;
text-align:center;
margin:auto;
}
#paragraph {
width:80%;
font-size:18px;
color: #666;
font-weight:100;
text-align:justify;
margin:10px auto 25px auto;
}
.reviews {
width:80%;
margin:auto;
text-align:justify;
color: #666;
}
p {
margin:10px 0 10px 0;
}
h1 {
line-height:48px;
font-size:36px;
font-weight:bold;
text-align:center;
margin-top:10px;
}
h2 {
line-height:42px;
font-size:24px;
font-weight:bold;
text-align:center;
}
a:link, a:visited {
color: #616161;
text-decoration: underline;
}
a:hover, a:active {
color: #ffffff;
text-decoration: underline;
}
#header {
height:86px;
max-height:86px;
width:98%;
min-width:500px;
position:relative;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
}
#header .left {
float:left;
height:auto;
}
#header .media-header {
float:right;
margin-top:50px;
margin-right:-20px;
}
#menu ul li:hover > ul {
display: block;
}
#menu {
display:table;
width:100%;
background: -webkit-linear-gradient( #d5d5d5, #595959); /* For Safari */
background: -o-linear-gradient( #d5d5d5, #595959); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient( #d5d5d5, #595959); /* For Firefox 3.6 to 15 */
background: linear-gradient( #d5d5d5, #595959); /* Standard syntax */
-webkit-border-radius: 25px;
-o-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
#menu ul ul {
display: none;
}
#menu ul {
height:auto;
font-size: 16px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #cccccc;
text-decoration:none;
list-style: none;
position: relative;
display: table-row;
}
#menu a:link, a:visited {
display:block;
text-decoration: none;
color: #000000;
padding: 8px auto 8px auto;
}
#menu a:hover, a:active {
display:block;
padding:5px;
text-decoration:none;
color: #fff;
}
#menu ul:after {
content: "";
clear:both;
display: block;
}
#menu ul li {
display:table-cell;
width:auto;
}
#menu ul a:link, a:visited {
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
#menu ul a:hover, a:active {
display:block;
padding:5px;
text-decoration:none;
color: #fff;
}
#menu ul ul {
background: #999;
border-radius: 0px;
padding: 0;
position: absolute;
}
#menu ul ul li {
width:auto;
border-top: 1px solid #ccc;
position: relative;
display:block;
}
#menu ul ul li a {
padding: 5px;
text-align:left;
color: #000;
}
#menu ul ul li a:hover {
color: #FFF;
}
#menu ul ul:last-child, nav ul ul:last-child a {
-webkit-border-bottom-right-radius: 10px;
-o-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-o-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
.center {
text-align:center;
}
#reviews {
width:80%;
text-align:justify;
overflow:hidden;
margin:25px auto 25px auto;
}
#reviews img {
position:relative;
float:left;
}
#form {
color: #666;
margin:0px auto 0px auto;
width:350px;
}
#form p {
color: #666;
margin:0px auto 0px auto;
width:350px;
}
.bottombar {
margin:auto;
width:100%;
}
#footer {
display:block;
font-size:12px;
color: #616161;
text-align:center;
width:auto;
margin:5px auto 5px auto;
}
#footer img {
text-align:center;
color: #616161;
width:100%;
margin:5px auto 5px auto;
}
#media-footer {
text-align:center;
margin:10px 0 15px 55px;
}
#media-footer img {
text-align:center;
margin:10px 0 15px 55px;
}
nav ul {
display:none;
}
#minimenu {
display:none;
}
It's because you are adding padding to the element when it is :active:
#menu ul a:hover, a:active {
display: block;
padding: 5px;
text-decoration: none;
color: #fff;
}
It's worth noting that you are repeating the same styling in different instances.
#menu a:hover, a:active {
display: block;
padding: 5px;
text-decoration: none;
color: #fff;
}
Just remove the padding from both declarations and it will work as expected.
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.
I'm having problems trying to figure out why my drop down navigation is settling under where they are suppose to in IE 6 and IE 7. Any help you could give me would be life saving for me.
the css file for the drop down nav
#nav-bar { /*Container Div*/
width: 950px;
height: 45px;
background-image:url(images/nav-bar-background.jpg);
background-repeat: no-repeat;
margin: 7px 0 2px 0;
z-index:999;
position:relative;
padding:0;
}
/*First Level*/
#nav-bar ul {
padding: 10px;
text-align:center;
margin-top: 6px;
}
#nav-bar ul li {
font-family: Arial, Helvetica, sans-serif;
color: #585858;
font-size: 14px;
display: inline;
padding:0 9px 40px 9px;
text-align:center;
}
#nav-bar ul li a {
text-decoration: none;
color: #585858;
}
/*First Level HOVER*/
#nav-bar ul li a:hover {
background-image: url(nav.png);
background-repeat: repeat-x;
}
* html ul#nav-bar li a {
height:37px;
margin-top:-10px;
}
ul#nav-bar>li a:hover, ul#nav-bar>li:hover {
background-position:0px -20px;
height:37px;
text-decoration:none;
}
* html ul#nav-bar li a:hover, * html ul#nav-bar li:hover, * html ul#nav-bar li.hover {
background-position:0px -20px;
height:27px;
}
#nav-bar ul ul {
background-image:url(images/secondtierbg.gif);
display:none;
}
#nav-bar ul ul li {
width:100px;
}
#nav-bar ul ul li a {
line-height:26px;
}
#nav-bar ul li {
font-family: Arial, Helvetica, sans-serif;
color: #585858;
font-size: 14px;
display: inline;
padding: 10px 9px 20px 9px;
text-align:center;
}
#nav-bar ul li a {
text-decoration: none;
color: #585858;
}
#nav-bar li:hover ul, #nav-bar li.hover ul {
display:inline;
position:absolute;
left:0;
top:44px;
width:950px;
height:26px;
margin:0 auto;
padding: 0;
z-index:200;
}
* html #nav-bar li.hover ul {
height:37px;
}
/*
#nav-bar li:hover li {
list-style:none;
display:inline;
color:#fff;
margin:5px 0px 0 20px;
padding:0;
}
*/
#nav-bar li:hover li a, #nav-bar li.hover li a {
color:#fff;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin-top: 10px;
padding: 5px;
text-decoration:none;
}
#nav-bar li:hover li a:hover {
background:none!important;
}
/* THIS IS FOR DROP DOWNS */
#nav-bar ul ul ul {
visibility: hidden;
background-image: none;
display: block;
margin: 0px;
padding: 0px;
list-style: none;
}
#nav-bar ul ul ul li {
display: block;
width:100px;
height: auto;
font-family: Arial, Helvetica, sans-serif;
color:#FFF;
font-size: 11px;
background-color:maroon;
border-style: solid;
border-color: white;
border-width: 1px 1px 0 1px;
padding: 5px 0;
float: none;
clear: both;
}
#nav-bar ul ul #firstrange li {
width:100px;
}
#nav-bar ul ul ul li:last-child {
border-bottom: 1px solid white;
/*background:transparent;*/
}
#nav-bar ul ul ul li a{
cursor:pointer;
line-height:14px;
}
#nav-bar ul ul li:hover ul {
visibility: visible;
left:0;
position:absolute;
margin-top:0;
top:31px;
z-index:220;
}
#nav-bar ul ul li:hover {
position:relative;
}
the link is:
http://www.paysonsecure.com/colonialwarsct/
notes/advice/question:
Think about how you can make this work in two levels.
I had difficulties trying to get the second level to show in IE(Something you might wanna work on too).
Consider having a vertical sub-menu. It's easier for the user to navigate.
Question. How much content is going to go in each year? If not much, maybe you can group years content.
I re-worked the css for the navigation I think its a good start - if you wish.
http://jsfiddle.net/EvRem/1/
Hope this made sense