Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

    Code:
    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;}

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You box model is broken.

    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>
    Teed

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 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.

    Code:
    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;}


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •