CSS problem in IE6

Question

I've been around and around in circles with this one, almost finished my web page and all good in most browsers except the inevitable IE6! I've been doing some research and found out there is a problem with padding and margin in CSS, and have tried to no avail. Is there someone out there who might be able to help?

www.theclubnetwork.co.uk

body {
    background: #ebf5fc url('../Images/body_bg.jpg') repeat-x 0 0;
    margin: 0px 0px 0px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: blue;
        margin:0;
        padding:0;    
}
#env {
    position: relative;
    margin: 0 auto;
    width: 934px;
    background: url('../Images/env_bg.jpg') repeat-y 0 0;
    margin-top: 10px;
    padding: 125px 0 0 0;
}
#main {
    width: 934px;
    background:  transparent url('../Images/main_bg.jpg') no-repeat 0 0;
    z-index: 10;
}
#promo {
    position: absolute;
    top: 0;
    left: 0;
    width: 934px;
    background: url('../Images/promo_bg2.jpg') no-repeat 0 0;
}
#bor {
    position: relative;
    margin: 0 auto;
    top: 5px;
    width: 633px;
    background: url('../Images/bor_bg.gif') repeat-y 0 0;
    padding: 0 0 0 0;
}
#foot {

    height: 49px;
    width: 912px;
    background: url('../Images/foot_bg.png') no-repeat 0 100%;
    padding: 0 11px 8px 11px;
    color: #506273;
    font-size: 11px;
    clear: both;
    text-align: center;
}
h4 {
    font-family: Arial, Helvetica, sans-serif;
}
#foot a {
    font-weight: normal;
    color: #506273;
    padding-left: 0;
    background-image: none;
}
#foot div {
    padding: 8px 0 0 10px; /*top right bottom left*/
    line-height: 16px;
}
#logo {
    position: relative; 
    float: left; 
    width: 279px;
    padding-right:20px;
    top:20px;
    left: 10px; 
    text-align: center;
    z-index: 6;
    background-color: #ffa500;
}
#slow {
    position: relative; 
    text-align: center;
    z-index: 6;
}
.nav {
    position: relative; 
    float: left;
    width: 125px;
    height: 125px;
    background-color: #fff;
    text-align: center;
    z-index: 25;
}
* html #welcome {
    margin-left: 0px;
}
#welcome {
    position: relative;
    margin-left: 2px;
    float: left;
    width: 297px; 
    height: 150px; 
    background-color: #fff;
    z-index: 6;
    text-align: center;
    vertical-align: middle;
}
a.slogan {
    width: 150px;
    color: blue;
    font-size: 17px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.mainslogan {
    width: 150px;
    color: #ffa500;
    font-size: 48px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.sloganmiddle {
    width: 150px;
    color: #ffa500;
    font-size: 21px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.bottomslogan {
    width: 150px;
    color: #fff;
    font-size: 21px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
}
a.welcome_text {
    position : relative;
    top: 10px;
    color: blue;
    font-size: 30px;
    vertical-align: top;
    z-index: 6;
    display: block;
}
.our_web {
    position : relative;
    color: #ffa500;
    top: 10px;
    font-size: 20px;
    padding-bottom:7px;
    display:block;
}
a.form {
    font-size: 13px;
    padding-top:10px;
    padding-bottom: 10px;
    color: blue;
}
a.first_web {
    position : relative;
    color: #0d7acf;
    top: 0px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0px;
    text-align: middle;
    display: inline;
}
p.statement {
    position : relative;
    top: 0px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 0px;
    text-align: justify;
}
p.allocated {
    text-align: right;
}
* html .clubreg {
    padding-right: 0px;
    padding-left: 0px;
}    
.clubreg {
    position: relative; 
    float: left; 
    width: auto; 
    height: auto; 
    background-color: #fff;
    overflow: hidden;
    z-index: 10;
    padding-top: 12px;
    padding-right: 13px;
    padding-left: 12px;
    text-align: left;
}
.memreg {
    position: relative; 
    float: left; 
    height: auto; 
    background-color: #fff;
    overflow: hidden;
    text-align: center;
    z-index: 10;
    padding-bottom: 10px;
    padding-top: 12px;
    text-align: left;
}
.clubform {
    position: relative; 
    float: left; 
    width: auto; 
    height: auto; 
    background-color: #fff;
    z-index: 10;
    padding-bottom: 10px;
    padding-top: 12px;
    padding-right: 12px;
    padding-left: 12px;
    text-align: left;
}
div.box335 { 
    width: 220px; 
    float: left;
    background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0; 
}
div.box335in { 
    background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
    padding: 0px 0px 5px 0px; /*top right bottom left*/
}
div.box220 { 
    width: 220px;
    float: left;
    padding-top: 5px;
    background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0; 
}
div.box220in { 
    background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left; 
    padding: 0px 0px 30px 30px; /*top right bottom left*/
}
div.box267 { 
    width: 267px;
    float: left;
    padding-top: 5px;
    background: transparent url('../Images/box267_bg_top.gif') no-repeat 0 0; 
}
div.box267in { 
    background: transparent url('../Images/box267_bg_btm.gif') no-repeat bottom left; 
    padding: 0px 0px 10px 10px; /*top right bottom left*/
}
#news {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 287px; 
    height: 165px; 
    background-color: #fff;
    z-index: 6;
    text-align: left;
    color: #0d7acf;
    padding-left: 12px;
    padding-right: 0px;
    padding-top: 13px;
}
div.box454 { 
    width: 454px;
    height: auto;
    float: left;
    background: transparent url('../Images/box454_bg_top.gif') no-repeat 0 0; 
}
div.box454in { 
    background: transparent url('../Images/box454_bg_btm.gif') no-repeat bottom left;
    padding: 10px 10px 30px 10px; /*top right bottom left*/
}
div.box609 { 
    width: 609px;
    min-height: 340px;
    height: auto;
    float: left;
    background: transparent url('../Images/box609_bg_top.gif') no-repeat 0 0;
    padding: 0px 0px 15px 0px; /*top right bottom left*/
}
div.box609in { 
    background: transparent url('../Images/box609_bg_btm.gif') no-repeat bottom left; 
    min-height: 478px;
    padding: 0px 40px 10px 15px; /*top right bottom left*/
}
div.member_title {
    color: blue;
    width: 100%;
    padding-top: 10px;
    padding-right: 40px;
    padding-bottom: 10px;
    font-weight: bold;
    text-align: center;
}
div.regreasons {
    text-align: center;
    font-weight: bold;
    padding-left: 10px;
    padding-right:10px;
}
div.box145 { 
    width: 145px;
    float: left;
    padding-top: 5px;
    padding-right: 0px;
    background: transparent url('../Images/box145_bg_top.gif') no-repeat 0 0;
}
div.box145in { 
    background: transparent url('../Images/box145_bg_btm.gif') no-repeat bottom left; 
    min-height: 100px;
    padding: 0px 10px 0px 10px; /*top right bottom left*/
}
* html .advertising {
    left: 0px;
}
div.advertising {
    position: relative; 
    float: right;
    width: 150px;
    height: 168px;
    left: -2px; 
    padding-right: 5px;
    padding-left: 0px;
    padding-bottom: 0px;
    text-align: left;
    padding-top: 12px;
    background-color: #fff;
}
.memreg2 {
    position: relative; 
    float: left; 
    width: auto; 
    height: auto; 
    background-color: #fff;
    overflow: hidden;
    text-align: center;
    z-index: 10;
    padding-bottom: 0px;
    padding-top: 12px;
    padding-left: 12px;
    text-align: center;
}
li {
    padding-bottom: 8px;
}
div.buttonreg {
    text-align: center;
    vertical-align:bottom;
}
#faq {
    position : relative;
    top: 0px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 20px;
    text-align: justify;
    text-align:center;
}
* html #sales {
    margin-left: 0px;
}
#sales {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 297px; 
    height: 367px; 
    background-color: #666666;
    z-index: 6;
    text-align: center;
    color: #fff;
}
#joining {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 297px; 
    height: 535px; 
    background-color: #666666;
    z-index: 6;
    text-align: center;
    color: #fff;
    overflow: auto;
}
#control_panel {
    position: relative; 
    float: left; 
    margin-left: 2px;
    width: 297px; 
    height: 480px;
    background-color: #666666;
    z-index: 6;
    text-align: center;
    color: #fff;
    overflow: auto;
}
#minimnu {
    position : relative;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    text-align: left;
}
#focusContainer {
    width: 190px;
    margin: auto;
    background-color: #71707f;
    padding: 17px 17px 10px 10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}
#focusContainer a {
    display:block;
    background-color: #383737;
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    border: 1px solid #000000;
    width: 100%;
    margin-bottom: 5px;
    font-weight: 400;
}
#focusContainer a:hover {
    background-color: #ffa500;
    color: blue;
}
#m1 a, #m2 a, #m3 a,#m4 a {
    padding-left: 10px;
    color: #fff;
    width: 100%;
    background-color:#5d5d5d;
    margin-top: -5px;
    padding-top: 5px;
    padding-left: 5px;
    border: 1px solid #000000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.span {
    padding-left: 10px;
    color: #fff;
    width: 150px;
    background-color:#5d5d5d;
    margin-top: -5px;
    padding-top: 15px;
    border: 1px solid #000000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
a#selected, a#selected:hover {
    background: #ffa500;
    color: blue;
}
a.newshead  {
    text-decoration: underline;
}
#leftside {
    position: relative;
    float: left;
}
.rbsworldpay {
    position: relative;
    display: block;
    width = 100%;
    text-align: center;
    margin-left: 2px;
}
#clubinfo {
    position: relative; 
    float: left; 
    width: 225px; 
    height: 120px; 
    background-color: blue;
    overflow: hidden;
    color: #000000;
    text-align: center;
    z-index: 11;
    text-align: left;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
}
#meminfo {
    position: relative; 
    float: left; 
    width: 225px; 
    height: 120px; 
    background-color: yellow;
    overflow: hidden;
    color: #000000;
    text-align: center;
    z-index: 11;
    text-align: left;
    padding-left: 10px;
    padding-right: 0px;
    padding-bottom: 10px
}
.moreinfo {
    float: right;
    padding-right: 10px;
    padding-top: 10px;
}
#bottomlink {
    color: #0d7acf;
    height: 48px;
    padding: 0px;
}
a.club_details {
    color: blue;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 12pt;
    text-decoration: underline;
    text-align: center;
}

Answer 1

Make sure your HTML has a DOCTYPE, to trigger IE6's standards mode. That's likely to eliminate a lot of CSS craziness (and possibly introduce some other craziness, but there will be less of it and it'll happen in all browsers).

Answer 2

In response to the only question in your post
"Is there someone out there who might be able to help?"

Yes.

Answer 3

A couple of things that I saw right away.

You don't have a font size set for your h2 in the div #sales and IE is using a bigger font size. IE6 uses width and height as suggestions and will expand divs to fit the content.

Your .box335in has a width of 220px however your .member_title div has a width of 220px plus a right padding of 40px for a total width of 260px. Once again IE6 is expanding the .box335in to fit the wider width.

Answer 4

I wouldn't worry about making things compatible with IE6 anymore.

Answer 5

To avoid having trouble with different browser behaviour, I'd suggest you use a CCS reset.

Eric Meyer explains well and offers a free example at meyerweb. That won't solve all your problems, but would certainly be a good start.