View Full Version : Oddity in Firefox...

07-05-2005, 08:49 PM
If anyone can help with this, you will be my hero. I wouldn't consider myself an amateur when it comes to web development, but every now and then you come across something that stumps you. I've been looking at this for several hours, and desperately need some help. I'm currently using Wordpress for blogging, and I am using a flickr photo gallery plugin. I know this is a CSS issue, but I can't seem to track it down.

On this page (http://www.caseypicker.com/gallery.php?album=544964), I have some images that use a hover style to change the background color of the padding around the image.

In Internet Explorer 6, it looks like this when I mouseover the image:

In Firefox 1.0.4, it looks like this when I mouseover the same image:

Can anyone figure out why I'm having this weird Firefox behavior? I would like it to look just like it does in IE...

Here's a link to my stylesheet, if you want to browse around:
Style sheet (http://www.caseypicker.com/wp-content/themes/greenmarinee/style.css)

Feel free to view the source of the referring page (http://www.caseypicker.com/gallery.php?album=544964)...

Any help would be greatly appreciated!! :D

07-05-2005, 10:01 PM
Mouse over slower, from the bottom. You can see just that bottom green light up. This is just a guess, since I am no CSS guru, but I think you're having the link and the image get hover, and it is only showing in Firefox.

a:link {
color: #78A515;
font-weight: bold;
text-decoration: none;

To test that theory, remove the links around the images and see if the problem is still there.

How to fix it, I'm not sure, but maybe override a:link for that class?

07-05-2005, 10:39 PM
Firefox and IE treat the pseudo class hover differently. In IE it can only apply to a link. In FF it can apply to almost any element but, if a link is involved, generally the link takes precedence, making its effect upon linked images odd.

07-06-2005, 05:10 AM
Basically the issue you are having happens with opera, firefox, and netscape.
This is caused by a default anchor class with a background color in it. To fix it place your Anchors in a class with background of fff to match your pages bg color. (note background transparent is NOT supported with IE, so we'll skip that idea)

page code (note the a class="blank" thats the only change):

<div class="flickr-description"><a href="#" onclick="window.open('http://www.flickr.com/slideShow/index.gne?set_id=544964','slideShowWin','width=500,height=500,top=150,left=70,scrollbars=no, status=no, resizable=no')">View as a slide show</a></div>
<a class="blank" href="http://www.caseypicker.com/gallery.php?album=544964&amp;photo=23762776"><img src="casey_files/23762776_c7efa4fc26_s.jpg" alt="" class="flickr-thumbnail" height="75" width="75"></a>

now for your style (add this anywhere I tested it in style.css)

a.blank:hover {background-color: #fff;}

I was fumbling through your style sheet linkage, got a little confused so I didn't take the time to test this on ie, works with everything else though.

additional information... code for blank tags incase margins borders etc are set.

a.blank:link {border: none; color:#fff; margin: 0px; text-decoration: none;}
a.blank:active {border: none; margin: 0px; text-decoration: none;}
a.blank:visited {border: none; margin: 0px; text-decoration: none;}
a.blank:hover {background-color: #fff; border: none; color:#fff; margin: 0px; text-decoration: none;}

07-06-2005, 02:49 PM
Well, that fixed my problem in Firefox, but now in IE the background color doesn't change on hover. BTW, thanks for all the help guys! Any ideas? :confused:

07-07-2005, 01:28 AM
#flickr-img:hover {
background-color: #78A515;

looks like IE doesn't make use of hover with an image element, I'll try to find a work around and get back to you on it. I tried moving the box outside the image to see how the anchors hover would react to it, didn't get anywhere with it.

07-07-2005, 04:00 AM
I tried to explain and did mention that IE only applies :hover on links. I've used the link hover class to create a passive rollover effect using opacity, however, the implementation is totally different in IE and Mozilla. I think a similar approach is needed here. One set of style for IE, another for Mozilla. I would recommend the * html hack to render IE specific style invisible to Mozilla. How this works, if you don't already know and are just avoiding it, is first you write your style out for Mozilla. Then anything that causes problems in IE, you follow with an additional declaration in the form:

selector.class { */style for other browsers*/

* html selector.class { */IE specific style*/
Finally if you have a style for an element, a class of elements or an id that is only for IE, follow all other declarations for that item with (once again):

* html selector { */IE only style value*/
}The 'hack' is in red, green texts are css comments. Use this method to give IE that hover value for the link that otherwise is a problem in Mozilla.

07-07-2005, 06:45 AM
ooh very nice..
Then with what we talked about, you could do this in your style.css

a.blank:hover {background-color: #fff;}
*html a.blank:hover {background-color: #78A515;}

Another thing I noticed the information in the brackets can be commented with two forward slashes "//" in all the browsers I've tried except IE. *note* IE does read "//" if its before the selector class.

The following gives the same effect.

a.blank:hover {background-color: #fff;}
a.blank:hover {//background-color: #78A515;}
a.blank:hover {background-color: #fff;//background-color: #78A515;}

Yet another way I found on http://www.quirksmode.org/css/condcom.html, the link has more information on IE conditional comments.

You can put the following in your html page.

<!--[if IE]>
a.blank:hover {background-color: #78A515;}

does anyone have any documentation on this? I use w3c.org as my main reference and was unable to find anything about it.

and yes jscheuer1 you did say that above, I skimmed passed what you wrote and went with what I was thinking.

07-07-2005, 07:33 AM
There is also the !important hack. I prefer the * html hack for style sheets though. The !important hack works like so:

style="width:109px!important;width:119px;"The second value being for IE only. This can be used in a stylesheet but, is more suited to inline style IMOP. Both hacks can cause problems in IE5 Mac as often, it interprets things like Mozilla. You can hide from IE5 Mac in a stylesheet like so:

/*exclude IE5 Mac\*/
* html selector.class {
/*stop excluding IE5 Mac*/Not all IE specific style should be hidden from IE5 Mac though - testing and/or a vast knowledge of IE5 Mac's peculiarities is required. Generally though, anything to do with the box model (padding, borders, cell-spacing and the like) will be treated in IE5 Mac as in Mozilla. There is no way to exclude IE5 Mac from inline style that I know of.

07-07-2005, 03:37 PM
You guys are great! :thumbsup: I really appreciate all the help you've given me thus far.

I implemented the changes that everyone suggested, and it seems that this one worked best:

a.blank:hover {//background-color: #78A515;}
It is working great for my album page (http://www.caseypicker.com/gallery.php?album=544964) and it should work for the gallery main page (http://www.caseypicker.com/gallery.php) (considering they are using the same 'blank' class), but (once again) I get no hover effects in IE. This is only occuring on my main gallery page, and not the album page.

The only difference that I could see in the two link/img tags, is that the tag on the gallery main page has a 'title' attribute in the anchor tag, and an 'alt' attribute in the img tag. I tried removing these to see if that would make a difference, but it did not.

I also tried using the different variations of styles that everyone suggested, but to no avail...

Can anyone else see something I'm missing? :confused:

Once again, you guys have already come through for me in a BIG way. I appreciate it!

07-16-2005, 04:19 AM
Sorry for the bump but I got linked here for a different reason.

on the IE hover effect:


has a javascript in it to make the hover class work on the images in IE.

the .js

function hoverOff(hoverElement) {
hoverElement.className = "hoverOff";
function hoverOn(hoverElement) {
hoverElement.className = "hoverOn";

the css

.hoverOff {
.hoverOn {

granted I'm using the opacity filter on the images but the hover class can be used to apply a background color as well in your case.

07-16-2005, 05:22 AM
when u r having issues with the text hover attributes being added to images, separate the effects...

a:hover { ..whatever common effects... }
p a:hover {text-decoration: underline; ...any other effects...}

by separating the hover effects this way, no hacks are necessary...

maybe even throw in
img a:hover{ border: 0; ...etc}
for image specific hover states...

if u want the hover states to work in IE like it does in all modern web standards compliant browsers... then just include the .htc file which activates it in IE...
(ive stopped using it, so havent the link handy :P)

07-16-2005, 05:32 AM