Rollover issue, White box appearing before the rollover initially Options

[shynomi]

This is just a cosmetic issue but when you rollover the links, they work but a white box shows up at first before correcting itself with the rollover. Is there something in my code that is making it do that? I want it to be more smooth.

Here's the code: (I have all of the code in the bio section)

LINK: http://www.myspace.com/frucatestpage2

CODE

<style>div div table div, div.clearfix a, input {display:none;}
div.clearfix table div div {display:block;}</style>

<style>
.profileWidth {
padding-bottom:1870px !important;}
</style>


<div id="BannerUnderTopNav" style="position:absolute; z-index:2; margin-left:-731px; _margin-left:-720px; top: 0px; background-color:COLOR; background-image:; background-repeat: no-repeat; background-position: bottom center; width:1600px; height:2028px; overflow:no;">

<table id="Table_01" width="1600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="19">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_01.jpg" width="1600" height="139" alt="" /></td>
</tr>

<tr>
<td colspan="3">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_02.jpg" width="516" height="18" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" class="HOME">
</a></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vYnJvd3NldXNlcnMubXlzcGFjZS5jb20vQnJvd3NlL0Jyb3dzZS5hc3B4" class="BROWSE">
</a></td>

<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vc2VhcmNoc2VydmljZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1zaXRlc2VhcmNoLmZyaWVuZGZpbmRlcg==" class="FINDPEOPLE">
</a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vZm9ydW1zLm15c3BhY2UuY29tLz9mdXNlYWN0aW9uPWZvcnVtcy5ob21l" class="FORUMS">
</a></td>
<td colspan="2">
<a href="http://music.myspace.com/" class="MUSIC">
</a></td>

<td>
<a href="http://vids.myspace.com/" class="VIDEOS">
</a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" class="MORE">
</a></td>
<td colspan="2">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_10.jpg" width="98" height="18" alt="" /></td>
<td>

<a href="http://www.myspace.com/index.cfm?fuseaction=splash" class="LOGIN">
</a></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vc2lnbnVwcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1zaWdudXA=" class="SIGNUP">
</a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_13.jpg" width="391" height="18" alt="" /></td>
</tr>
<tr>

<td colspan="19">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_14.jpg" width="1600" height="377" alt="" /></td>
</tr>
<tr>
<td colspan="19">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_15.jpg" width="1600" height="358" alt="" /></td>
</tr>
<tr>
<td colspan="19">

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_16.jpg" width="1600" height="261" alt="" /></td>
</tr>
<tr>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_17.jpg" width="384" height="31" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD00NjgzNjg4MDE=" class="MESSAGE">
</a></td>
<td colspan="4">

<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD00NjgzNjg4MDE=" class="ADDTOFRIENDS">
</a></td>
<td colspan="2">
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=468368801" target="_blank" class="VIEWPICS">
</a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vaXR1bmVzLmFwcGxlLmNvbS9XZWJPYmplY3RzL01aU3RvcmUud29hL3dhL3ZpZXdBcnRp
3Q/aWQ9MzE1MTI3Njk5JnVvPTY=" target="_blank" class="ITUNES">
</a></td>
<td colspan="3">

<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmZhY2Vib29rLmNvbS9wYWdlcy9UaGUtQWxpYmktRGlzdHJpY3QvNzMyNDY5NDY1
Tg=" target="_blank" class="FACEBOOK">
</a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm9uZWNvbmRvbXMuY29tL3NwbGFzaC5odG0=" target="_blank" class="ONE">
</a></td>
<td colspan="2">
<a href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20vYWxpYmlkaXN0cmljdA==" target="_blank" class="TWITTER">
</a></td>
<td>

<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnlvdXR1YmUuY29tL3RoZWFsaWJpZGlzdHJpY3Q=" target="_blank" class="YOUTUBE">
</a></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_26.jpg" width="391" height="31" alt="" /></td>
</tr>
<tr>
<td colspan="19">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_27.jpg" width="1600" height="329" alt="" /></td>
</tr>

<tr>
<td colspan="4">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/booyah_28.jpg" width="565" height="27" alt="" /></td>
<td colspan="3">
<a href="http://www.msplinks.com/MDFodHRwOi8vaXR1bmVzLmFwcGxlLmNvbS9XZWJPYmplY3RzL01aU3RvcmUud29hL3dhL3ZpZXdBcnRp
3Q/aWQ9MzE1MTI3Njk5JnVvPTY=" target="_blank">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_29.jpg" width="165" height="27" border="0" alt="" /></a></td>
<td colspan="12">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_30.jpg" width="870" height="27" alt="" /></td>
</tr>

<tr>
<td colspan="19">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_31-1.jpg" width="1600" height="432" alt="" /></td>
</tr>
<tr>
<td colspan="19">
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_32.jpg" width="1600" height="56" alt="" /></td>
</tr>
<tr>

<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="384" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="100" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="32" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="49" height="1" alt="" /></td>
<td>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="69" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="9" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="87" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="24" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="50" height="1" alt="" /></td>

<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="47" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="16" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="62" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="31" height="1" alt="" /></td>
<td>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="32" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="50" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="48" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="60" height="1" alt="" /></td>
<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="59" height="1" alt="" /></td>

<td>
<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/spacer.gif" width="391" height="1" alt="" /></td>
</tr>
</table>



</div>




<style>
.tg_left {position:absolute; margin-top:-0px; margin-left:-400px; _margin-left:-410px; left:50%; top:2200px; width:315px; height:700px; background-color:transparent; z-index:2;}
</style>




<div class="tg_left">




<br /><br />







<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/infoline1.jpg" /><br /><br />





<table width="250px" border="0" cellspacing="3" cellpadding="3">


<tr>

<td>_HOMETOWN</td><td><div align="right">Boston, MA</div></td>
</tr>

<tr>

<td>_{MYSPACE URL}</td><td><div align="right">www.myspace.com/thealibidistrict</div></td>
</tr>

<tr>
<td>_BOOKING</td>
<td><div align="right"><a href="mailto:booking@thealibidistrict.com">booking@thealibidistrict.com</a><br /></div></td>
</tr>


<tr>

<td>_LABEL</td><td><div align="right"><i>none</i></div></td>
</tr>



<tr>
<td>_LAYOUT</td>
<td><div align="right"><a href="mailto:frucafrucaposters@gmail.com">Fruca Fruca Design</a><br /></div></td>
</tr>



</table>


<br /><br />

<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmZhY2Vib29rLmNvbS9wYWdlcy9UaGUtQWxpYmktRGlzdHJpY3QvNzMyNDY5NDY1
Tg="><img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/facebookgraphic.jpg" /></a>











</div>


<style>ul li a:link, ul li a:active, ul li a:visited ul li a.open:visited, ul li a:link, ul li a:active, ul li a:visited {font: bold 10px arial !important; letter-spacing: -1px !important; text-transform: uppercase; margin-top: 10px; text-align:left;}</style>


<style>.whitetext12{visibility:hidden; display:none;}.lightbluetext8{visibility:hidden; display:none;}</style>

<style>
.friendText {display:none}
.redLink {display:none}
</style>



<style>

{THIS MAKES THE BODY TABLE TRANSPARENT}
{*NOTE* - IF YOU DO NOT WANT THE BODY TABLE TRANSPARENT, SIMPLY CHANGE TRANSPARENT TO A COLOR}


body{ font-size:x-small;
background-color:a4ddff;
background-image:url(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/bg.jpg);
background-attachment:scroll;
background-repeat: no-repeat;
background-position:top center;
margin-top: 0px;}


{THIS EDITS THE MAIN TEXT STYLE AND COLORS}body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{color:000000;font-size:8pt;font-weight:normal;font-style:normal;text-decoration:none;text-transform:none;font-family:arial;}

{THIS CHANGES COLOR AND STYLE OF NAMETEXT AND HEADINGS}.orangetext15, text, strong, .lightbluetext8, .whitetext12, .nametext, .btext, .redtext, .redbtext{color:000000;font-size:8pt;font-weight:normal;font-style:normal;text-decoration:none;text-transform:none;font-family:arial;}

{THIS CHANGES COLOR AND STYLE OF LINKS}a, a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{color:405a6d;font-size:8pt;font-weight:bold;font-style:normal;text-decoration:none;text-transform:bold;font-family:arial;}

{THIS CHANGES COLOR AND STYLE OF LINKS ON HOVER}a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{color:000000;font-size:8pt;font-weight:bold;font-style:normal;text-decoration:none;text-transform:bold;font-family:arial;}

{THIS ALSO MAKES THE BODY TABLE TRANSPARENT AND MAKES SURE ALIGNMENTS ARE FINE}{NOTHING NEEDS TO BE CHANGED HERE EXCEPT IF YOU WANT THE FONT CHANGED}p {margin: 0px 0px 1em 0px; font-family: arial !important}body>div {margin-left: 0px;}table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}table table table td {background-color:transparent;margin:0px;padding: 0 0px 0px 0px}table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}table table table table td {padding:0px;margin:0px;}table table table { background-color: transparent; border: 0 solid; border-color: transparent; width: 100%; }object {position:relative; z-index:1;}body td table, body div table {margin-top: 0px;}.a {hide URL label}.a {hide top links}.a {unhide navigation bar}.navbar {visibility:visible;}

</style>

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/bioline1.jpg" /><br /><br />

<b>

Boston newbies, The Alibi District, made their indie debut with "Light On White",
a hooky, lyric-driven EP that can't wait to find its way onto your iPod. Singer/Songwriter/Pianist Matthew McArthur demonstrates the ability to write well beyond his years with honest lyrics and memorable melodies. Surrounded by great friends and even better musicians, "Light On White" shines brilliantly. Making the transition from studio to stage easily, The Alibi District radiates the genuine, youthful, emotion that is also captured on their record. Keep your ear to the ground, eyes alert and ready. We DARE you not to hum along.

<br /><br />
</b>




<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/promoline1.jpg" /><br /><br />

<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="100" width="434">
<param name="allowScriptAccess" value="never" />
<param name="allowNetworking" value="internal" />
<param name="movie" value="http://cache.reverbnation.com/widgets/swf/11/fancollector.swf?page_object_id=artist_491832&backgroundcolor=656565&font_color=FFFFFF&hide_street_team=false" />
<param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://cache.reverbnation.com/widgets/swf/11/fancollector.swf?page_object_id=artist_491832&backgroundcolor=656565&font_color=FFFFFF&hide_street_team=false" height="100" width="434" wmode="transparent" />
</object><br /><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnJldmVyYm5hdGlvbi5jb20vYy4vYTQvMTEvNDkxODMyL0FydGlzdC8wL1VzZXIv
Gluaw=="><img alt="The%20Alibi%20District" border="0" height="19" src="http://cache.reverbnation.com/widgets/content/11/footer.png" width="434" /></a><br /><img style="visibility:hidden;width:0px;height:0px;" border="0" width="0" height="0" src="http://www.reverbnation.com/widgets/trk/11/artist_491832//t.gif" /><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnF1YW50Y2FzdC5jb20vcC0wNS0tLXhvTmhUWFZj" target="_blank"><img src="http://pixel.quantserve.com/pixel/p-05---xoNhTXVc.gif" style="display: none" border="0" height="1" width="1" alt="Quantcast" /></a></center>

<br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/merchline.jpg" /><br /><br />

<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/merchpic.png" /><br /><br />




<img src="http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/topfriendline1.jpg" /><br />










<span class="off">!-Start Block to Shift Comments To Center-!</span>
<style>
{!-Change the top px value as needed. This is distance B on the chart-!}
table.friendscomments {position:relative; left:-1%;}
table.friendscomments {width:800px !important;}
table.friendscomments td, table.friendscomments table {width:100% !important}
table.friendscomments table table td {width:auto !important;}
</style>
<span class="off">!-END Block to Shift Comments To Center-!</span>


<style>
table.friendsComments tbody tr td.text table tbody tr td span.orangetext15{
background-image: URL(http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/commentline1.jpg) ;
background-repeat: no-repeat !important;
background-color: transparent;
display: block !important;
height: 70px !important;
color: ffffff!important;
width: 800px;
position: relative;
overflow: hidden;
font-size: 1px;
text-align: right;
margin-top: -1px;
line-height: 300px !important;
_width: 800px !important;
_border-left: 1px ffffff!important;
_border-right: 1px ffffff!important;
_height: 70px !important;
_margin-bottom: -1px !important;
}
</style>




<style>
.orangetext15{display:none}
</style>

<style>embed, object {position:absolute; top:1202px; left:50%; margin-left: -48px; z-index:9; } td td td embed, td td td object { position:static; margin-left:0px; }</style>


<style>table table table { visibility:hidden; }
table table .text table { visibility:visible; }</style>

<style>
.navbar, .subnavItems {display: none!important;}
</style>

<style>

.latestBlogEntry {
position:absolute;
top:2070px;
margin-left: -400px;
left:50%;
width: 370px;
background-color: transparent;
z-index: 9;
}

table .latestBlogEntry {
width:370px!important;
}
</style>


<style>
a.HOME
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_03.jpg") repeat;width:49px;height:18px;display:block;}

a.HOME:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_03-1.jpg") repeat;}

a.BROWSE
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_04.jpg") repeat;width:69px;height:18px;display:block;}

a.BROWSE:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_04-1.jpg") repeat;}

a.FINDPEOPLE
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_05.jpg") repeat;width:96px;height:18px;display:block;}

a.FINDPEOPLE:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_05-1.jpg") repeat;}

a.FORUMS
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_06.jpg") repeat;width:74px;height:18px;display:block;}

a.FORUMS:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_06-1.jpg") repeat;}

a.MUSIC
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_07.jpg") repeat;width:63px;height:18px;display:block;}

a.MUSIC:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_07-1.jpg") repeat;}


a.VIDEOS
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_08.jpg") repeat;width:62px;height:18px;display:block;}

a.VIDEOS:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_08-1.jpg") repeat;}

a.MORE
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_09.jpg") repeat;width:63px;height:18px;display:block;}

a.MORE:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_09-1.jpg") repeat;}

a.LOGIN
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_11.jpg") repeat;width:60px;height:18px;display:block;}

a.LOGIN:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_11-1.jpg") repeat;}

a.SIGNUP
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_12.jpg") repeat;width:59px;height:18px;display:block;}

a.SIGNUP:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_12-1.jpg") repeat;}

a.MESSAGE
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_18.jpg") repeat;width:100px;height:31px;display:block;}

a.MESSAGE:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_18-1.jpg") repeat;}

a.ADDTOFRIENDS
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_19.jpg") repeat;width:159px;height:31px;display:block;}

a.ADDTOFRIENDS:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_19-1.jpg") repeat;}


a.VIEWPICS
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_20.jpg") repeat;width:111px;height:31px;display:block;}

a.VIEWPICS:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_20-1.jpg") repeat;}

a.ITUNES
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_21.jpg") repeat;width:97px;height:31px;display:block;}

a.ITUNES:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_21-1.jpg") repeat;}

a.FACEBOOK
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_22.jpg") repeat;width:109px;height:31px;display:block;}

a.FACEBOOK:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_22-1.jpg") repeat;}

a.ONE
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_23.jpg") repeat;width:82px;height:31px;display:block;}

a.ONE:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_23-1.jpg") repeat;}

a.TWITTER
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_24.jpg") repeat;width:108px;height:31px;display:block;}

a.TWITTER:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_24-1.jpg") repeat;}

a.YOUTUBE
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_25.jpg") repeat;width:59px;height:31px;display:block;}

a.YOUTUBE:hover
{float:left;background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20THE%20ALIBI%20DISTRICT/justheader_25-1.jpg") repeat;}
</style>

[Mikeplyts]

I think it's because you're using two separate images for the rollover. For some reason, there's always a little delay (or blink) with rollovers like that because of the HTTP requests sent to the images. I recommend just making one image, with the normal state on the top half and the rollover state on the bottom half because it's just one HTTP request which makes it faster, easier, and smoother. Then, in your CSS, just set the height of the link at half of the image's height (only to show one half) and edit the background image's position to top left for the normal state, and bottom left for the rollover state. Or, you could try using CSS sprites.

[shynomi]

ok, i kinda see what you're saying.
are you talking about this? i must have missed something because if make the height of the original image, it comes out messed up.

CODE

<style>
a.SENDMESSAGE
{float:top left; background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20UNWANTED/header_04.jpg") repeat;width:128px;height:14px;display:block;}

a.SENDMESSAGE:hover
{float:bottom left; background:url("http://i382.photobucket.com/albums/oo268/dygynomi/2010%20UNWANTED/header_04-1.jpg") repeat;}
</style>

all i did on was change the float to top left on the top section of the rollover, then bottom left on the bottom section. i halved the height.

i tried it out on another test page.
http://www.myspace.com/frucatestpage
you can see how it turned out ha.

[Mikeplyts]

Not exactly. On your normal image, just double the height of it and place the rollover image in that bottom half. Then, in your CSS, set the height at half of the new image's height (or, the original image height). And on your background property, change the position of which half is being displayed. For example, I have this image:



It's height is 200 pixels. So, in the CSS, I would set the height property at half of that height (in this case, 100 pixels). Then, on the background property (where you put the image URL), I would change the position of it respectively if it's on hover or normal state. Something like:

CODE

<style>
a#rollover {
    height: 100px; /* Half of the new, single image's height */
    width: 300px;
    background: url('http://images.mikeplyts.net/rollover-image.png') top left no-repeat;
    display: block;
    text-indent: -9999px;
}

a#rollover:hover {
    background-position: bottom left;
}
</style>

You don't have to tamper with the float property, because that's what's keeping your images in a line (or so I assume).

Here's a live example page you can view for a reference.

[shynomi]

Ah, I see what you're saying. You have the hover image and original image combined in one image. So in my scenario, I design the page in photoshop so where I have the links i need to design the rollovers under it? That doesn't seem right.

[Mikeplyts]

Well, you need to make the links you designed in the mock-up separate from the mock-up, in it's own file. Then from there, you can put the rollover underneath, save it, and upload it for use.

[shynomi]

Ok, i'll post back my results. thanks you thus far!

[shynomi]

yeah that worked, thanks guys.
topic can be closed.

[tokyo-rose]

topic can be closed.