PDA

View Full Version : firefox/chrome button/hover issue :(



venom6pak
Mar 17th, 2011, 10:49 PM
hiya guys :)

yet again a problem has had me scratchin my head and ive ran out of ideas trying to debug it trying different settings :confused:

i have this test site here delete from post if needs be
www.deansignori.com/divers/index.php

im guessing u guys can check my css and xhtml code through firefox so il tell u my problem...

the site mentioned has a register and login button top right on header bar, i have this working exactly how i want it in explorer its a simple sprite setup where by i point up or down to the desired part of the picture one state for normal one state for hover but on firefox and chrome and opera i cannot get it to work the image stays the same throughout and has no url link either

i know this is something simple but i cannot do it lol :( any help guys?

...css for the buttons

#headermenu {
width: 250px;
height: 55px;
float: right;
position: relative;
clear: none;
z-index: 0;
}

/*Global Nav Styles*/

ul#nav {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}

ul#nav li a {
background-position: left top;
background-repeat: no-repeat;
display: block;
text-indent: -9000px;
position: absolute;
outline: none;
}

ul#nav:hover li a{
background-position: left centre;

}

ul#nav li a:hover{
background-position: left bottom;

}
/* button layout */
ul#nav li a.regBtn {
background-image: url(images/register.png);
height: 25px;
width: 85px;
top: 6px;
right: 57px;

}

ul#nav li a.membersBtn {
background-image: url(images/login.png);
height: 25px;
width: 65px;
top: 6px;
right: 2px;

}

... css for the holder
#header {
width: 100%;
height: 35px;
background: url(images/headerBar.png) repeat-x;
margin-top: 1px;
position: fixed;
z-index: -2;
}

...html

<div id="headermenu">
<ul id="nav">
<li><a href="index.php" class="regBtn">Register</a></li>
<li><a href="index.php" class="membersBtn">Members Area</a></li>
</ul>
</div> <!-- end headermenu div -->

:thumbsup::thumbsup:

venom6pak
Mar 17th, 2011, 11:58 PM
hey guys thought id better update the post ive resolved the issue now maybe if someone comes across this problem again this post will help them ...

id been using z-index to keep certain elements at the back so my header bar could be fixed and display above all layers at all times because in another site where i used similar bar it would pop behind certain elements and be hidden from display, the z-index solved this issue for the other site no problems but for this site the z-index when used on the div that the buttons were nested in made the buttons not work


so i removed the z-index from the css div that held the buttons and this made the buttons work again in all browsers :)

just hope the issue of the bar appearing behind some elements doesnt happen again or it will mess it right up!

:thumbsup: