Help - Search - Members - Calendar
Full Version: Sliced banner issue in IE8
Forums > Resource Center > Support Center > MySpace Support > Myspace Resolved Topics
dollywood
hi there

my site is just about finished and looks great except for one strange thing. If you rollover the add message banner in IE8 the banner breaks up and the side of my top banner moves - but the links work perfectly!

Any ideas what could be causing this?

here is my code - i apologise in advance my computer wont let me insert a codebox?!

CODE
<style>
.profileWidth table { margin-bottom:760px; width:800px; }
.rail { display:none; }
.gap {
background: top left no-repeat;
width:800px; height:800px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -800px;
</style>

<div class="gap"></div>

<style>

table table div embed, table table div object {position:relative; z-index:9; top: 44px;}

.orangetext15 {display: none;}
.whitetext12 {display: none;}


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


body {
background-color: 000000;
background-image: url("http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yardarm5.jpg");
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

table table table table, table table table td{
background-image:none;
background-color:transparent;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:8pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Lucida Grande;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:7f8c94;
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Lucida Grande;
}

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:FFFFFF;
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Lucida Grande;
}

a {
color: FFFFFF !important;
font-family: Lucida Grande !important;
}

a:hover {
color: 7f8c94 !important;
font-family: Lucida Grande !important;
}

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:7f8c94;
font-size:8pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Lucida Grande;
}

table table table table, div table table table{
border-style:none;
}

</style>


<style>
.latestBlogEntry {
position:absolute;
top:1422px;
margin-left: -395px;
_margin-left: -415px;
left:50%;
width: 325px;
background-color: transparent;
z-index: 9;
}

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


<style>
.friendSpace .orangetext15 {height: 45px !important; width: 850px !important; display: block !important; position: relative; top: 20px; left: 277px; padding: 0 !important; font-size: 0px; overflow: hidden; background-image: url(http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yafrco.png); background-repeat: no-repeat; color: 263636 !important; line-height: 50px !important;}
.friendSpace {position:relative; margin-left:-332px; float:left;}
.friendSpace table, .friendSpace td.text {width:100%;}
.friendSpace a img {border: 3px; border-color: 7f8c94; border-style: solid;}


html body.bodyContent table tbody tr td table.friendsComments {
width:800px !important;
padding:0px !important;
margin:0px !important;
}
table.friendsComments tbody tr td.text table tbody tr td{
height:auto !important;
width: auto !important;
padding-top:10px !important;
padding-bottom:10px !important;
}


html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b {
font-weight:normal;
display:block;
width:800px !important;
border-top:0px !important;
border-right:0px !important;
border-left:0px !important;
border-bottom:1px !important;
border-style: dotted !important;
border-color: 7f8c94 !important;
padding-top:40px;
padding-bottom:10px;
margin-bottom:10px;
}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tbody tr td a img{
width:80px;
height:auto;
border: 3px;
border-color: 7f8c94;
border-style: solid;
}

html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tbody tr td a{
padding-right:10px;
}
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a {
display: block !important;
color: 7f8c94 !important;
}
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td span.blacktext10{
color: 7f8c94 !important;
}


table table table table td.text span.whitetext12 {
position: relative;
top: 0px;
display: block;
left: 0px;
visibility: visible;
width: 1px;
height: 10px;
text-indent: -999999px;
background: transparent bottom left no-repeat;
}

table table table table td.text span.whitetext12 {
position: relative;
top: 0px;
display: block;
left: 0px;
visibility: visible;
width: 1px;
height: 50px;
text-indent: -999999px;
background: transparent bottom left no-repeat;
}

.topbanner {position:absolute; left:50%; top:144px; margin-left:-400px; _margin-left:-401px; width:800px; height:800px; z-index:1;}

.topbannerhover {position:absolute; left:50%; top:920px; _top:920px; margin-left:-400px; _margin-left:-401px; width:800px; height:50px; z-index:1;}

div.topbanner1 a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 800px;
height: 50px;
z-index:1;
}

.topbanner1 {position:absolute; left:50%; top:920px; _top:920px; margin-left:-400px; _margin-left:-401px; width:800px; height:50px; z-index:1;}

.bk1 {position:absolute; left:50%; top:1018px; _top:1022; margin-left:-63px; _margin-left:-97px; width:461px; height:354px; z-index:-1;}

.blog {position:absolute; left:50%; top:1390px; _top:1400px; margin-left:-398px; _margin-left:-413px; width:183px; height:19px; z-index:1;}

.pic {position:absolute; left:50%; top:1018px; _top:1022px; margin-left:-403px; _margin-left:-420px; width:335px; height:461px; z-index:1;}

.tw {position:absolute; left:50%; top:1209px; _top:1221px; margin-left:-398px; _margin-left:-398px; width:320px; height:45px; z-index:1;}

.tw2 {position:absolute; left:50%; top:1283px; _top:1295px; margin-left:-398px; _margin-left:-398px; width:190px; height:250px; z-index:1;}

.showsheader {position:absolute; left:50%; top:1387px; _top:1395px; margin-left:-50px; _margin-left:-81px; width:168px; height:25px; z-index:1;}

.logo {position:absolute; left:50%; top:730px; margin-left:-475px; _margin-left:-475px; width:900px; height:231px; z-index:1;}

.pro {position:absolute; left:50%; top:972px; _top:977px; margin-left:-435px; _margin-left:-450px; width:900px; height:40px; z-index:1;}


</style>

<div class="blog">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yasnews.png" /></div>

<div class="pic">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yapicbk1.jpg" /></div>
<div class="topbanner">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yardmanew.jpg" /></div>

<div class="logo"><img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/icelogo.png" />
</div>

<div class="bk1">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yapltex.jpg" /></div>

<div class="showsheader">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/yastudiodiary.png" />
</div>

<div class="topbannerhover">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersiceblue.jpg" />
</div>

<div class="topbanner1">
<table id="Table_01" width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersice_01.jpg" width="800" height="8" alt="" /></td>
</tr>
<tr>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersice_02.jpg" width="8" height="42" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD01MDYxNjI1OTQ=">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/add.jpg" width="99" height="42" border="0" alt="" /></a></td>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersice_04.jpg" width="43" height="42" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZVYzJmZyaWVuZElEPTUwNjE2MjU5NA==">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/message.jpg" width="190" height="42" border="0" alt="" /></a></td>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersice_06.jpg" width="37" height="42" alt="" /></td>
<td>
<a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTUwNjE2MjU5NA==">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/comment.jpg" width="242" height="42" border="0" alt="" /></a></td>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersice_08.jpg" width="29" height="42" alt="" /></td>
<td>
<a href="mailto:hykya@hotmail.com">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/email.jpg" width="141" height="42" border="0" alt="" /></a></td>
<td>
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/linksheadersice_10.jpg" width="11" height="42" alt="" /></td>
</tr>
</table>
</div>

<div class="pro">
<img src="http://i378.photobucket.com/albums/oo222/tgvisuals/Yardarm/ypre.png" />
</div>


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

<style>
.whitelink, .friendSpace .btext {display: none;}
</style>


Thanks
Mickey
Look for this:

CODE
div.topbanner1 a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 800px;
height: 50px;
z-index:1;
}

Remove the width attribute and see what happens.
dollywood
Hi mike

i changed the height and width values to 0 and thats worked!

thanks AGAIN for your help!

You can go ahead and close this now
Mickey
Topic closed & moved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.