Bizarre ghosting effect

[doozer]

Can anyone explain to me what the heck is going on here?

If you go to my site at www.ccgtools.co.uk you will see I am using position fixed on various page elements (header, footer and sidebar on some pages).

If I view the site at screen resolutions of 600x800 it stops working in both Netscape and FF. When you scroll down the main part of the screen overlays the banner as it scrolls up and then if you scroll back down a range of ghosted banner images appear overlaying the main page. NOTE this does not occur in Opera or IE or at higher screen resolutions.

What the *****?

I am guessing it is a CSS problem. Below is the main css file for the page.

If anyone can point me in the right direction here I would appreciate it.

html {
/*IE POSITION FIXED HACK*/
_overflow:visible;
}

body {
background-color:#111111;
color:#FFFF00;
font-size:.75em;
font-family:georgia;
margin:0;
padding:0;
/*IE POSITION FIXED HACK*/
_height:100%;
_overflow:hidden;
}

a, a:link, a:visited, a:active {
color:#FFCC33;
cursor:pointer;
font-family:Verdana;
font-size:.85em;
text-decoration:underline;
}
a:hover {
background-color:#770000;
color:#FFFFFF;
}

#sitemap dl {
margin-left:1em;
text-align:left;
}
#sitemap dt {
font-size:1.5em;
}
#sitemap dd dt {
color:#FFCC33;
font-family:Verdana;
font-size:1em;
text-decoration:underline;
}

h1 {
font-size:2em;
text-align:center;
text-decoration:underline;
}

hr {
background-color:#999999;
border:solid 1px;
color:#999999;
clear:both;
text-align:center;
width:100%;
}

p {
text-align:left;
}

select {
font-size:8pt;
}

#checklist {
border-color:#CC9999 #663333 #663333 #CC9999;
border-style:solid;
border-width:4px;
border-spacing:0;
margin:0 auto;
}
#checklist td {
border-color:#663333 #CC9999 #CC9999 #663333;
border-style:solid;
border-width:1px;
font-family:"Arial";
padding:2px;
}
#checklist th {
background-color:#AA1111;
border-color:#663333 #CC9999 #CC9999 #663333;
border-style:solid;
border-width:1px;
padding:5px;
text-align:center;
}

.even {
background-color:#950000;
}

.highlight {
color:#2222DD;
font-weight:bold;
font-size:1.1em
}

.link {
color:#FFCC33;
cursor:pointer;
text-decoration:underline;
}
.link:hover, .link.sfhover {
background-color:#770000;
color:#FFFFFF;
}
.on {
color:#00FF33;
cursor:pointer;
}

.odd {
background-color:#000000;
}

.pagemarker {
display:none;
}

.release {
border-color:#CC9999 #663333 #663333 #CC9999;
border-style:solid;
border-width:4px;
border-spacing:0px;
margin:0 auto;
}
.release td {
background-color:#000000;
border-color:#663333 #CC9999 #CC9999 #663333;
border-style:solid;
border-width:1px;
padding:2px;
text-align:center;
vertical-align:top;
}
.release th {
background-color:#AA1111;
border-color:#663333 #CC9999 #CC9999 #663333;
border-style:solid;
border-width:1px;
padding:5px;
text-align:center;
}
.release ul {
margin:0;
text-align:left;
}

.spoiler {
width:100%;
/*IE TABLE WIDTH CORRECTION*/
_width:97.8%;
}
#spoilerexample {
background-color:#112211;
border:1px solid #999999;
width:100%;
/*IE TABLE WIDTH CORRECTION*/
_width:97.8%;
}
#spoilerexample td {
border:1px solid #999999;
font-size:1.3em;
font-weight:bold;
}

.tourney {
border-color:#CC9999 #663333 #663333 #CC9999;
border-style:solid;
border-width:4px;
border-spacing:0px;
margin:0 auto;
}
.tourney td {
background-color:#000000;
border-color:#663333 #CC9999 #CC9999 #663333;
border-style:solid;
border-width:1px;
padding:2px;
text-align:center;
}
.tourney th {
background-color:#AA1111;
border-color:#663333 #CC9999 #CC9999 #663333;
border-style:solid;
border-width:1px;
padding:5px;
text-align:center;
}

#bannerwrapper {
left:0;
position:fixed;
top:0;
width:100%;
z-index:100;
/*IE POSITION FIXED HACK*/
_position:absolute;
/*IE STOP SCROLLBAR OVERLAY*/
_padding-right:22px;
_width:auto;
}
#banner {
background-color:#111111;
text-align:center;
}
#banner img {
margin:2px;
}
#counter {
display:inline;
float:left;
margin:.5em;
padding:0;
}
#login {
background-color:#555555;
display:inline;
float:right;
margin:.5em;
padding:.5em;
}

#body2 {
/*IE POSITION FIXED HACK*/
_height:100%;
_overflow-y:scroll;
}

#cardcount {
color:#FFFFFF;
font-size:2em;
}

#carddetail {
background-color:#000000;
border:2px solid #CC0000;
border-collapse:collapse;
border-spacing:0;
font-family:"Verdana";
height:300px;
left:.5em;
padding:1px 0 0 1px;
position:fixed;
top:9em;
width:275px;
/*IE POSITION FIXED HACK*/
_position:absolute;
}
#carddetail td {
border:solid #000000;
border-width:0 1px 1px 0;
font-size:.8em;
}
#carddetail .data {
background-color:#FFFFFF;
color:#000000;
}
#carddetail .icon {
background-color:#000000;
color:#FFFFFF;
text-align:center;
}
#carddetail .icon img {
height:25px;
width:25px;
}
#carddetail .datactrd {
background-color:#FFFFFF;
color:#000000;
text-align:center;
}
#carddetail .label {
background-color:#000000;
color:#FFFF00;
}
#carddetail .labelctrd {
background-color:#000000;
color:#FFFF00;
text-align:center;
}
#carddetail .txtdata {
background-color:#FFFFFF;
border-width:0 1px 0 0;
color:#000000;
}

#cardimage {
background-color:#666666;
border:solid 2px #555555;
height:300px;
left:.5em;
position:fixed;
top:9em;
width:209px;
/*IE POSITION FIXED HACK*/
_position:absolute;
}

#deckdetail table {
border-spacing:0;
align-vertical:top;
}
#deckdetail .centrd {
text-align:center;
}
#deckdetail .data {
background-color:#FFFFFF;
border:2px solid;
color:#000000;
}
#deckdetail .diedata {
background-color:#FFFFFF;
border:2px solid;
color:#000000;
text-align:center;
}
#deckdetail .ident {
font-size:.75em;
display:none;
}
#actdcklbl {
background-color:#999999;
border:1px outset #999999;
border-bottom:none;
color:#000000;
font-weight:bold;
}
#actioncell {
background-color:#000000;
border:1px outset #999999;
vertical-align:top;
}
#armydcklbl {
background-color:#FFCC00;
border:1px outset #FFCC00;
border-bottom:none;
color:#000000;
font-weight:bold;
}
#armycell {
background-color:#000000;
border:1px outset #FFCC00;
vertical-align:top;
}

#plotdcklbl {
background-color:#993300;
border:1px outset #993300;
border-bottom:none;
color:#000000;
font-weight:bold;
}
#plotcell {
background-color:#000000;
border:1px outset #993300;
vertical-align:top;
}
#maindcklbl {
background-color:#003399;
border:1px outset #003399;
border-bottom:none;
color:#000000;
font-weight:bold;
}
#maincell {
background-color:#000000;
border:1px outset #003399;
vertical-align:top;
}

#deckList {
height:300px;
left:.5em;
overflow:auto;
position:fixed;
top:8em;
width:275px;
/*IE POSITION FIXED HACK*/
_position:absolute;
}
#deckList .deckname {
font-size:1em;
}
#deckList .user {
font-size:0.8em;
text-align:left;
}
#deckList .date {
font-size:0.8em;
text-align:right;
}

#footerwrapper {
bottom:0;
left:0;
position:fixed;
width:100%;
z-index:100;
/*IE POSITION FIXED HACK*/
_position:absolute;
/*IE STOP SCROLLBAR OVERLAY*/
_padding-right:17px;
_width:auto;
/*IE CORRECT POSITION DISPLACEMENT*/
_bottom:-1px;
}
#footer {
background:#FFFFFF;
color:#000000;
font-size:.8em;
font-weight:bold;
height:1.5em;
padding:.2em .2em 0 .5em;
text-align:center;
}

#main {
margin:9em 1em 0 1em;
text-align:left;
padding-bottom:1.5em;
}
.lm230 {
padding-left:230px;
}
.lm300 {
padding-left:300px;
}
#main img {
margin:.4em;
}
#main img.goldpic {
display:block;
margin:0px;
}

#need {
display:inline;
float:left;
width:49%;
}
#swap {
display:inline;
float:right;
width:49%;
}
#need .title, #swap .title {
background-color:#000000;
font-family:arial;
font-weight:bold;
}
#need table {
background-color:maroon;
width:100%;
}
#swap table {
background-color:navy;
width:100%;
}

#searchcount {
color:#FFFFFF;
font-weight:bold;
font-family:arial;
font-size:2em;
}

#selector {
background-color:#000000;
border:1px solid #FFFFFF;
float:right;
padding:5px;
}

#srchControls {
border:2px solid #FFFF00;
clear:both;
padding:5px;
}

#srchDetail {
height:300px;
left:.5em;
position:fixed;
top:8em;
width:275px;
/*IE POSITION FIXED HACK*/
_position:absolute;
}
#srchDetail * {
font-family:Verdana;
font-size:.9em;
margin:0;
padding:0;
}
#srchDetail option {
padding-right:5px;
}
#srchDetail ul {
list-style:none;
margin:0 0 0 2px;
}
#srchDetail #cardList {
background-color:#000000;
border:1px solid #CC0000;
height:100px;
margin:0 5px 5px 0;
overflow:auto;
}
#cardsumry {
background-color:#000000;
border-collapse:collapse;
border-spacing:0;
border:2px solid #66CC00;
font-size:1em;
height:150px;
margin:5px 5px 0 0;
padding:1px 0 1px 1px;
width:270px;
}
#cardsumry td {
border:solid #000000;
border-width:0 1px 1px 0;
}
#cardsumry .txtdata {
background-color:#FFFFFF;
border-width:0 1px 0 0;
color:#000000;
}
.data {
background-color:#FFFFFF;
color:#000000;
}
.label {
background-color:#000000;
color:#FFFF00;
text-align:right;
}

#srchhelp {
margin:20px;
}
#srchhelp dt {
font-size:1.2em;
font-weight:bold;
margin-top:10px;
text-decoration:underline;
}

#srchList {
border:2px solid #CC0000;
clear:both;
padding:5px;
}
#srchList p {
text-align:center;
}
#srchList * ul {
list-style:none;
margin:0 0 0 2em;
padding:0;
}

[_Aerospace_Eng_]

Please use [code][/code] tags to post code. I think you may be over complicating things a bit. Your approach to fixed positioning is highly invalid and not the way I would have gone. http://www.cssplay.co.uk/layouts/fixed.html
Read that, view the source, learn from it.

[doozer]

Thanks Aerospace,

Sorry about the tags.

I used your site as the starting point for my fixed position hack originally.
I agree my code is nowhere near as clearly written as yours but thats what comes from being self taught I guess.

The banner and footer wrappers with padding are the only way I could find to stop the absolutely positioned elements from obscuring the scroll bars of the main div in IE and if I dont add the html overflow:hidden remark I get two scroll bars in IE.

I have experimented with this and discovered that if I specifically state that all descendent elements of a fixed elements are also fixed the ghosting stops. Is this how fixed positioning is supposed to work?