Rollovers wont roll Options

[ZeT0]

As far as I can see, everything is done correctly, they're EXACTLY on top of one another, the opacity thing just doesn't work.
It's stays the same. :\

CODE

<style>
.profileWidth table { margin-bottom:890px; width:800px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:900px; height:1150px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -950px;
</style>

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

<style type="text/css">

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

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

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

body {
background-color: 000000;
background-image:url(http://img35.imageshack.us/img35/1557/backgroundvs.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:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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

a:hover {
color: 666666 !important;
font-family: Arial !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:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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

.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

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

</style>

<div class="topbanner">
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_01.png" /><br>
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_02.png" /><br>
</div>

<div class="topbannerhover">
<img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_01.png" /><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_02.png" /<img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_03.png" /<img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_04.png" />
</div>

I hope someone can help! D:

[Mickey]

It works. There are just two problems: first, the z-indexs make it so that the rollover images go above the links; second, there are no links so the hover function doesn't end up working. Look for this set of codes:

CODE

.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

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

Replace it with this:

CODE

.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:2;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

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

Then you need to set up the links using <a> tags inside the "topbanner" DIV, like this:

CODE

<a href="URL"><img src="URL" alt="" /></a>

This means you'll probably need to slice up the image into small links since you're using one whole image for the navigation.

[ZeT0]

I changed everything like you said to.

CODE

<style>
.profileWidth table { margin-bottom:890px; width:800px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:900px; height:1150px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -950px;
</style>

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

<style type="text/css">

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

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

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

body {
background-color: 000000;
background-image:url(http://img35.imageshack.us/img35/1557/backgroundvs.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:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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

a:hover {
color: 666666 !important;
font-family: Arial !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:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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

.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

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

</style>

<div class="topbanner">
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_01.png" /><br>
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_02.png" /><br>
</div>

<div class="topbannerhover">
<a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_01.png" alt="" /></a><a href=" www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_02.png" alt="" /></a><a href=" www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_03.png" alt="" /></a><a href=" www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_04.png" alt="" /></a>
</div>

But it still doesn't work.
When I took the links out of the :

CODE

<div class="topbannerhover">

And put them into :

CODE

<div class="topbanner">

When I hovered the links, they flashed away, but they were UNDER where they were supposed to be.
Thanks again.

[ZeT0]

Okay, so I've done that aswell, and it's still not working.

CODE

<style>
.profileWidth table { margin-bottom:890px; width:800px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:900px; height:1150px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -950px;
</style>

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

<style type="text/css">

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

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

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

body {
background-color: 000000;
background-image:url(http://img35.imageshack.us/img35/1557/backgroundvs.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:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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

a:hover {
color: 666666 !important;
font-family: Arial !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:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

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

.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

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

</style>

<div class="topbanner">
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_01.png" /><br><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_01.png" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_02.png" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_03.png" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_04.png" /></a>
</div>

<div class="topbannerhover">
<a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER2_01.png" alt="" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER2_02.png" alt="" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER2_03.png" alt="" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER2_04.png" alt="" /></a>
</div>

[Mickey]

You forgot to change the z-index of this section to 2:

CODE

.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

Once you change it, you should see a difference.

[ZeT0]

Now they work 'backwards' so to speak, and the light one shows up all the time, then hovers to the dark one.
But I can live with that.
Although I can't live with the links going to :
http://www.myspace.com/www.google.com
Not just www.google.com
Do you know how to fix this too? :)

[jiyong]

You need to put "http://" in front of all the links you use. Otherwise it will default to "http://myspace.com/"

[ZeT0]

I've already swapped them, and thankyou both of you for helping.
I doubt this was worth me staying up 'till 8:36am for. Ahaha.
Also, could you please not delete this thread so I can come back to it for reference? :)

[jiyong]

Haha, we would just close and move it. Is this one good for closing? You can always PM a staff member to reopen it.