9 replies to this topic

[JeffroDH]

Good day everyone!

for reference, the site can be viewed @ store.elitehfp.com to get an idea of what I'm talking about.

In Chrome, when I hover over the product images on the home page I see a horribly ugly transition before the normal border appears.  

The desired, and appropriate behavior works fine in Safari.  Has anyone else encountered anything of the sort?  Anyone willing to give some direction for tracing the issue?

Really appreciate all the help I get here.  Thanks in advance.

[ErikMM]

you might be able to ditch the image swap on hover, and just add a border alone (e.g. border-radius: 5px;)

[JeffroDH]

I assumed that was what was actually happening, some sort of CSS3 transition.  I've never heard of an 'image swap', is that javascript or jquery or something??

[ErikMM]

perhaps I am using old verbage, that was affiliated with javascript

looks like you were 'swapping' a plain image with a new image+border with css, no?

I think this is the issue, on hover its looking for things that are not there as I got 3 errors:

Quote

1. Failed to load resource: the server responded with a status of 404 (Not Found) http://store.elitehfp.com/images/sf-navbar_bg-act.jpg
2. Failed to load resource: the server responded with a status of 404 (Not Found) http://store.elitehfp.com/images/sf-navbar_bg-separ.gif
3. Failed to load resource: the server responded with a status of 404 (Not Found) http://store.elitehfp.com/images/wrapper_pic_border-act-.gif

#3 I believe is the issue you were concerned with in your first post above

This might be helpful, and what I was getting at: http://css-snippets.com/adding-a-border-to-an-image-on-hover/

to make rounded borders I imagine just add: border-radius:5px; playing with the radius you want

Edited by ErikMM, 27 August 2012 - 06:40 PM.

[ErikMM]

the solution in the ^link above recommends "outline," but outlines don't allow rounded edges (yet)

work around? starting with a border before hover (same color as your background color)  will avoid the jump or movement when adding a border on hover

you may have to add 1 px padding as well to make the rounded corner show on hover

[JeffroDH]

Thanks!  I'm still trying to find my way around all the css in this template... Appreciate the help.

[JeffroDH]

I suppose a follow-up question would be this: how were you able to see those errors?

[ErikMM]

JeffroDH, on 28 August 2012 - 02:00 AM, said:

I suppose a follow-up question would be this: how were you able to see those errors?

with chrome right click on the image, or any element, and click "inspect element"

the same for firefox, and ie

I think chrome has best "inspector", then firefox next best

firefox has a free plugin called "firebug" that is really good, maybe better than chrome's default...close tie perhaps?

Edited by ErikMM, 28 August 2012 - 05:40 PM.

[ErikMM]

JeffroDH, on 28 August 2012 - 01:59 AM, said:

Thanks!  I'm still trying to find my way around all the css in this template... Appreciate the help.

Templates are usually a mistake depending on who you get them from.

The best bet is DIY, as you will know what you built and how. There are builds by some of these people, though not all of them will assist with builds: http://forums.oscommerce.com/members/page__filter__10

I think burt, and dunweb have services and "templates," but not sure on the details. I think multimixer has a template system that he will support if you buy in. There are a few others on that list that may help for $$.

If you have time and patience, DIY and share, that's what open source is all about.

Edited by ErikMM, 28 August 2012 - 05:51 PM.

[JeffroDH]

Well, I'm ending up doing a lot of this DIY, although I hired a developer to do some of the stuff that was just over my head.  I'm learning a ton.  

Unfortunately, I have patience, but no time.  Ha ha.  I am compiling a good notebook full of notes that I'll share as soon as the store is actually at 100%.