ie6 issue(s)

Been struggling with this one far too long:

in ie6 the image drops down below the left sidebar. it also hides the footer. I have experimented with “position: relative;” in every possible tag.

Also, my site seems to be suffering from the dreaded peekaboo bug.

Any words of wisdom greatly appreciated.


There are 2 style sheets. This is the general style sheet:

[INDENT][COLOR=Teal]
body {
background-color: #9fa617;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #e4e76c;
text-align: right;
line-height: 120%;
}
hr {
border: none 0;
border-top: 1px dashed #787964;
width: 100%;
height: 1px;
}
.jacqui {
font-size: 120%;
font-weight: bold;
border-bottom: 1px dashed #787964;
line-height: 175%;
}
.resHead {
font-size: 110%;
font-weight: bold;
}
.italic {
font-size: 110%;
font-style: italic;
}
bold {
font-size: 110%;
font-weight: bold;
}
html, body { height: 100%; }
.entryBETA {
margin: 20% auto 20% auto;
background-image: url(assets/entry2.gif);
background-repeat: repeat;
height: 218px;
width: 800px;
}
.sample {
background-image: url(assets/entrybox.gif);
background-repeat: repeat;
}
/*#entry1 {
width: 800px;
height: 150px;
position: relative;
background-image: url(assets/ainter.gif);
background-repeat: no-repeat;
}

#entry1 ul {
margin: 0;
padding: 0;
list-style: none;
}
#entry1 a {
position: absolute;
width: 60px;
height: 60px;
text-indent: -1000em;
}

#entry1 a:hover {

} /
a { text-decoration:none }
a:link { color: #585746; }
.darkfont { color: #585746;}
a:visited { color: #585746; }
a:hover { color: #e4e76c; }
a:active { color: #CC9900; }
#container .pageImOn { color: #e4e76c;}
.twoColLiqLtHdr #header {
padding: 0px;
height: 55px;
}
.twoColLiqLtHdr #logo {
background-color: #9FA617;
background-image: url(assets/ailogo.gif);
background-repeat: no-repeat;
margin: 0px;
padding: 0;
float: left;
width: 225px;
height: 24px;
}
.twoColLiqLtHdr #navbar {
height: 25px;
width: 227px;
margin: 0;
float: right;
background-color: #9FA617;
padding: 8px 0 0 0;
}
.twoColLiqLtHdr #subnav {
height: 11px;
width: 463px;
float: right;
background-color: #9FA617;
position: relative;
margin: 0;
clear: both;
padding: 9px 0 0 0;
}
.twoColLiqLtHdr #subnav2 {
height: 11px;
width: 213px;
float: right;
background-color: #9FA617;
position: relative;
margin: 0;
clear: both;
padding: 9px 0 0 0;
}
.twoColLiqLtHdr #container {
min-height: 100%;
margin-bottom: -72px;
position: relative;
}
.twoColLiqLtHdr #sidebar1 {
width: 120px;
float: left;
margin: 20px 0 0 0;
line-height: 140%;
padding: 20px 18px 10px 18px;
height: 409px;
}
.twoColLiqLtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
}
.twoColLiqLtHdr #mainContent/
, .twoColLiqLtHdr #mainConThum*/ {
margin: 0 20px 0 170px;
padding: 20px 0 20px 0;
}
.twoColLiqLtHdr #mainContent2 {
margin: 0 20px 0 0;
padding: 20px 0 0 0;
}
.twoColLiqLtHdr #mainContent3 {
margin: 0 20px 0 170px;
padding: 20px 0 0 0;
}
.smallboxbg {
background-image: url(assets/box_small.gif);
background-repeat: repeat;
}
.fltrt {
float: right;
margin-left: 8px;
width: auto;
}
.fltlft {
float: left;
margin-right: 8px;
width: auto;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/main nav starts here/
#header ul {
list-style-type: none;
height: 15px;
margin: 1px 0 0 0;
padding: 0;
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#header li {
display: inline;
float: right;
width: auto;
}
#header li a:link, #header li a:visited {
display: block;
text-decoration: none;
padding: 0 0 0 20px;
margin: 0;
}
ul#main_nav a, ul#subnav a, ul#subnav2 a {
display: block;
text-indent: -9999px;
height: 15px;
text-decoration: none;
overflow: visible;
}
li#mn_1 {
position: absolute;
top: 0px;
left: 0px;
width: 62px;
background-image: url(assets/main_nav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 15px;
background-position: 0px 0px;
}
li#mn_2 {
position: absolute;
top: 0px;
left: 92px;
width: 37px;
background-image: url(assets/main_nav.gif);
background-position: -92px 0px;
background-repeat: no-repeat;
height: 15px;
overflow: hidden;
}
li#mn_3 {
position: absolute;
top: 0px;
left: 159px;
width: 48px;
background-image: url(assets/main_nav.gif);
background-position: -159px 0;
background-repeat: no-repeat;
height: 15px;
overflow: hidden;
}
li#mn_1 a:hover {
background-image:url(assets/main_nav.gif);
background-position: 0px -15px;
background-repeat: no-repeat;
}
li#mn_1 a.current, li#mn_1 a.current:active {
background-image:url(assets/main_nav.gif);
background-position: 0px -15px;
cursor: default;
background-repeat: no-repeat;
}
li#mn_2 a:hover {
background-image:url(assets/main_nav.gif);
background-position: -92px -15px;
background-repeat: no-repeat;
}
li#mn_2 a.current, li#mn_2 a.current:active {
background-image:url(assets/main_nav.gif);
background-position: -92px -15px;
cursor: default;
background-repeat: no-repeat;
}
li#mn_3 a:hover {
background-image:url(assets/main_nav.gif);
background-position: -159px -15px;
background-repeat: no-repeat;
}
li#mn_3 a.current, li#mn_3 a.current:active {
background-image:url(assets/main_nav.gif);
background-position: -159px -15px;
cursor: default;
background-repeat: no-repeat;
}
li#sn_1 {
position: absolute;
top: 10px;
left: 0px;
width: 72px;
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 10px;
background-position: 0px -15px;
}
li#sn_1 a:hover {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: 0px -35px;
}
li#sn_1 a.current, li#sn_1 a.current:active {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: 0px -35px;
cursor: default;
}
li#sn_2 {
position: absolute;
top: 10px;
left: 99px;
width: 85px;
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 10px;
background-position: -99px -15px;
}
li#sn_2 a:hover {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -99px -35px;
}
li#sn_2 a.current, li#sn_2 a.current:active {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -99px -35px;
cursor: default;
}
li#sn_3 {
position: absolute;
top: 10px;
left: 211px;
width: 33px;
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 10px;
background-position: -211px -15px;
}
li#sn_3 a:hover {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -211px -35px;
}
li#sn_3 a.current, li#sn_3 a.current:active {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -211px -35px;
cursor: default;
text-align: right;
}
li#sn_4 {
position: absolute;
top: 10px;
left: 270px;
width: 54px;
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 10px;
background-position: -270px -15px;
}
li#sn_4 a:hover {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -270px -35px;
}
li#sn_4 a.current, li#sn_4 a.current:active {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -270px -35px;
cursor: default;
}
li#sn_5 {
position: absolute;
top: 10px;
left: 347px;
width: 37px;
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 10px;
background-position: -347px -15px;
}
li#sn_5 a:hover {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -347px -35px;
}
li#sn_5 a.current, li#sn_5 a.current:active {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -347px -35px;
cursor: default;
}
li#sn_6 {
position: absolute;
top: 10px;
left: 410px;
width: 37px;
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 10px;
background-position: -410px -15px;
}
li#sn_6 a:hover {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -410px -35px;
}
li#sn_6 a.current, li#sn_6 a.current:active {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -410px -35px;
cursor: default;
}
li#sn_7 {
position: absolute;
top: 10px;
left: 10px;
width: 43px;
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 10px;
background-position: -473px -15px;
}
li#sn_7 a:hover {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -473px -35px;
}
li#sn_7 a.current, li#sn_6 a.current:active {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -473px -35px;
cursor: default;
}
li#sn_8 {
position: absolute;
top: 10px;
left: 80px;
width: 44px;
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 10px;
background-position: -543px -15px;
}
li#sn_8 a:hover {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -543px -35px;
}
li#sn_8 a.current, li#sn_6 a.current:active {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -543px -35px;
cursor: default;
}
li#sn_9 {
position: absolute;
top: 9px;
left: 151px;
width: 45px;
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
overflow: hidden;
height: 10px;
background-position: -614px -14px;
}
li#sn_9 a:hover {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -614px -34px;
}
li#sn_9 a.current, li#sn_6 a.current:active {
background-image: url(assets/subnav.gif);
background-repeat: no-repeat;
background-position: -614px -34px;
cursor: default;
}
/end header menu/
.corner {
position:absolute;
width:18px;
height:18px;
}
.roundedBox {
border:1px solid #b2bb1e;
position: relative;
padding: 18px;
margin: 0 0 10px 0;
}
.bl {
background-image: url(assets/corners-type2.gif);
background-repeat: no-repeat;
background-position: -0px -18px;
bottom: -1px;
left: -1px;
}
.br {
background-image: url(assets/corners-type2.gif);
background-repeat: no-repeat;
background-position: -18px -18px;
bottom: -1px;
right: -1px;
}
.tr {
background-image: url(assets/corners-type2.gif);
background-repeat: no-repeat;
background-position: -18px -0px;
top: -1px;
right: -1px;
}
.tl {
background-image: url(assets/corners-type2.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
top: -1px;
left: -1px;
}
.t {
background-image: url(assets/corners-type2.gif);
background-repeat: repeat-x;
background-position: -1px -9px;
}
.b {
background-image: url(assets/corners-type2.gif);
background-repeat: repeat-x;
background-position: -18px -1px;
}

.l {
background-image: url(assets/corners-type2.gif);
background-repeat: repeat-y;
background-position: -18px 0;
}
.r {
background-image: url(assets/corners-type2.gif);
background-repeat: repeat-y;
background-position: -18px 0px;
}
.twoColLiqLtHdr #mainContent img, #mainContent2 img, #mainContent3 img, .twoColLiqLtHdr #mainConThum img {
clear: both;
margin: 10px 10px 20px 10px;
}
.imageDiv { width: 80%; }
.imageDiv2 { width: 83%; }

th {
text-align: right;
background-color: #a2ad00;
font-size: 100%;
font-weight: normal;
padding: 10px 5px 2px 5px;
}
caption {
font-size: 110%;
font-weight: bold;
padding-bottom: 5px;
text-align: right;
}
td {
padding: 2px 5px 2px 10px;
border: 1px solid #b2bb1e;
}
.webSamp1, .webSamp2, .webSamp3, .webSamp4, .webSamp5, .webSamp6, .webSamp7, .webSamp8, .webSamp9, .webSamp10, .webSamp11, .webSamp12 {
width:141px;
height:141px;
display:inline-block;
background:url(assets/websites.gif) no-repeat 0 0px;
}
.webSamp1:hover {
background-position:-141px 0;
}
.webSamp2:hover {
background-position:-282px 0;
}
.webSamp3:hover {
background-position:-423px 0;
}
.webSamp4:hover {
background-position:-564px 0;
}
.webSamp5:hover {
background-position:-141px -141px;
}
.webSamp6:hover {
background-position:-282px -141px;
}
.webSamp7:hover {
background-position:-423px -141px;
}
.webSamp8:hover {
background-position:-564px -141px;
}
.webSamp9:hover {
background-position:-141px -282px;
}
.webSamp10:hover {
background-position:-282px -282px;
}
.webSamp11:hover {
background-position:-423px -282px;
}
.webSamp12:hover {
background-position:-564px -282px;
}
.uiSamp1, .uiSamp2, .uiSamp3, .uiSamp4 {
width:141px;
height:141px;
display:inline-block;
background:url(assets/ui.gif) no-repeat 0 0px;
}
.uiSamp1:hover {
background-position:-141px 0;
}
.uiSamp2:hover {
background-position:-282px 0;
}
.uiSamp3:hover {
background-position:-423px 0;
}
.uiSamp4:hover {
background-position:-564px 0;
}
.flashSamp1 {
width:141px;
height:141px;
display:inline-block;
background:url(assets/flash.gif) no-repeat 0 0px;
}
.flashSamp1:hover {
background-position:-141px 0;
}
.clearfooter {
height: 72px;
clear: both;
}
.footerLeft {
float: left;
width: auto;
}
.footerCenter {
clear: both;
width: 600px;
left: 200px;
}
.footerRight {
float: right;
width: auto;
}
.backMain {
float: left;
width: 240px;
}
.sidebarHeader {
border: 1px solid #b2bb1e;
padding: 1px 1px 1px 50px;
}
.versionNav { margin-bottom: 20px; }

[/COLOR][/INDENT]This is the ie5&6 style sheet:

[INDENT].twoColLiqLtHdr #sidebar1 {
width: 150px;
}
.twoColLiqLtHdr #subnav {
height: 15px;
background-color:#9FA617;
}
.corner {
width:0px;
height:0px;
}
.roundedBox {
border:0px;
}

[/INDENT]Any words of wisdom greatly appreciated.