hover and active image

[davelf]

Hi, i have problem with hover and active image.
I use this script, it's css base:


.new {
float:left;
width: 161px;
height: 168px;
background: url(images/btn/new.jpg) bottom left;
text-indent: -99999px;
margin-left:1px;
}
.new:hover, .new:active {
background-position: top left;
}


this is in html

<a href="#new" class="new"></a>

but, it doesn't work.


So i try another way, i try this one:

<a href="latestHighlights.php" onmouseover="document.images['q1q'].src='img/font/news n gallery hover.jpg';" onmouseout="document.images['q1q'].src='img/font/news n gallery.jpg';" onmousedown="document.images['q1q'].src='img/font/news n gallery hover.jpg';"> <img src="img/font/news n gallery.jpg" name="q1q" id="q1q" border="0" title="News & Gallery"/></a>
and this one doesn't work too.

So is there any solution?
Thanks in advanced.

[coothead]

Hi there davelf,

I tested your CSS code successfully in IE9, Firefox 7, Opera 11 and Safari 5. ;)
Of course, I was unable to test your image, as you did not supply it. :(

So what is the actual problem that you are experiencing?

coothead

[jscheuer1]

We really would need a link to the page or to a page that shows the problem.

But if I had to guess I'd say that with the first one it probably needs to be:


display: block;

In the case of the second one, those spaces in the image filenames bother me. Try replacing them with %20 tokens or renaming the files without the spaces and changing their names in the code accordingly.

With both of them there's always the chance that the image(s) aren't there or are but have a different case in their path and/or filename than is written in the code.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[davelf]

@coothead
@ John
Thank you very much for your fast response.
This is the link to my page (http://metablast.net/uni/)

This is the part that i try to make hover and active image:
http://www.dynamicdrive.com/forums/attachment.php?attachmentid=4121&stc=1&d=1318415641

@ coothead, you need to understand that in my country, there's a lot of stupid user that still using I.E 6 and never update their firefox, lol.
So the basic standard i used, FF. 5, Opera 11, Safari 4.0, I.E 7.

[coothead]

Hi there davelf,

coothead, you need to understand that in my country, there's a lot of stupid user that still using I.E 6
I am quite aware that the world is full of stupid people but that does not mean that I have to indulge them. ;)
In fact I try to avoid stupid people like the plague. :D

As for IE6 and IE7, I now only supply those browsers with plain text...


<!--[if !lt IE 8]><!-->
<link rel="stylesheet" type="text/css" href="modern-browser.css">
<!--<![endif]-->

Are you aware that the site to which you provided a link has 252 Errors and 82 warnings...
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmetablast.net%2Funi%2F
...which, obviously, does not help browser compatibility issues. :(

coothead

[jscheuer1]

I can't speak to those others, but in IE 7 it works. It also works in Firefox 7, and Opera 11.51.

Perhaps you're viewing an older cached version of the page. Clear the browser cache and refresh the page.

I'd still try adding display: block; it may help some browsers and shouldn't hurt anything and perhaps the link pseudo class (here and similar for the others):


.new:link {
float:left;
display: block;
width: 161px;
height: 168px;
background: url(images/btn/new.jpg) bottom left;
text-indent: -99999px;
margin-left:1px;
}
.new:hover, .new:active {
background-position: top left;
}

There are a few apparently non-fatal script errors. But since this is a css effect, they don't affect it:


Error: Cufon is not defined
Source File: http://metablast.net/uni/
Line: 30

Error: Cufon is not defined
Source File: http://metablast.net/uni/script/book/script-foot.js
Line: 67

Error: obj is null
Source File: http://metablast.net/uni/script/promo/script-head.js
Line: 2

Also, the following css errors (according to Firefox):


Warning: Expected media feature name but found '-webkit-min-device-pixel-ratio'.
Source File: http://metablast.net/uni/script/menu/css/menu_blacksaf.css
Line: 1

Warning: Error in parsing value for 'height'. Declaration dropped.
Source File: http://metablast.net/uni/script/carousel/skin.css
Line: 22

Warning: Error in parsing value for 'filter'. Declaration dropped.
Source File: http://metablast.net/uni/script/book/style.css
Line: 140

Of those, only the 'height' one seems troubling, as the other two are browser specific. Even it may be inconsequential - if the page lays out OK without it, it wasn't needed anyway. It is (from line 22 of skin.css):


.jcarousel-skin-tango .jcarousel-item {
width: 150px;
height: 250x;
}

The carousel might not jump around so much while the page is loading if that value were 250px, or it might actually throw things off.

[davelf]

@coothead, thanks for your advice, and for that error check. I never use that validator.w3 check before.

@John, I already check with IE.7 and ya it's work, but still there's problem in firefox. This is frustrating, may be I'll fix another issue first.

[jscheuer1]

As it so happens I have a copy of Firefox 3.5.19 laying around and it works in that. So, since it also works in Firefox 7, I'd be very tempted to say it's some bug that crept in with Firefox 5 that has since been corrected.

Added Later:

Then I figured, what do I need Firefox 3.x for anyway? I had only gotten it to test some page in a long time ago when someone was balking at updating to Firefox 4. So I just updated it to Firefox 5, and guess what? It works in Firefox 5. So either the addition of the display: block; fixed it and you just need to clear the cache and refresh the page, or there's some difference between your Firefox 5 and my Firefox 5.

[davelf]

Dear John, the problem fixed.
So to make the active button
in firefox, i try myclass:focus. And it's works.
in Ie, i used myclass:active.

Thanks.