Rollovers not working on myspace Options

[SharperMyspace]

I have spent FOREVER on this layout and I am so frusterated because it works when I test it on a webpage, but the rollovers don't show up when I put it on myspace.


Here is the layout on a webpage. Everything works

Myspace. Everything works except the images links and rollovers don't show up

Here is the code I am using on both pages:

CODE

<style>
body{

background-color:E0E4CC;
    background-image:url();
    background-repeat:repeat;
    background-attachment:Fixed;
    background-position:top left;}

.comment a,.comment a:active, .comment a:visited {
display:BLOCK;  
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/comments.gif);
height:95px;
width:92px;
background-color:transparent;
z-index:2;
}

.comment a:hover {

background-color:transparent;
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/comments-over.gif);
z-index:2;
height:95px;
width:92px;
}

.add a,.add a:active, .add a:visited {
display:BLOCK;  
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/add.gif);
height:82px;
width:81px;
background-color:transparent;
z-index:2;
}

.add a:hover {

background-color:transparent;
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/add-over.gif);
z-index:2;
height:82px;
width:81px;
}

.pics a,.pics a:active, .pics a:visited {
display:BLOCK;  
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_07.gif);
height:82px;
width:84px;
background-color:transparent;
z-index:2;
}

.pics a:hover {

background-color:transparent;
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_07-over.gif);
z-index:2;
height:82px;
width:84px;
}


.msg a,.msg a:active, .msg a:visited {
display:BLOCK;  
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/msg.gif);
height:87px;
width:92px;
background-color:transparent;
z-index:2;
}

.msg a:hover {

background-color:transparent;
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/msg-over.gif);
z-index:2;
height:87px;
width:92px;
}


.block a,.block a:active, .block a:visited {
display:BLOCK;  
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/block.gif);
height:74px;
width:84px;
background-color:transparent;
z-index:2;
}

.block a:hover {

background-color:transparent;
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/block-over.gif);
z-index:2;
height:74px;
width:84px;
}


.lyts a,.lyts a:active, .lyts a:visited {
display:BLOCK;  
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lyts.gif);
height:93px;
width:89px;
background-color:transparent;
z-index:2;
}

.lyts a:hover {

background-color:transparent;
background-image:url(http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lyts-over.gif);
z-index:2;
height:93px;
width:89px;
}

</style>
<div class="bg" style="position: absolute; left:200px; top:150px; width:600px; height:495px; overflow: hidden;">

<table id="Table_01" width="601" height="496" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="9">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_01.gif" width="600" height="48" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="1" height="48" alt=""></td>
    </tr>
    <tr>
        <td rowspan="8">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_02.gif" width="29" height="447" alt=""></td>
        <td rowspan="2">
            <div class="comment"><a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=XXXXXXX" target="_self" class="comment">
</a></div></td>
        <td colspan="2" rowspan="6">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_04.gif" width="185" height="354" alt=""></td>
        <td colspan="2">
            <div class="add"><a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXX" target="_self" class="add">
</a></div></td>
        <td rowspan="8">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_06.gif" width="52" height="447" alt=""></td>
        <td>
            <div class="pics"><a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=XXXXXXX" class="pics">
</a></div></td>
        <td rowspan="8">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_08.gif" width="77" height="447" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="1" height="82" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="5">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_09.gif" width="81" height="272" alt=""></td>
        <td rowspan="4">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_10_2.gif" width="84" height="235" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_11.gif" width="92" height="124" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="1" height="124" alt=""></td>
    </tr>
    <tr>
        <td>
        <div class="msg"><a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXXX" target="_self" class="msg">
                </a></div></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="1" height="87" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_13.gif" width="92" height="141" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="1" height="11" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
        <div class="block"><a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXX" target="_self" class="block">
                </a></div></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="1" height="37" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_15.gif" width="117" height="93" alt=""></td>
        <td colspan="2" rowspan="2">
            <div class="lyts"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnNoYXJwZXJteXNwYWNlLmNvbQ==" target="_blank" class="lyts">
                </div></a></td>
        <td rowspan="2">
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_17.gif" width="60" height="93" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="1" height="37" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/lay2_18.gif" width="84" height="56" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="1" height="56" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="29" height="1" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="92" height="1" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="117" height="1" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="68" height="1" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="21" height="1" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="60" height="1" alt=""></td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="52" height="1" alt=""></td>
        <td>
            ..</td>
        <td>
            <img src="http://www.sharpermyspace.com/images/layouts/divs/bubbles/images/spacer.gif" width="77" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
</div>

This is the code I am using to hide the myspace and stuff. Could this be the problem?

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>
<style>
div div select, div div form, div div input{display:none;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
</style>
<style>
body {
background-color: 6dcff6;
scrollbar-arrow-color: black;
scrollbar-face-color: 6dcff6;
scrollbar-3dlight-color: 6dcff6;
scrollbar-darkshadow-color: 6dcff6;
scrollbar-highlight-color: 6dcff6;
scrollbar-shadow-color: 6dcff6;
scrollbar-track-color: 6dcff6;
base-color: 6dcff6;
}

.content {
filter:chroma(color= purple);
scrollbar-arrow-color: black;
scrollbar-face-color: purple;
scrollbar-3dlight-color: purple;
scrollbar-darkshadow-color: purple;
scrollbar-highlight-color: purple;
scrollbar-shadow-color: purple;
scrollbar-track-color: purple;
base-color: purple;
}


.a {hide top search bar}
div div select, div div form {display:none !important;}

.text {font:normal 10px arial; color:black; font-weight:none; border:0px; text-transform: none;}

a.navbar:link, a.man{font-family:arial; font-size:0px; color:black; font-weight:none;border:0px; text-transform: NONE; letter-spacing: 0px;}  
a.navbar:active{font-family:arial; font-size:0px; color:black; font-weight:none;border:0px; text-transform: NONE;}  
a.navbar:visited{font-family:arial; font-size:0px; color:black; font-weight:none;border:0px; text-transform: none;}
a.navbar:hover{font-family:arial; font-size:0px; color:black; font-weight:none;border:0px; text-transform: none;}





.37182{hide the uer shortcuts box}
select{position:absolute !important; margin-top:-37182px}

.37182{keep the ones in your profile sections in place}
table table table select{position:relative!important; margin-top:0;}

</style>

Please help me! Thanks :)

[Smarmosaur]

your myspace is private. i notice on the website, there's a lag with the rollovers (and i have a very fast connection and great computer, so no cracks on that, please).
try this. it does work for myspace, and won't lag. oh, don't map when you use rollovers...go ahead and keep the sliced images, but save the main image as one, and position your linked images on top of it.

CODE

.NAME a {
position:absolute;
top:119px;
left:490px;
display: block;
width: 88px;
height: 25px;
background: url(IMAGEURL-basic image) no-repeat;
}
.NAME a:hover img, .two a:focus img { display: none }
.NAME a:hover { line-height: 1 }

the links:

CODE

<div id="NAME"><a href="LINK" target="frame"><img src="IMAGEURL-the hoover image" width="#px" height="#px" border="0"></a></div>