Homework - Need css-edits help

Hi,

I have a website that has issues in firefox and IE. Our header keeps getting pushed to the right.

URL= (not allowed to post, our domain is diabetessupplies4less)

css-edit file:

#ys_superbar { width: 100% !important }

/**************************
********* VWD STYLES ******
**************************/
body {
background: url(/lib/yhst-86191677430879/bkgnd.gif);
}
#bodycontent {
float: none;
width: 789px;
padding: 0px 10px;
text-align: left;
}
a {
text-decoration:underline;
}
/**** SITE HTML ****/
#top-banner {
padding: 8px;
background-color: $top-banner-bg;
font-size: 16pt;
border: 1px solid #114170;
}
#top-banner a {
color: $top-banner-color;
text-decoration: none;
}
#top-banner a:hover {
color: #B71025;
text-decoration: underline;
}
#site-html {
border:1px solid #114170;
width: 789px;
background:white;
}
#contents .sale-price-bold {
color:red;
}
.savings-pct {
color:#FFB033;
font-weight:bold;
}
#contents .name {
font-weight: normal;
}
#contents .price {
margin: auto;
}
.breadcrumbs {
font-family:arial;
margin:0 0 10px;
}
#contents .horizontal-seperator {
vertical-align:bottom;
}
h1 {
font-size: 14px;
font-weight: bold;
display: inline;
}
h2 {
font-size: 11px;
font-weight: bold;
display: inline;
}
/**** HEADER ****/
#site-header {
padding-bottom:10px;
}
#header-table {
}
#header-top {
background: #FFFFFF;
}
#header-header {
line-height:0;
}
#logo {
}
#header {
margin: auto;
float: center;
background: #FFFFFF;
min-height:102px;
width:840px;
}
.header-text {
font-family:tahoma;
font-size:22px;
padding-top:10px;
padding-right:0px;
text-align:center;
}
#brandmark {
width: auto;
line-height: 0;
margin: auto
}
#brandmark a {
padding: 0px;
}
#top-search-div {
float:left;
}
#searchsubmit {
padding: 0px;
}
#searcharea {
background:transparent;
text-align:center;
padding:0px 0px;
}
#searcharea fieldset {
padding: 0px;
}
.labelfield span {
color: #ffffff;
font-size: 12px;
}
input#query {
border:1px solid black;
margin-left:0px;
font-size:14px;
height:15px;
width:100px;
}
.buttonlabel {
margin-left:7px;
}
#top-nav-div {
float:left;
padding-top:3px;
}
#top-nav-list {
display:block;
list-style:none;
}
#top-nav-list li {
float:left;
display:block;
margin:0;
}
#top-nav-list li a {
margin-right:30px;
font-size:14px;
text-decoration:none;
color:#003366;
font-weight:bold;
font-family:Arial;
}
#top-nav-list li a:visited {
color:#003366;
}
#top-nav-list li a:hover {
color:#B71025;
}
#top-nav-cell{
background:transparent url(/lib/yhst-86191677430879/top-nav.gif) repeat scroll 0 0;
height:32px;
padding:5px 10px 0;
}
/**** LEFT NAV ****/
#site-left-nav {
background-color: #ccd9e5;
width: 150px;
border-right:1px solid #a4b4c1;
border-top:1px solid #a4b4c1;}
input#searchsubmit {
border:medium none;
margin:0 0 0 5px;
vertical-align:top;
}
#bottom-div {
}
#left-nav-table {
}
#left-nav img {
display: block;
}
#below-left-nav {
padding-bottom:30px;
}
.leftnav-button {
margin:5px 0px;
}
.left-navigation {
padding: 5px;
text-align: left;
}
.left-navigation a {
font-size:12px;
text-decoration: none;
color:#323234;
}
.leftnav-sub-buttons a {
font-size:12px;
padding-left: 10px;
display: block;
}
#testimonial {
padding:0px 5px;
color:#323234;
text-align:left;
}
/*** SWITCH ***/
#site-switch {
background-color: #FFFFFF;
width: 560px;
}
#switch-table {
}
#messagetitle {
text-align:left;
margin:10px 0px 0px 0px;
padding:0;
}
#maintype #contents {
float: none;
border: 1;
}
#maintype #caption {
padding:0px;
}
#maintype #messagearea {
margin:10px 0px;
}
#image1 {
padding-right:10px;
}
#image2 {
padding-bottom:8px;
}
#image3 {
}
#image4 {
}
#image5 {
}
#image6 {
}
#billboard li {
margin:0;
display:none;
}
/*** FOOTER ***/
#site-footer {
background:transparent;
height: 68px;
}
#footer {
background:#CCD9E5;
border-top:1px solid #114170;
}
#copyright {
text-align: left;
padding: 10px 5px;
color:#000000;
}
#copyright a {
text-decoration: none;
color:#000000;
}
#footer-links {
padding: 13px 5px 0px;
text-align: left;
font-weight: normal;
color:#000000;
}
#footer-links a {
text-transform:none;
color:#000000;
}
#secure-shopping {
float:right;
margin-right:10px;
margin-top:10px;
}
/*** ITEM PAGE ***/
#contentarea {
width: 787px;
margin:0;
}
#itemtype #caption {
margin: 0 auto;
}
#contentarea #caption {
margin: 10px 0px;
}
#itemtype .itemoption {
font-weight: normal;
}
#item-contenttitle {
display:none;
}
/*** ITEM TABLE ***/
#itemtable {
background-color:#ccd9e5;
border: solid 1px #a4b4c1;
text-align:left;
}
#itemtable td {
padding:5px;
}
#itemtable-header {
background:url(/lib/yhst-86191677430879/itemtable-header.gif) repeat-x;
font-size:12px;
font-weight:bold;
height:34px;
vertical-align:middle;
color:#000000;
}
td#itemtable-header {
padding:0 5px;
}
#itemtable-sku {
border-bottom:1px solid #a4b4c1;
}
#itemtable-price {
border-bottom:1px solid #a4b4c1;
}
#itemtable-sale-price {
font-weight:bold;
border-bottom:1px solid #a4b4c1;
}
#itemtable-you-save {
font-weight:bold;
border-bottom:1px solid #a4b4c1;
}
#itemtable-savings-pct {
color:red;
border-bottom:1px solid #a4b4c1;
font-weight:bold;
}
.itemtable-options {
border-bottom:1px solid #a4b4c1;
}
#itemtable-quantity {
border-bottom:1px solid #a4b4c1;
}
#itemtable-delivery-date {
}
.addtocartImg {
margin: auto;
display:inline;
padding:5px;
}
/*** SECTION PAGE ***/
#section-contenttitle {
padding: 0px;
margin: 0 auto 0px;
}
/*** OTHER ***/

#searchpageHeader {
padding-left:0px;
}

#ys_cpers { display: inline; float:left; margin-left: 10px }



Any help would be appreciated, I can't get it to work properly.

thanks

A table with floated elements inside it...interesting.

Basically your header isn't clearing your top line because of the floated elements within it. You created a ys_clear element, but it doesn't seem to have any clearing styles associated with it.

If it were me, I'd add overflow: hidden to #ys_superbar. That'll make it expand to close the floats, and push the header below.

wow. you are the man.