cssinternet-explorer-10

css url() not recognized in internet explorer 10

I have this line in my CSS: 

.ui-icon-zoom-in { content: url(images/16x16/ZoomIn.png); }

Which I am using with jQuery UI Button widget like this:

$("#zoomin").button({ text: false, icons: { primary: "ui-icom-zoom-in" } });

In Chrome, I can see the image centered within the button. However, in IE10, I do not see the image.

Am I missing something here?

Solution

  • The content property is only valid on :before and :after pseudo-elements. You should change it to:

    .ui-icon-zoom-in { 
  background: url(images/16x16/ZoomIn.png) no-repeat; 
  width:16px;
  height:16px;
}

    Apart from that, IE8+ only supports content property if a valid DOCTYPE is specified.