CODEWITHSUNDEEP
htmlcssinternet-explorergoogle-chrome
Tim Freese
Tim Freese

Reputation: 435

CSS Working Different in Chrome and IE 8

I have this CSS class that is working fine in Chrome, but in IE 8(yes my work still uses IE 8) the background image isn't showing up. I am thinking that IE 8 may not know what to do with some part of the CSS but haven't been able to pin point it.

Here is the CSS class

ul.action:not(.btnImage) li a:not(.btnImage), ul.groupAction:not(.btnImage) li a:not(.btnImage),  ul.actionGradient:not(.btnImage) li a:not(.btnImage){
background-color: transparent !important;
background: url("../images/buttons/btnShineBackground.png") top left repeat-x !important;
border-width: 0px 1px !important;
border-color: #f47a2a !important;
border-style: ridge !important;
padding: 0px !important;
color: #FFF !important;
width: 120px !important;
height: 29px !important;
text-align: center !important;
vertical-align: middle !important;
line-height: 29px !important;
font-size: 10px !important;
font-weight: lighter !important;
font-family: Arial Black !important;
font-style: normal !important;
text-transform: uppercase !important;

And here is the HTML

<ul class=" action"><li><a href="javascript:void(0);" onmousemove="window.status='';"     onmouseout="window.status='';" id="r898BB6A34E694110894F489DA4BEA3BB1DE_3" onfocus="storeFocusField(this);" onclick="customOnClick(this);submitAjax(this,'PageContainer','a_r898BB6A34E694110894F489DA4BEA3BB1DE_3','0','','','','N','',null,'');">Continue</a></li></ul>

Upvotes: 0

Views: 356

Answers (4)

Dan Hayman
Dan Hayman

Reputation: 89

IE8 doesn't support those CSS selectors. But you're way over complicating things.

It'd be simpler using multiple selectors and you don't need to use the unsupported pseudo classes

UL.action{
  background: url("../images/buttons/btnShineBackground.png") top left repeat-x;
}
UL.action.btnImage{
  background: none:
}

Upvotes: 1

gvee
gvee

Reputation: 17161

IE8 does not support CSS3 selectors (e.g. :not)

Reference: http://caniuse.com/#feat=css-sel3

Upvotes: 0

Spudley
Spudley

Reputation: 168655

Very simple: You're using CSS features in your selectors that are not supported in IE8.

IE8 does not support CSS :not(). Therefore your selector won't work. And therefore none of the CSS inside that selector will be seen.

your options are:

  1. Rewrite your CSS so you only use features that are available in the browsers you want to support.

  2. Keep using those features, and stop supporting IE8.

  3. Use a polyfill script like Selectivizr to help IE8 understand those CSS selectors.

Upvotes: 1

David Nguyen
David Nguyen

Reputation: 8528

IE8 does not support that Pseudo class: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Upvotes: 0

Related Questions