Myspace div overlay help.. nothing shows up Options

[xxmaddisonxx]

Hi everyone. Ive been looking through the div overlay tutorial here which is great and easy to follow.

so i hid my profile using the script and then tryed playing around by just adding

<div> work in progress</div>

which worked fine and everyone could see it on my profile

but then when i tried gettin with a more complex design absolutely nothing shows up when i load the page except the advert at the top.

In about me:

CODE

<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>

in i'd like to meet:

CODE

<div class="container">

<div class="header">
<div>email address</div>
<h1>myspace.com/</h1>

</div>

<div class="menu"><a href="">Link</a> <a href="">Link</a> <a href="">Link</a> <a href="">Link</a> </div>
<div class="sub_menu">
<div><a href="">Company Updates</a></div>
<div><a href="">Promotions</a></div>
</div>
<div class="content">
<p>pyuytututyutuytutyuytuytuyuytuyuyu</p>
<p>tyutyuytuytuytu</p>
</div>
<div class="sub_links"></div>
<div class="footer">myspace.com/</div>
</div>
<style>


body {

font-size: 9pt;
font-family: arial, "helvetical";
margin: 0 auto;
text-align: center;



}

a {

text-decoration: underline;
font-family: arial, "helvetica";

}

a:hover {

text-decoration: underline;
font-family: arial, "helvetica";

}

img {

border: 0px;

}

h1 {

font-family: arial, "helvetica";
font-size: 17pt;

}

h2 {

font-family: arial, "helvetica";
font-size: 13.5pt;

}

h3 {

font-family: arial, "helvetica";
font-size: 11pt;

}


div.container {

width: 650px;
height: auto;
margin: 20px auto 0px auto;
text-align: left;
..;
visibility:visible;
}

div.header {

width: auto;
height: 51px;
padding: 10px;
border-top: 5px SOLID;
vertical-align: middle;

}

div.header div {

width: auto;
float: right;

}

div.header div a {

font-size:10pt;
text-decoration: none;
font-family: arial, "helvetica";

}


div.menu {

border: 0px;
text-align: left;
margin-bottom: 20px;
padding-top: 3px;
padding-bottom: 3px;

}

div.menu a {

text-decoration: none;
font-size: 11pt;
font-family: arial, "helvetica";
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;

}

div.menu a:hover {

color: #fff;
font-family: arial, "helvetica";
text-decoration: none;
font-size: 11pt;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;

}


div.content {

padding-left: 15px;
font-family: verdana, "helvetica";
text-align: justify;
line-height: 1.5em;
margin-right: 205px;
padding: 0 1em 1ex 1em;

}


div.side_box {

margin-right: 5px;
float: right;
clear: right;
width: 180px;
font-size: 10pt;
font-family: verdana, "helvetica";
padding: 5px;
margin-bottom: 15px;

}


div.sub_menu {

width: 190px;
border-bottom: 3px SOLID;
margin-right: 5px;
float: right;
clear: right;
margin-bottom: 15px;

}

div.sub_menu div {

border-top: 1px SOLID;
border-left: 1px SOLID;
border-right: 1px SOLID;
padding: 2px;
padding-left: 5px;


}

div.sub_menu a {

text-decoration: none;
font-family: arial, "helvetica";

}

div.sub_menu span {

float: right;
padding-right: 5px;
vertical-align: middle;

}

div.sub_links {

width: auto;
font-size: 9pt;
font-family: arial, "helvetica";
text-align: center;
padding: 10px;

}

div.sub_links a {

text-decoration: none;
font-family: arial, "helvetica";

}


div.footer {

width: auto;
font-size: 8pt;
font-family: verdana, "helvetica";
padding: 5px;

}

body {

color: 666;
background: d2e5ec;

}

a {

color: ff9300;

}

h1 {

color: fead00;

}

h2 {

color: 696969;

}

h3 {

color: fead00;

}

.r{}
div.container {

background: fff;
}

.r{}
div.header {
background-color: fff;
border-top-color: AEEE00;
}


div.header div a {

color: ffc600;

}

.r{}
div.menu {
background-color: AEEE00;

}

div.menu a {

color: fff;

}

div.menu a:hover {

color: fff;
background-color: ffc600;

}

.r{}
div.side_box {

background: f6f6f6;
color: 333;

}

.r{}
div.sub_menu {

border-bottom-color: ececec;

}

div.sub_menu div {

border-top-color: ececec;
border-left-color: ececec;
border-right-color: ececec;
background-color: fff;

}

div.sub_menu a {

color: 555;

}

div.sub_menu span {

color:ccc;

}

.r{}
div.sub_links {

background: fff;
color: ccc;

}

div.sub_links a {

color: aaa;

}

.r{}
div.footer {
background-color: AEEE00;
color: 000000;

}

</style>

but anyway i assumed that the issue was with me and not the page because well it was working with a simple div and then when i get complex things went wrong

so i looked around the forum and saw a few ideas, firstly i added z-index to a few of the elemnts to make sure that they wernt just hidden behind something

and then i just attempted to set visibility to visible incse something had gone wrong there

but nothing still

any advice or suggestions???

thanks


maddison xx