alignment issues in IE7

css is below for a website, where in IE9 compatability view for IE7 standards the right side bar seems to be pushed over and down by about 20 pixels. I can't figure out why. Any help is appreciated. Live site can be found here: http://buffalolacrosse.com/calendar.cfm

Additionally, IE8 doesn't show the facebook plugin properly and I haven't seen a good reason why the iframe wouldn't work.


html, body {
margin: 0;
padding: 0;
line-height: 1em;
height: 100%;
}

body{
background: #000f42;
}

img {
margin: 0;
padding: 0;
border: 0;
}

li {
margin: 0;
padding: 0;
border: 0;
}

div#container {
position: relative;
background: #000f42;
width: 950px;
margin: 0 auto;
padding: 0px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

div#header {
width: 950px;
padding: 0;
clear: both;
background: #ccc;
}

.logo {
float: left;
width: 950px;
z-index: 100;
}

div#navigation {
float: left;
width: 950px;
background: #003300;
}

div#loginform {
clear: both;
width: 942px;
color: #e8e8e8;
font-size: 11px;
background-color: #000;
height: 24px;
line-height: 24px;
padding: 4px;
}

#loginform input {
width: 80px;
margin-bottom: 6px;
font-size: 10px;
}

#loginform input.submit {
width: 60px;
background: #003366;
color: #e5e5e5;
margin-bottom: 6px;
}

#loginform a {
color: #e8e8e8;
}

div#contentarea {
padding-bottom: 5em; /* bottom padding for footer */
width: 950px;
background-color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#contentarea a {
color: #333;
text-decoration: underline;
}
.contentbig {
clear: both;
width: 920px;
}

.contentone {
width: 680px;
background: #fff;
margin-left: 0px;
padding: 10px;
float: left;
}

.paststories
{
width: 680px;
background: #fff;
padding: 0px;
float: left;
border: 1px #000f42 solid;
}

.paststory
{
float: left;
width: 150px;
background: #fff;
padding: 10px;
}

.htd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color: #000f42;
color: #ffffff;
padding: 2px;
}

.head {
font-size: 11px;
font-weight: bold;
background-color: #000f42;
color: #ffffff;
margin: 0;
padding: 0;
}
.accounttable {
padding: 2px;
border: 1px #000f42 solid;
}

.accounttd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #000000;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttdgray {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #e5e5e5;
color: #666666;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttdblue {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ffffcc;
color: #000000;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttd_pay {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ccffcc;
color: #000000;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttd_green{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ccffcc;
color: #009900;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttd_red {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ffcccc;
color: #990000;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.account_htd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color: #666666;
color: #ffffff;
padding: 2px;
}

.account_notify {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #FFFF99;
color: #000000;
padding: 2px;
border-bottom: 0px #cccccc solid;
}

.contenttwo {
width: 220px;
font-size: 10px;
float: right;
padding-right: 0px;
padding-top: 10px;
}

.contenttwo a {
font-size: 10px;
}

.contenttwo .outer {
float: right;
width: 220px;
background-color: #fff;
color: #333;
margin: 0px 15px;
text-align: left;
padding: 2px;
border: 1px solid #000f42;
margin-bottom: 10px;
}

.contenttwo .outer a {
color: #333;
text-decoration: none;
}

div#push {
clear: both;
width: 950px;
height: 40px;
}

div#footerarea {
clear: both;
width: 950px;
padding-bottom: 20px;
background: #000f42;
color: #e5e5e5;
}

#footerarea a {
color: #e5e5e5;
}

.footersponsors {
width: 950px;
font-size: 12px;
background-color: #fff;
float: left;
text-align: left;
padding: 0;
}

.footersponsors .titlep {
font-size: 18px;
padding: 6px;
border-width: 2px 0 2px 0;
border-color: #000f42;
border-style: solid;
}

.footersponsors ul {
list-style: none;
margin: 0 auto;
padding: 10px 0 10px 0px;
clear: both;
}

.footersponsors li {
margin-right: 15px;
float: left;
text-align: center;
}

.footersponsors a {
color: #fff;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}


.footerone {
clear: both;
width: 640px;
font-size: 12px;
float: left;
text-align: left;
padding: 6px;
}


.footertwo {
width: 260px;
float: right;
text-align: left;
}

.title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000f42;
}

.notify {
background: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: #FFFF00 solid 2px;
padding-top: 10px;
padding-bottom: 10px;
}

.notify_red {
background: #ffcccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: #990000 solid 2px;
padding-top: 10px;
padding-bottom: 10px;
}

.notify_green {
background: #ccffcc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: #009900 solid 2px;
padding-top: 10px;
padding-bottom: 10px;
}

.notify_blue {
background: #99ccff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: #333333 solid 2px;
padding-top: 10px;
padding-bottom: 10px;
}

.red {
color: #990000;
}

.green {
color: #006633;
}

.trh {
background: #a3cccc;
}


form {margin: 0px 0px 0px 0px;}

You box model is broken.

Box model (http://css-tricks.com/the-css-box-model/)says an element can only contain another element of equal or lesser size and that included paddings, margins, and borders left and right.

If you remove the padding-right from contentone, then remove the width: 220px; from contenttwo, it should work.

Also not sure what those two <div class="push"/> are for, especially since they are empty, useless and not formed correctly, but you can remove them. Unless you have some plan for them in the future, in which case you close a div with a full closing tag....</div>

Thanks for your reply. I got rid of the div push tags (originally there for an absolutely positioned footer at the bottom of the page) and took out the width as suggested, now everything in the right column is pushing contentone over. It works in IE7 but not IE8, IE9 , and other modern browsers. you can view the updated page here (http://buffalolacrosse.com/calendar.cfm) Thanks!

PS - if there's a more correct way to do this, please let me know. I am new-ish to CSS and picking up things as I go along.


html, body {
margin: 0;
padding: 0;
line-height: 1em;
height: 100%;
}

body{
background: #000f42;
}

img {
margin: 0;
padding: 0;
border: 0;
}

li {
margin: 0;
padding: 0;
border: 0;
}

div#container {
position: relative;
background: #fff;
width: 950px;
margin: 0 auto;
padding: 0px;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

div#header {
width: 950px;
padding: 0;
clear: both;
background: #ccc;
}

.logo {
float: left;
width: 950px;
z-index: 100;
}

div#navigation {
float: left;
width: 950px;
background: #003300;
}

div#loginform {
clear: both;
width: 942px;
color: #e8e8e8;
font-size: 11px;
background-color: #000;
height: 24px;
line-height: 24px;
padding: 4px;
}

#loginform input {
width: 80px;
margin-bottom: 6px;
font-size: 10px;
}

#loginform input.submit {
width: 60px;
background: #003366;
color: #e5e5e5;
margin-bottom: 6px;
}

#loginform a {
color: #e8e8e8;
}

div#contentarea {
padding-bottom: 5em; /* bottom padding for footer */
width: 950px;
background-color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#contentarea a {
color: #333;
text-decoration: underline;
}
.contentbig {
clear: both;
width: 920px;
}

.contentone {
width: 680px;
background: #fff;
margin-left: 0px;
padding: 10px 0px 10px 10px;
float: left;
}

.paststories
{
width: 680px;
background: #fff;
padding: 0px;
float: left;
border: 1px #000f42 solid;
}

.paststory
{
float: left;
width: 150px;
background: #fff;
padding: 10px;
}

.htd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color: #000f42;
color: #ffffff;
padding: 2px;
}

.head {
font-size: 11px;
font-weight: bold;
background-color: #000f42;
color: #ffffff;
margin: 0;
padding: 0;
}
.accounttable {
padding: 2px;
border: 1px #000f42 solid;
}

.accounttd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #000000;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttdgray {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #e5e5e5;
color: #666666;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttdblue {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ffffcc;
color: #000000;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttd_pay {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ccffcc;
color: #000000;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttd_green{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ccffcc;
color: #009900;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.accounttd_red {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #ffcccc;
color: #990000;
padding: 2px;
border-bottom: 1px #cccccc solid;
}

.account_htd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color: #666666;
color: #ffffff;
padding: 2px;
}

.account_notify {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #FFFF99;
color: #000000;
padding: 2px;
border-bottom: 0px #cccccc solid;
}

.contenttwo {
display: block;
font-size: 10px;
float: right;
padding-right: 0px;
padding-top: 10px;
}

.contenttwo a {
font-size: 10px;
}

.contenttwo .outer {
float: right;
width: 220px;
background-color: #fff;
color: #333;
margin: 0px 15px;
text-align: left;
padding: 2px;
border: 1px solid #000f42;
margin-bottom: 10px;
}

.contenttwo .outer a {
color: #333;
text-decoration: none;
}

div#push {
clear: both;
width: 950px;
height: 40px;
}

div#footerarea {
clear: both;
width: 950px;
padding-bottom: 20px;
background: #000f42;
color: #e5e5e5;
}

#footerarea a {
color: #e5e5e5;
}

.footersponsors {
width: 950px;
font-size: 12px;
background-color: #fff;
float: left;
text-align: left;
padding: 0;
}

.footersponsors .titlep {
font-size: 18px;
padding: 6px;
border-width: 2px 0 2px 0;
border-color: #000f42;
border-style: solid;
}

.footersponsors ul {
list-style: none;
margin: 0 auto;
padding: 10px 0 10px 0px;
clear: both;
}

.footersponsors li {
margin-right: 15px;
float: left;
text-align: center;
}

.footersponsors a {
color: #fff;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}


.footerone {
clear: both;
width: 640px;
font-size: 12px;
float: left;
text-align: left;
padding: 6px;
}


.footertwo {
width: 260px;
float: right;
text-align: left;
}

.title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000f42;
}

.notify {
background: #FFFFCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: #FFFF00 solid 2px;
padding-top: 10px;
padding-bottom: 10px;
}

.notify_red {
background: #ffcccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: #990000 solid 2px;
padding-top: 10px;
padding-bottom: 10px;
}

.notify_green {
background: #ccffcc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: #009900 solid 2px;
padding-top: 10px;
padding-bottom: 10px;
}

.notify_blue {
background: #99ccff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: #333333 solid 2px;
padding-top: 10px;
padding-bottom: 10px;
}

.red {
color: #990000;
}

.green {
color: #006633;
}

.trh {
background: #a3cccc;
}


form {margin: 0px 0px 0px 0px;}