css url() not recognized in internet explorer 10

Question

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?

Have you declared doctype? I know IE sometimes doesn't support CSS3 unless you declare HTML5 doctype on the first line: ` ` In correct CSS, `content` tag is only valid on `before` and `after` pseudo elements. You may be better off just appending the image using jquery. — Glitch Desire, Apr 21 '13 at 14:57
As I say below, you can't use `content` on anything except `:before` and `:after` pseudo-elements. Chrome should not be rendering it. (I know, gasp, for once IE is the one behaving correctly!) — Glitch Desire, Apr 21 '13 at 15:30
You'd be surprised at how often IE is right since IE9. IMHO it's become a much better browser than Gecko over the past 2~3 years, and I've frequently seen it outperform Webkit in complex CSS3 implementations. — Niels Keurentjes, Apr 21 '13 at 19:01

score 15 · Accepted Answer · answered Apr 21 '13 at 14:59

15

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.

answered Apr 21 '13 at 14:59

Niels Keurentjes

41,402
9
98
136

This is poor for accessibility, people using high contrast modes will not see images set as `background`. – Glitch Desire Apr 21 '13 at 15:00
@Oshawott I'm just answering the question, I do not contest that the valid solution should have an `img` element with proper `alt` attribute. – Niels Keurentjes Apr 21 '13 at 16:56
This is close to the answer I needed: .ui-icon-zoom-in {width: 16px;height: 16px; background-image: url(images/16x16/ZoomIn.png) !important; } – Klaus Nji Apr 21 '13 at 18:57
Why is it that https://jigsaw.w3.org/css-validator does not pick up on this issue? I ran a sheet through it that "naively" applies `content:` to a selector that is neither `:before` not `:after`, and it's all green. – Reinderien Jul 19 '19 at 19:38

score 2 · Answer 2 · answered Apr 21 '13 at 15:02

2

The content property is only accepted on :before and :after pseudo-elements in CSS3. You should probably use a jQuery selector to append the image to the object:

$("#zoomin").html("<img src='images/16x16/ZoomIn.png' alt='Zoom In'>");

answered Apr 21 '13 at 15:02

Glitch Desire

14,632
7
43
55

Thanks for this but I do not want to hard code image locations in code. I will like to stick to the pattern recommended by jQuery UI. – Klaus Nji Apr 21 '13 at 15:30
In that case, use a `:before` element absolute positioned at 0,0 with a `content` CSS tag. It's not semantically correct but should work. So like `.ui-icon-zoom-in:before { top: 0px; left: 0px; position:absolute; content: url(images/16x16/ZoomIn.png); }` then make `.ui-icon-zoon-in` a 0px wide, 0px high with `position:relative`. – Glitch Desire Apr 21 '13 at 15:32
Thanks again. What do you mean by "make .ui-icon-zoom-in 0px wide, 0px high with position:relative"? I am new to this stuff, so code helps better. – Klaus Nji Apr 21 '13 at 15:39
I mean, set the css on that element to `position: relative; width: 0px; height: 0px;` -- basically just makes it a reference for its `before` element. – Glitch Desire Apr 21 '13 at 15:41
OK, so in site.css, I have: .ui-icon-zoom-in:before { top:0; left:0; position:absolute; content: url(images/16x16/ZoomIn.png); }. Then in Index.cshtml, I have modified the . Now, the button after the aforementioned, has disappeared. – Klaus Nji Apr 21 '13 at 15:47

score 2 · Answer 3 · answered Oct 12 '17 at 09:50

I had the same situation in IE 11. The content is <div class="image"> </div> So in Chrome it works like this

.image {
  content: url("image.jpg");
}

To make it Works in IE i have set the content option to :after element. Like

.image:after {
  content: url("image.jpg");
}

score 0 · Answer 4 · answered Jun 30 '20 at 08:44

One can use the box-sizing property to keep the dimensions, addind the new image as background image and pushing "out" the existing (old) inline-image by padding-left:

.image{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://yourdomain/yoursite/yourasset.png) no-repeat;
  width: 20px; /* Width of new image */
  height: 25px; /* Height of new image */
  padding-left: 20px; /* Equal to width of new image */
}

box-sizing has a good webbrowser-support: https://caniuse.com/#feat=css3-boxsizing

Adopted from: https://css-tricks.com/replace-the-image-in-an-img-with-css/

css url() not recognized in internet explorer 10

4 Answers4

Linked