Trouble with Box Shadow on Rollover (:hover)

[charlie]

See test version…
Looks good in FireFox (3.6.24 MAC) but box shadow on rollover (:hover) isn’t working with Safari (4.1.3 MAC). And, I’m not sure about ie.

Any suggestions?

Thank you,
CM

[standuncan]

You need to use the other browser prefixes to make it cross-browser compatible, see below:

Using different value examples, but all achieving the same look:

-webkit-box-shadow:0 0 8px rgba(0,0,0,.40);

-moz-box-shadow:0 0 8px rgb(153,153,153);

-o-box-shadow:0 0 8px #999;

box-shadow:0 0 8px #999999;

*Note: This will not work with any older versions of IE.

[TheDoc]

@standuncan – it looks like that’s in there… but it doesn’t seem to be working:

#pbnj div.pbnj-charms-container div.pbnj-charm-item a:hover,

#pbnj div.pbnj-jewelry-container div.pbnj-jewelry-item a:hover,

#pbnj div.pbnj-collections-container div.pbnj-collections-item a:hover {

display: inline-block;

width: 170px;

height: 60px;

-webkit-box-shadow: 0 0 8px #999999;

-moz-box-shadow: 0px 0px 8px #999999;

box-shadow: 0px 0px 8px #999999;

}

[charlie]

I added the -o-box-shadow for Opera, changed -webkit- to rgba color, added 0px for spread amount and some ie fixes.

But it’s still not working in Safari 4.1.3. Could it have something to do with the box-shadow being applied to an “a” tag?

#pbnj div.pbnj-charms-container div.pbnj-charm-item a:hover,

#pbnj div.pbnj-jewelry-container div.pbnj-jewelry-item a:hover,

#pbnj div.pbnj-collections-container div.pbnj-collections-item a:hover {

display: inline-block;

width: 170px;

height: 60px;

-webkit-box-shadow: 0px 0px 8px 0px rgba(153, 153, 153, 1);

-moz-box-shadow: 0px 0px 8px 0px #999999;

-o-box-shadow: 0px 0px 8px 0px #999999;

box-shadow: 0px 0px 8px 0px #999999;

-ms-filter: progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=0),

progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=90),

progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=180),

progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=270);

filter: progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=0),

progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=90),

progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=180),

progid:DXImageTransform.Microsoft.Shadow(Color=#999999, Strength=6, Direction=270);

}

[standuncan]

Oops, I over-looked you having it in there. You do not have to use rgba color-mode, I was just showing different examples.

[standuncan]

Maybe try relocating your box shadow and pseudo to the outer div instead of the a tag?

When looking through the inspector in Chrome, I don’t see any of the a:hover being applied.. like it’s not being recognized? But it is in FF and IE, hmm…

In IE, with the Filter style, it adjusts for the size of the shadow and then pushes your element. I would remove it in IE.

[TheDoc]

Yea, can’t get it to show in the inspector either. I feel like there must be an error somewhere in there. Maybe on the page itself or in the CSS.

[charlie]

Maybe a plain border on hover for ie 7 and 8 would be simpler. I’ll try moving the hover style to the “DIV” instead of the “a” link to fix the Safari issue.

[noahgelman]

Hmm… it might be because you have a dozen or so CSS errors.

Open up the console in firebug and enable the logging of CSS errors, find them in your css and correct them. One of them might be the root of your issue. There’s is a bug somewhere and FF is able to compensate and Safari isn’t.

[joshuanhibbert]

@Hompimpa The fourth value is spread. This is a pretty handy property that acts in a similar way to a border. It is 0px by default, so it doesn’t actually need to be declared.

[charlie]

I’ve moved the styling for hover to the div instead of the link and it’s working better. Thank you!

Test Site…

IE 7 is still acting funny – any ideas? I tried adding display inline for ie 7 but it’s not working.

CM

[Author]

Posts