No replies
jacobw201
jacobw201's picture
Offline
newbie
Last seen: 2 years 11 weeks ago
Timezone: GMT-8
Joined: 2012-01-25
Posts: 1
Points: 2

Hi everyone! I'm new to this forum, and I found it when searching for a community that might be able to help me with an odd css problem - hence the also strange subject to this post!

NOTE: I only have two browsers, Safari and Firefox 9.0.1 - I can only recreate this problem in Firefox 9.0.1

The problem that is occurring is: I have an anchor tag which is a block, with a background image, and whose hover state entails the background image position changing to make it look like it lights up. Sometimes, when hovering over this image, another image disappears (the banner holding the company's name). This problem only appears when hovering over the aforementioned link.

This is on this page: www.lawoftime.org/home.html - it is the button that says "About Jose Arguelles/Valum Votan" - when hovering over that, the black and white banner on the left-hand side of the screen which says (in all caps) "Foundation for the Law of Time" disappears (sometimes).

Here is the code of the anchor/button in question:

<a id="about" href="../jose-arguelles-valum-votan.html">About Jos&eacute; Arg&uuml;elles/Valum Votan</a>

Here is the styling for the anchor/button:

a#about, a:link#about {
width: 131px;
height: 46px;
position: absolute;
top: 159px;
left: 500px;
margin: 0px;
padding: 0px;
background-image:url(../images/button_about.png);
text-indent: -9999px;
}
a:hover#about, a:active#about { background: url(../images/button_about.png) -0px -46px; }

Here is the HTML for the banner image, whose bottom section disappears when hovering over the above button:

<a href="http://www.lawoftime.org/home.html" id="banner_home"><h1><img src="../images/banner_print.png" alt="Foundation for the Law of Time - Lawoftime.org" width="616" height="176" /></h1>
</a>

Here is the styling for this banner image:

#banner_home {
	background-image: url(../images/banner_home.png);
	text-indent: -9999px;
	position: absolute;
	top: 17px;
	left: 0px;
	width: 389px;
	height: 176px;
	z-index: 8;
}

In order to recreate this problem, go to http://www.lawoftime.org/home.html - and hover over the "About Jose Arguelles/Valum Votan" button a few times, coming from different angles, you'll notice when the images disappears"

Thanks so much for any assistance!

Sincerely,

Jacob