Help Fixing Div For IE6 (56k)

Hi guys, great site that you've got here.

Some buddies of mine are in a Christian band and I handle doing all their graphics and t shirt designs and things like that. For promotion, they asked me to help design them a MySpace. I obliged, and went out and picked up a book on CSS and tried to eke together a pretty amateur, non standards compliant layout for them. I think it looks pretty good.... under Firefox, anyway. Here's what it looks like under Firefox 3 Beta 2.

http://i262.photobucket.com/albums/ii111/AmplifiedBand/firefox.png

But here's what it looks like under IE6.

http://i262.photobucket.com/albums/ii111/AmplifiedBand/ie6.png

Now, MySpace is kind of notorious for having a kind of... computer illiterate userbase so I need to try to get it working under IE6.

It looks okay under IE7; the "Get Amplified" banner is a little low, but not bad.

Here's the code. I know, it's probably not very good... but I'll just be honest, I don't have a great idea what I'm doing... I've used bits of code from some profile generators.

<div class="masthead"></div>

<style type="text/css">
body {
background-color:FFFFFF;
background-image:url(http://i15.photobucket.com/albums/a351/volsfan91/bg.gif);
background-attachment:fixed;
background-repeat:repeat;
border-color:FFFFFF;
border-width:2px ;
border-style: solid;
}

table table {
border: 0px
}

table table table table{
border:1px
}

table, tr, td {
background-color:transparent; border:none; border-width:0;
}

table table table {
border-style:solid;
border-width:1px;
border-color:40AF8D;
background-color:000000;
}

.mygen { Text Properties }
table, tr, td, li, p, div { font-family:georgia; color:FFFFFF; font-size:11px; }
.btext { font-family:georgia; color:FFFFFF; }
.blacktext10 { font-family:georgia; color:FFFFFF; }
.blacktext12 { font-family:georgia; color:FFFFFF; }
.lightbluetext8 { font-family:georgia; color:FFFFFF; }
.orangetext15 { font-family:georgia; color:FFFFFF; }
.redtext { font-family:georgia; color:FFFFFF; }
.redbtext { font-family:georgia; }
.text { font-family:georgia; }
.whitetext12 { font-family:georgia; }
a:active, a:visited, a:link { font-family:georgia; color:FFFFFF; }
a:hover { font-family:georgia; }
a.navbar:active, a.navbar:visited, a.navbar:link { font-family:georgia; }
a.navbar:hover { font-family:georgia; }
a.redlink:active, a.redlink:visited, a.redlink:link { font-family:georgia; }
a.redlink:hover { font-family:georgia; }
.nametext { font-family:georgia; }

.profileInfo * {background-color:transparent;}
.nametext {color:white!important;}
.nametext {font-family:Georgia!important;
font-size:10px!important;}
.profileInfo td td.text {text-align:left;}
.profileInfo td.text {text-align:center;}
.profileInfo td, .profileInfo td a {color:white;}
.profileInfo table {background-color:black;}
.profileInfo td.text {background-color:black;}

.text { font-family:georgia; color:FFFFFF; font-size:11px; }

.masthead {width: 800px; height: 115px; position: absolute; margin-left: -400px; left: 50%; top: 208px; background-image: url(http://i15.photobucket.com/albums/a351/volsfan91/notransheader.png);}

body table {margin-top:104px;}
body td table, body div table {margin-top: 0;}

</style>
<center>


I will gladly take any advice/critique you can give because I could really use some help with this.

Thanks a lot for the help guys. I anticipate being around a lot while trying to learn more CSS.

Without looking at it thoroughly I’d suggest, if it’s just that banner that causes a probem, that you use the “Star HTML Hack” (a.k.a. Holly Hack) and some negative top margin or positioning:


* html .whatever_the_banner_is_called {margin-top: -??px;}

/* or */

* html .whatever_the_banner_is_called {
position: relative;
top: -??px;
}

Wow, worked like a charm. Big ups man.