a:active in firefox...

Mike Lane

I'm not sure what is the best room for this, but since there is plenty of cobranding stuff in this one, I'll post it in here.

I have done more work on my site. The previous buttons were far too tall and I didn't like their placement and mostly I didn't like how they didn't preload properly which caused a delay for the a:hover.

I have changed it up and made the buttons shorter and used the background positioning hack (is it a hack? I guess not, more of a trick...) to make sure there is no lag when the mouse hovers over the image (just like the SM cart images do in the add to cart box -- check it out on your site if you haven't).

Anywho, the problem is now that I can't get the a:active to work in firefox with those buttons. In IE and Safari I have verified that when you hover you get a full color image and when you click you get a glow behind the text. However in firefox 1.0.4 when you click you don't get any change in the image. I checked it out on the cart image in the add to cart and the same thing happens there.

So is this a firefox bug of some kind and if so is there some known solution / workaround? If it isn't a bug have I implemented it improperly or something?

devbobo

Mike,

I think Firefox is a bit stricter in the way it appears CSS styles, if you think about it at the time an element becomes "active" the "hover" attribute also still exists. So try creating an CSS definition like this...

.HeadHome a:hover:active {
background-position: 0 -100px;
}

I haven't tested this piece of code in smugmug, but i have written stuff for Firefox in the past that used the same concept.

Hope this helps,

David

devbobo

ok forget my last comment, the problem is that you are using the spacer.gif overlayed on the object that you are trying to "active", so the result is that the spacer.gif img element is becoming active not the actual item you want.

so remove the img element containing the spacer.gif and the code works fine.

You might also want to consider removing the preload on the images you're not using anymore.

David

Mike Lane

devbobo wrote:

ok forget my last comment, the problem is that you are using the spacer.gif overlayed on the object that you are trying to "active", so the result is that the spacer.gif img element is becoming active not the actual item you want.

so remove the img element containing the spacer.gif and the code works fine.

You might also want to consider removing the preload on the images you're not using anymore.

David

Hmmm. The thing is that the spacer gif is required because it is the only real element in the layer and it is the thing that is wrapped in the <a href> tag (which is the only way that ie will allow :hover or :active to work). Also the spacer gif is required to keep the layer at the proper size, without the image the layer will collapse in ie. I will try a:hover:active but this is the first time I've heard of that (hover is one state, active is a distinctly different one).

I thought I had gotten the remnants of the preload. Thanks for pointing out that I hadn't.

devbobo

Mike Lane wrote:

Hmmm. The thing is that the spacer gif is required because it is the only real element in the layer and it is the thing that is wrapped in the <a href> tag (which is the only way that ie will allow :hover or :active to work). Also the spacer gif is required to keep the layer at the proper size, without the image the layer will collapse in ie.

Mike,

The spacer.gif isn't required to keep the layer at the proper size. You achieve this by setting the height and width style property of the parent div element as below...

[PHP]<div class="HeadHome" style="width:156px;height:50px"><a href="http://www.mikelanephotography.com"/></div>[/PHP]

Note, if you end up using the code like this, you will need to convert your div elements to span elements, like below...

[PHP] <!-- BEGIN CONTAINER FOR ROLL OVERS -->
<div id="ROContainer">

<!-- BEGIN ROLLOVERS -->

<span class="HeadHome" style="width:156px;height:50px"><a href="http://www.mikelanephotography.com"/></span&gt;

<span class="HeadInfo" style="width:156px;height:50px"><a href="http://www.mikelanephotography.com"/></span&gt;

<span class="HeadPricing" style="width:156px;height:50px"><a href="http://www.mikelanephotography.com"/></span&gt;

<span class="HeadLinks" style="width:156px;height:50px"><a href="http://www.mikelanephotography.com"/></span&gt;

<span class="HeadHelp" style="width:156px;height:50px"><a href="http://www.mikelanephotography.com"/></span&gt;

<span class="HeadSearch" style="width:156px;height:50px"><a href="http://www.mikelanephotography.com"/></span&gt;

<!-- END ROLLOVERS -->

</div>
<!-- END ROLLOVER CONTAINER -->[/PHP]

If you got the spacer.gif example from smugmug, here it is used as part of the copyright protection. By placing the spacer.gif on top and loading the actual image as the background url, a user can't right-click and save the image to disk.

Cheers,

David