Why is this CSS being applied inconsistently across frameworks/environments/browsers?

Question

0.00/5 (No votes)

See more:

SharePoint2010

I've got a prototype created in Meteor where the CSS / jQuery works fine in creating a shadow effect and adding a border to various images as they are hovered; specifically, in the Meteor prototype (it's a Sharepoint app, but testing features like this out is much quicker with Meteor) I have this CSS:

.addshadow {
	z-index: 4;
	-moz-box-shadow: 0 0 7px #000;
	-webkit-box-shadow: 0 0 7px #000;
	box-shadow: 0 0 7px #000;
}
.addborder {
  border: 1px solid gold;
}

...and this jQuery:

Template.postTravelSection0.events({
  'mouseenter #imgPostTravelTop': function() {
    $('#imgPostTravelTop').addClass('addborder');
    $('#imgPostTravelTop').addClass('addshadow');
  },
  'mouseleave #imgPostTravelTop': function() {
    $('#imgPostTravelTop').removeClass('addborder');
    $('#imgPostTravelTop').removeClass('addshadow');
  },
  . . .
});

It works fine on my Meteor-generated page -- on mouseenter / hovering into an image, it grows a golden five O'Clock shadow, and on mouseleave they are removed.

However, virtually the same thing in the Sharepoint code:

CSS:

.finaff-form-help-shadow {
	z-index: 4;
	-moz-box-shadow: 0 0 7px #000;
	-webkit-box-shadow: 0 0 7px #000;
	box-shadow: 0 0 7px #000;
}
.finaff-form-help-addborder {
  border: 1px solid red;
}

(I used red just so that it will show up clearly)

jQuery:

$( "#imgPostTravelTopLeft, #imgPostTravelTopRight, #imgPostTravelCenter, #imgPostTravelBottom" ).hover(function() {
        $(this).addClass('finaff-form-help-addborder');
        $(this).addClass('finaff-form-help-shadow');
  	}, function() {
        $(this).removeClass('finaff-form-help-addborder');
        $(this).removeClass('finaff-form-help-shadow');
  	});

...has different effects, to wit:

IE8: Nothing - no shadow, no border
Firefox: shadow but not border
Chrome: shadow but not border

It's not surprising that IE8 plays the role of the spoiled brat, living down to its recalcitrant reputation; but why do Firefox and Chrome also refuse to show the border?

Posted 30-Sep-15 7:36am

B. Clay Shannon

Add a Solution

Comments

Richard Deeming 30-Sep-15 13:46pm

Any reason you're using jQuery for something that could just as easily be done in pure CSS?

B. Clay Shannon 30-Sep-15 13:54pm

Good answestion (combination answer and question); I assume you mean something like:

img:hover {
// with the CSS chicanery in here
}

?

I'll try it...

Richard Deeming 30-Sep-15 13:57pm

You could do that, but it would apply to every image on the page.

I'd be inclined to use the CSS classes:

.finaff-form-help-shadow:hover { ... }
.finaff-form-help-addborder:hover { ... }

Then you can just add the CSS classes to the images you want the effect on, and remove the jQuery code.

B. Clay Shannon 30-Sep-15 14:29pm

Okay, first step (Meteor) successfully accomplished. I got rid of the jQuery altogether, and am just using this CSS:

#imgPostTravelTop:hover, #imgPostTravelTopRight:hover, #imgPostTravelCenter:hover, #imgPostTravelBottom:hover {
z-index: 4;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;

border: 1px solid gold;
}

Now on to the Sharepointiness of things.

Richard Deeming 30-Sep-15 13:52pm

For the Firefox and Chrome issue, is Sharepoint adding a style="border-width:0px" to your images? The style attribute will override any styles set by CSS classes.

B. Clay Shannon 30-Sep-15 13:58pm

I'm deeming this as a good likelihood, although I don't see it at the immediate level of CSS. There is so much of it in master page CSS files, though, that I can't say for sure.

Richard Deeming 30-Sep-15 14:00pm

It won't be in the CSS files; it'll be directly in the HTML markup:
<img id="imgPostTravelTopLeft" src="..." style="border-width:0px" ... />

B. Clay Shannon 30-Sep-15 14:03pm

That is applied to several individual images (I searched through the "View Source" for the page), but it doesn't seem to be globally applied...

Richard Deeming 30-Sep-15 14:07pm

Did you try the browser's developer tools to see if you can trace where the border styles are coming from?

If you can't get the border to work, outline[^] might be an option.

Richard Deeming 30-Sep-15 13:54pm

And finally, box-shadow is not supported in IE8[^], which is why the shadow isn't appearing there.

Some versions of Sharepoint even force IE to use an earlier rendering mode, so it's possible that the shadow won't work in any version of IE.

B. Clay Shannon 30-Sep-15 13:57pm

I wonder if the cats behind old versions of IE went on to work for Volkswagen?

B. Clay Shannon 30-Sep-15 13:59pm

Since IE doesn't support box-shadow, is there a workaround for these delapidated old browsers (which, unfortunately, are still used by a high percentage of users here)?

Richard Deeming 30-Sep-15 14:06pm

You'd have to use the IE-specific filters to add the shadow:
How to Simulate CSS3 box-shadow in IE6-8 Without JavaScript[^]

phil.o 30-Sep-15 14:31pm

Probably not. After all, the firmware was/is working ^^

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

B. Clay Shannon · Accepted Answer · 2015-09-30T09:15:00

Solution 1

This CSS works real well (getting rid of the jQuery altogether):

#imgPostTravelTop:hover, #imgPostTravelTopRight:hover, #imgPostTravelCenter:hover, #imgPostTravelBottom:hover {
z-index: 4;
-moz-box-shadow: 0 0 7px #000;
-webkit-box-shadow: 0 0 7px #000;
box-shadow: 0 0 7px #000;

border: 1px solid gold;
}

...but the following on a separate image to test how IE8 would do:

#imgPostTravel:hover {
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
}

...does nothing; I see no box-shadow yet. I got this from http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/[^]

Posted 30-Sep-15 9:15am

B. Clay Shannon

Updated 30-Sep-15 9:16am

v2

Comments

Richard Deeming 1-Oct-15 8:55am

This is where it gets complicated. :)

IE8 replaced the old "filter" syntax with a new "-ms-filter" syntax:
-ms-filter property (Internet Explorer)[^]
The CSS Corner: Using Filters In IE8[^]
IE8 ignores "filter" CSS styles[^]

This syntax was then deprecated in IE9, and removed in IE10.

So to make it work across the board, you'll need:


/* IE6/7: */
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000);
/* IE8: */
-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000)";
/* Firefox 3.6 or earlier: */
-moz-box-shadow: 0 0 7px #000;
/* Chrome 9, Safari 5, Android 3, Blackberry 7 or earler: */
-webkit-box-shadow: 0 0 7px #000;
/* Standards-compliant: */
box-shadow: 0 0 7px #000;

B. Clay Shannon 1-Oct-15 9:09am

Awesome, thanks; I'll try it out.